document.addEventListener("DOMContentLoaded", function() {
    const mapContainers = document.querySelectorAll('.eew-map-container');

    mapContainers.forEach(container => {
        const mapData = JSON.parse(container.getAttribute('data-map'));
        const originalCenter = [parseFloat(mapData.center[0]), parseFloat(mapData.center[1])];
        const originalZoom = parseFloat(mapData.zoom);
        
        const map = L.map(container, {
            zoomControl: false,
            attributionControl: false,
            dragging: false,
            touchZoom: false,
            doubleClickZoom: false,
            scrollWheelZoom: false,
            boxZoom: false,
            keyboard: false,
            zoomSnap: 0.1,
            zoomDelta: 0.1
        }).setView(originalCenter, originalZoom);

        // Appel du thème Dark Matter (sans relief) qui sera inversé par le CSS
        L.tileLayer('https://{s}.basemaps.cartocdn.com/dark_nolabels/{z}/{x}/{y}{r}.png', {
            subdomains: 'abcd',
            maxZoom: 19,
            className: 'eew-flat-map' // La classe qui déclenche le filtre CSS
        }).addTo(map);

        let hoverTimeout; // Variable pour calmer la sensibilité de la hitbox

        if (mapData.markers && mapData.markers.length > 0) {
            mapData.markers.forEach(m => {
                const iconHtml = `
                    <div class="eew-marker-inner" style="background-image:url('${m.img || ''}')"></div>
                    <div class="eew-marker-label">${m.name}</div>
                `;
                
                const icon = L.divIcon({
                    className: 'eew-marker-wrapper',
                    html: iconHtml,
                    iconSize: [60, 60],
                    iconAnchor: [30, 30] // Verrouille le centre de l'image sur le point GPS exact
                });

                const marker = L.marker([parseFloat(m.lat), parseFloat(m.lng)], {icon: icon}).addTo(map);
                
                marker.on('mouseover', function() {
                    clearTimeout(hoverTimeout);
                    this._icon.classList.add('is-hovered');
                    
                    // FIX : setZoomAround zoome directement sous le curseur, empêchant la fuite de l'icône
                    map.setZoomAround(this.getLatLng(), originalZoom + 1.5, {
                        animate: true,
                        duration: 0.5
                    });
                });
                
                marker.on('mouseout', function() {
                    this._icon.classList.remove('is-hovered');
                    
                    // FIX : Un très léger délai pour ignorer les tremblements de souris
                    hoverTimeout = setTimeout(() => {
                        map.setView(originalCenter, originalZoom, {
                            animate: true,
                            duration: 0.5
                        });
                    }, 150);
                });

                if(m.link) {
                    marker.on('click', function() { window.location.href = m.link; });
                    marker._icon.style.cursor = "pointer";
                }
            });
        }

        setTimeout(() => map.invalidateSize(), 400);
    });
});