"use client"

import React, { useEffect } from 'react';
import mapboxgl from 'mapbox-gl';

interface CoastlineLayerProps {
    map: mapboxgl.Map | null;
    visible?: boolean;
}

export default function CoastlineLayer({ map, visible = true }: CoastlineLayerProps) {
    useEffect(() => {
        if (!map) return;

        // Function to add coastline layer
        function addCoastline() {
            const sourceId = 'coastline';
            const layerId = 'outline-coastline';

            // Make sure map is defined
            if (!map) return;

            try {
                // Check if the source already exists
                if (!map.getSource(sourceId)) {
                    // Add coastline data source
                    fetch('/geojson/garis_pantai.geojson')
                        .then(response => response.json())
                        .then(data => {
                            // Add coastline data source
                            map.addSource(sourceId, {
                                type: 'geojson',
                                generateId: true,
                                data: data
                            });

                            // Add coastline layer
                            map.addLayer({
                                'id': layerId,
                                'type': 'line',
                                'source': sourceId,
                                'layout': {
                                    'visibility': visible ? 'visible' : 'none',
                                },
                                'paint': {
                                    'line-color': ['get', 'color'],
                                    'line-width': 5,
                                    'line-opacity': 1
                                }
                            });
                        })
                        .catch((error) => {
                            console.error('Error fetching coastline data:', error);
                        });
                } else if (map.getLayer(layerId)) {
                    // If the layer exists, just update its visibility
                    map.setLayoutProperty(
                        layerId,
                        'visibility',
                        visible ? 'visible' : 'none'
                    );
                }
            } catch (error) {
                console.warn("Error adding coastline:", error);
            }
        }

        // Function to clean up layers
        function cleanupCoastline() {
            try {
                if (!map || !map.getStyle()) return;

                const layerId = 'outline-coastline';
                const sourceId = 'coastline';

                if (map.getLayer(layerId)) {
                    map.removeLayer(layerId);
                }

                if (map.getSource(sourceId)) {
                    map.removeSource(sourceId);
                }
            } catch (error) {
                console.warn("Error cleaning up coastline:", error);
            }
        }

        let timeoutId: NodeJS.Timeout | undefined;

        // Try to add the layers now or set up listeners for when map is ready
        try {
            if (map.loaded() && map.isStyleLoaded()) {
                addCoastline();
            } else {
                // Use multiple events to catch map ready state
                map.on('load', addCoastline);
                map.on('style.load', addCoastline);
                map.on('styledata', addCoastline);

                // Fallback timeout
                timeoutId = setTimeout(() => {
                    addCoastline();
                }, 2000);
            }
        } catch (error) {
            console.warn("Error setting up coastline:", error);
        }

        // Single cleanup function
        return () => {
            if (timeoutId) clearTimeout(timeoutId);

            if (map) {
                map.off('load', addCoastline);
                map.off('style.load', addCoastline);
                map.off('styledata', addCoastline);
            }

            cleanupCoastline();
        };
    }, [map, visible]);

    return null;
}
