import mapboxgl from 'mapbox-gl';

interface AnimationOptions {
    duration: number;
    easing: string;
    transform: string;
}

interface CustomPopupOptions extends mapboxgl.PopupOptions {
    openingAnimation?: AnimationOptions;
    closingAnimation?: AnimationOptions;
}

// Extend the native Mapbox Popup
export class CustomAnimatedPopup extends mapboxgl.Popup {
    private openingAnimation: AnimationOptions;
    private closingAnimation: AnimationOptions;
    private animating = false;

    constructor(options: CustomPopupOptions = {}) {
        // Extract animation options and pass the rest to the parent class
        const {
            openingAnimation,
            closingAnimation,
            className,
            ...mapboxOptions
        } = options;

        // Add our custom class to the className
        const customClassName = `custom-animated-popup ${className || ''}`.trim();

        // Call the parent constructor
        super({
            ...mapboxOptions,
            className: customClassName,
        });

        // Store animation options
        this.openingAnimation = openingAnimation || {
            duration: 300,
            easing: 'ease-out',
            transform: 'scale'
        };

        this.closingAnimation = closingAnimation || {
            duration: 200,
            easing: 'ease-in-out',
            transform: 'scale'
        };

        // Override the parent's add method
        const parentAdd = this.addTo;
        this.addTo = (map: mapboxgl.Map) => {
            // Call the parent method first
            parentAdd.call(this, map);

            // Apply animation after a short delay to ensure the element is in the DOM
            setTimeout(() => this.animateOpen(), 10);

            return this;
        };
    }

    // Override the remove method to add animation
    remove(): this {
        if (this.animating) {
            return this;
        }

        this.animateClose(() => {
            super.remove();
        });

        return this;
    }

    // Animation methods
    private animateOpen(): void {
        const container = this._container;
        if (!container) return;

        // Apply initial state
        container.style.opacity = '0';
        container.style.transform = 'scale(0.8)';
        container.style.transition = `
      opacity ${this.openingAnimation.duration}ms ${this.openingAnimation.easing}, 
      transform ${this.openingAnimation.duration}ms ${this.openingAnimation.easing}
    `;

        // Force reflow
        void container.offsetHeight;

        // Apply final state to trigger animation
        container.style.opacity = '1';
        container.style.transform = 'scale(1)';
    }

    private animateClose(callback: () => void): void {
        const container = this._container;
        if (!container) {
            callback();
            return;
        }

        this.animating = true;

        // Setup transition
        container.style.transition = `
      opacity ${this.closingAnimation.duration}ms ${this.closingAnimation.easing}, 
      transform ${this.closingAnimation.duration}ms ${this.closingAnimation.easing}
    `;

        // Apply closing animation
        container.style.opacity = '0';
        container.style.transform = 'scale(0.8)';

        // Execute callback after animation completes
        setTimeout(() => {
            this.animating = false;
            callback();
        }, this.closingAnimation.duration);
    }

    // Add method to create expanding wave circles
    addWaveCircles(map: mapboxgl.Map, lngLat: mapboxgl.LngLat, options: {
        color?: string,
        maxRadius?: number,
        duration?: number,
        count?: number,
        showCenter?: boolean
    } = {}): void {
        const {
            color = 'red',
            maxRadius = 80, // Reduce max radius for less "over" effect
            duration = 2000, // Faster animation
            count = 2, // Fewer circles
            showCenter = true
        } = options;

        const sourceId = `wave-circles-${Math.random().toString(36).substring(2, 9)}`;

        if (!map.getSource(sourceId)) {
            map.addSource(sourceId, {
                type: 'geojson',
                data: {
                    type: 'FeatureCollection',
                    features: [{
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: [lngLat.lng, lngLat.lat]
                        },
                        properties: {
                            radius: 0
                        }
                    }]
                }
            });

            for (let i = 0; i < count; i++) {
                const layerId = `${sourceId}-layer-${i}`;
                const delay = i * (duration / count);

                map.addLayer({
                    id: layerId,
                    type: 'circle',
                    source: sourceId,
                    paint: {
                        'circle-radius': ['interpolate', ['linear'], ['get', 'radius'], 0, 0, 100, maxRadius],
                        'circle-color': 'transparent',
                        'circle-opacity': ['interpolate', ['linear'], ['get', 'radius'],
                            0, showCenter ? 0.15 : 0, // Lower opacity
                            100, 0
                        ],
                        'circle-stroke-width': 1.5, // Thinner stroke
                        'circle-stroke-color': color
                    }
                });

                this.animateWaveCircle(map, sourceId, layerId, duration, delay);
            }
        }
    }

    private animateWaveCircle(
        map: mapboxgl.Map,
        sourceId: string,
        layerId: string,
        duration: number,
        delay: number
    ): void {
        let start: number | null = null;
        let animationId: number;

        const animate = (timestamp: number) => {
            if (!start) {
                start = timestamp + delay;
            }

            const progress = Math.max(0, timestamp - start);
            const progressPercent = Math.min(progress / duration, 1);

            if (map.getSource(sourceId)) {
                (map.getSource(sourceId) as mapboxgl.GeoJSONSource).setData({
                    type: 'FeatureCollection',
                    features: [{
                        type: 'Feature',
                        geometry: {
                            type: 'Point',
                            coordinates: (map.getSource(sourceId) as any)._data.features[0].geometry.coordinates
                        },
                        properties: {
                            radius: progressPercent * 100
                        }
                    }]
                });
            }

            if (progressPercent < 1) {
                animationId = requestAnimationFrame(animate);
            } else if (map.getLayer(layerId)) {
                // Restart the animation for continuous effect
                start = null;
                animationId = requestAnimationFrame(animate);
            }
        };

        // Start the animation after delay
        setTimeout(() => {
            animationId = requestAnimationFrame(animate);
        }, delay);

        // Clean up on popup close
        this.once('close', () => {
            cancelAnimationFrame(animationId);
            if (map.getLayer(layerId)) {
                map.removeLayer(layerId);
            }
            if (map.getSource(sourceId) && !map.getLayer(layerId)) {
                map.removeSource(sourceId);
            }
        });
    }
}

// Add styles to document when in browser environment
if (typeof document !== 'undefined') {
    // Add styles only if they don't exist yet
    if (!document.getElementById('custom-animated-popup-styles')) {
        const style = document.createElement('style');
        style.id = 'custom-animated-popup-styles';
        style.textContent = `
      .custom-animated-popup {
        will-change: transform, opacity;
      }
      .custom-animated-popup .mapboxgl-popup-content {
        overflow: hidden;
      }
      
      /* Marker styles with wave circles */
      .marker-gempa {
        position: relative;
        width: 30px;
        height: 30px;
        cursor: pointer;
      }
      
      .circles {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      
      .circle1, .circle2, .circle3 {
        position: absolute;
        border-radius: 50%;
        border: 2px solid red;
        width: 100%;
        height: 100%;
        opacity: 0;
        animation: pulse 2s infinite;
      }
      
      .circle2 {
        animation-delay: 0.5s;
      }
      
      .circle3 {
        animation-delay: 1s;
      }
      
      @keyframes pulse {
        0% {
          transform: scale(0.5);
          opacity: 0;
        }
        50% {
          opacity: 0.8;
        }
        100% {
          transform: scale(1.5);
          opacity: 0;
        }
      }
      
      .blink {
        animation: blink 1s infinite;
        color: red;
        font-size: 20px;
      }
      
      @keyframes blink {
        0% { opacity: 1; }
        50% { opacity: 0.3; }
        100% { opacity: 1; }
      }
    `;
        document.head.appendChild(style);
    }
}