jQuery(document).ready(function($) {

    var map = L.map('map', {
        center: [48.577742, 0.060471],
        zoom: 8,
        maxZoom: 18,
        minZoom: 8
    });

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var markersCluster = L.markerClusterGroup({
        spiderfyOnMaxZoom: false,
        showCoverageOnHover: false,
        iconCreateFunction: function(cluster) {
            return L.divIcon({
                html: '<div style="background-color: #95c11f; padding: 10px; text-align: center; border-radius: 100%; box-shadow: 0 0 15px #e5c732; font-weight: bold;"><span>' + cluster.getChildCount() + '</span></div>',
                className: 'mycluster',
                iconSize: L.point(40, 40)
            });
        }
    });

    let allMarkers = []; 

    function addMarkers(data) {
        markersCluster.clearLayers();
        allMarkers = [];
        const values = Object.values(data);
        
        for (const item of values) {

            let itemNom = item.name;
            var itemDomaine = item.categoriesseries ?? null;
            let itemCodePostal = item.codepstl ?? null;
            let itemAvancement = item.avancementduprojet ?? null;
            let itemAnnee = item.annees ?? null;
            let itemLongitude = item.longitude ?? null;
            let itemVille = item.ville ?? null;
            let itemLatitude = item.latitude ?? null;
            let itemAssocie = item.associe ?? null; 
            let itemLabel = item.categorielabel ?? null;
            let itemPhoto = item.image.image_url ?? null;

            if (itemLongitude === null || itemLatitude === null) {
                continue;
            }

            const iconBaseUrl = '/wp-content/plugins/cartographie/media/';
            const iconSize = [50, 50];
            const iconAnchor = [16, 32];
            const popupAnchor = [0, -32];
            const domaineIcons = {
                "Lieux de plantation": "lieux_de_plantation.svg",
                "Producteur de bois": "producteur_de_bois.svg",
                "Acheteur de bois": "chaufferie_bois_clients.svg",
                "Acheteur de chaleur": "chaufferie_vente_chaleur.svg",
                "Plateforme logistique": "plateformes_logistiques.svg"
            };

            let iconUrl = domaineIcons[itemDomaine] ? `${iconBaseUrl}${domaineIcons[itemDomaine]}` : null;
            let defaultIcon = iconUrl 
                ? new L.Icon({
                    iconUrl,
                    iconSize,
                    iconAnchor,
                    popupAnchor
                }) 
                : new L.Icon.Default();
            let imageUrls = [];

            if (Array.isArray(itemLabel)) {
                if (itemLabel.includes("Label haie") && itemLabel.includes("Label végétal local")) {
                    imageUrls.push('/wp-content/plugins/cartographie/media/logo.png');
                    imageUrls.push('/wp-content/plugins/cartographie/media/baseline-dark.svg');
                } else if (itemLabel.includes("Label haie")) {
                    imageUrls.push('/wp-content/plugins/cartographie/media/baseline-dark.svg');
                } else if (itemLabel.includes("Label végétal local")) {
                    imageUrls.push('/wp-content/plugins/cartographie/media/logo.png');
                }
            }

            let popupContent = `
                <div class='modal-container ${itemDomaine === "Lieux de plantation" ? "modal-border-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-border-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-border-black" : ""} ${itemDomaine === "Plateforme logistique" ? "modal-border-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-border-red" : ""}'>
                    <div class="modal-container-header">
                        <img src="${itemPhoto}" style="height: 200px; width: 100%; object-fit: cover;">
                        <p class='modal-domaine color-white ${itemDomaine === "Lieux de plantation" ? "modal-domaine-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-domaine-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-domaine-black" : ""} ${itemDomaine === "Plateforme logistique" ? "modal-domaine-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-domaine-red" : ""}'>${itemDomaine}</p>
                    </div>
                    <div class='modal-container ${itemDomaine === "Lieux de plantation" ? "modal-container-green" : ""} ${itemDomaine === "Acheteur de chaleur" ? "modal-container-yellow" : ""} ${itemDomaine === "Producteur de bois" ? "modal-container-black" : ""} ${itemDomaine === "Plateforme logistique" ? "modal-container-blue" : ""} ${itemDomaine === "Acheteur de bois" ? "modal-container-red" : ""}' style='padding-top: 10px;'>
                        <h2 class='modal-name'>${itemNom}</h2>
                        <h3 class='modal-adress'>${itemCodePostal} ${itemVille}</h3>
                    </div>
                    <p class="modal-associe"><span class="bold">${itemAssocie === "Oui" ? "Associé-e BBE" : ""}</span></p>
                    <p class="modal-annee">Année : <span class="bold">${itemAnnee}</span></p>
                    <p class="modal-etat">État d'avancement : <span class="bold">${itemAvancement}</span></p>
                    <p class="none">${itemLabel}</p>
                    <div class="modal-images">
                        ${imageUrls.map(url => `<img src="${url}" alt="Label Image">`).join('')}
                    </div>
                </div>    
            `;

            let marker = L.marker([itemLatitude, itemLongitude], { icon: defaultIcon })
            .bindPopup(popupContent, {
                autoPan: true, // Active le recadrage automatique
                autoPanPadding: [200, 30], // Définit le padding autour du popup
                keepInView: true // Assure que le popup reste visible à l'écran
            });

        // Ajout du comportement dynamique lors de l'ouverture de la popup

        marker.on('popupopen', function (e) {
            const popup = e.popup;
            const mapBounds = map.getBounds();
            const popupPosition = popup.getLatLng();
            // Ajuste les marges dynamiques
            const autoPanPadding = {
                top: 100, // 100px depuis le haut
                bottom: 50, // 50px depuis le bas
                left: 200, // 50px à gauche
                right: 200 // 50px à droite
            };
            // Vérifie si le popup est hors de la vue et recadre la carte
            if (!mapBounds.contains(popupPosition)) {
                map.panTo(popupPosition, {
                    paddingTopLeft: [autoPanPadding.left, autoPanPadding.top],
                    paddingBottomRight: [autoPanPadding.right, autoPanPadding.bottom]
                });
            }
        });

        marker.bindPopup(popupContent, {
            autoPan: false, // Désactive le recadrage automatique pour éviter un conflit
            keepInView: true, // Assure que la popup reste visible
            offset: L.point(0, -20) // Décale légèrement la popup au-dessus du marqueur
        });

        // Écoute l'événement `popupopen`
        marker.on('popupopen', function (e) {
            const map = e.target._map; // Récupère la carte
            const popupLatLng = e.popup.getLatLng(); // Position du popup (marqueur)
            const popupOffset = e.popup.options.offset; // Décalage défini dans les options
            // Calcul du décalage supplémentaire (margin-left de 50px)
            const additionalOffset = -170; // Décalage en pixels (pour le margin-left)
            // Convertir le décalage en coordonnées de la carte
            const projectedPoint = map.project(popupLatLng).subtract(popupOffset).subtract([additionalOffset, 0]);
            const newCenter = map.unproject(projectedPoint);
            // Centre la carte sur la position ajustée
            map.setView(newCenter, map.getZoom(), {
                animate: true // Animation fluide
            });
        });
        // Gestion de l'icône active lors de l'ouverture et de la fermeture de la popup
        marker.on('popupopen', function () {
            marker.setIcon(activeMarkerIcon);
        });

        marker.on('popupclose', function () {
            marker.setIcon(defaultIcon);
        });
        // Ajout du marqueur au cluster
        allMarkers.push(marker);

        markersCluster.addLayer(marker);

        let activeIconUrl = '';
        if (itemDomaine === "Lieux de plantation") {
            activeIconUrl = '/wp-content/plugins/cartographie/media/lieux_de_plantation_actif.svg';
        } else if (itemDomaine === "Producteur de bois"){
            activeIconUrl = '/wp-content/plugins/cartographie/media/producteur_de_bois_actif.svg';
        } else if (itemDomaine === "Acheteur de bois"){
            activeIconUrl = '/wp-content/plugins/cartographie/media/chaufferie_bois_clients_actif.svg';
        } else if (itemDomaine === "Acheteur de chaleur"){
            activeIconUrl = '/wp-content/plugins/cartographie/media/chaufferie_vente_chaleur_actif.svg';
        } else if (itemDomaine === "Plateforme logistique"){
            activeIconUrl = '/wp-content/plugins/cartographie/media/plateformes_logistiques_actif.svg';
        }

        let activeMarkerIcon = new L.Icon({
            iconUrl: activeIconUrl,
            iconSize: [50, 50],
            iconAnchor: [16, 32],
            popupAnchor: [0, -32]
        });
        allMarkers.push(marker);
        markersCluster.addLayer(marker);
        }

        map.addLayer(markersCluster);
    }

    let btnFullScreen = document.querySelector("#full-screen");
    let theMap = document.querySelector("#map");

    function mapFullScreen() {
        if (!theMap.classList.contains("map-full-screen")) {
            theMap.classList.add("map-full-screen");
            document.querySelector("#full-screen > img").src = "/wp-content/plugins/cartographie/media/close.png";
            document.querySelector("#full-screen > img").style.padding = "15px";
            // Redimensionner la carte Leaflet après être passé en plein écran
            map.invalidateSize(); // Demande à Leaflet de recalculer la taille de la carte
        } else if (theMap.classList.contains("map-full-screen")) {
            theMap.classList.remove("map-full-screen");
            document.querySelector("#full-screen > img").src = "/wp-content/plugins/cartographie/media/full-screen.png";
            document.querySelector("#full-screen > img").style.padding = "10px";
            // Redimensionner la carte Leaflet après avoir quitté le plein écran
            map.invalidateSize();
        }
    }

    btnFullScreen.addEventListener("click", mapFullScreen);
    let api_root = window.location.origin + '?rest_route=/';
    $.ajax({
        url: api_root + "custom/v1/markers",
        method: "GET",
        timeout: 0,
        headers: {
          "Authorization": "Basic ZGlnaXRhbmllOmlOdVkgZkJyVyBRelRDIDVGaTcgVTVzOCBEU2ZZ"
        },
        success: function(data) {
            initialMarkerData = data;
            addMarkers(data);
        },
        error: function(xhr, status, error) {
            console.error('Erreur lors de la récupération des données :', error);
        }
    });


    function filterMarkers() {
        var statusFilters = {
            'En cours': $('#en-cours').hasClass('filter-active'),
            'Terminé': $('#projets-finis').hasClass('filter-active'),
            'Prévu': $('#prevu').hasClass('filter-active'),
        };

        var associeFilterActive = $('#toggle-associe').hasClass('filter-active');
        var labelFilters = {
            'aucun': $('#label-aucun').hasClass('filter-active'),
            'haie': $('#label-haie').hasClass('filter-active'),
            'vegetal': $('#label-vegetal').hasClass('filter-active'),
        };

        var domaineFilters = {
            'Lieux de plantation': $('#lieux-de-plantation').hasClass('filter-active'),
            'Acheteur de bois': $('#chaufferies-bois-clients').hasClass('filter-active'),
            'Producteur de bois': $('#exploitations-productrices-de-bois-pour-BBE').hasClass('filter-active'),
            'Acheteur de chaleur': $('#chaufferies-vente-de-chaleur').hasClass('filter-active'),
            'Plateforme logistique': $('#plateformes-logistiques').hasClass('filter-active'),
        };

        var filteredMarkers = allMarkers.filter(function(marker) {
            let popupContent = marker.getPopup().getContent();
            let matchesStatusFilter = Object.keys(statusFilters).some(function(key) {
                return statusFilters[key] ? popupContent.includes(key) : false;
            }) || !Object.values(statusFilters).includes(true); 
            let matchesAssocieFilter = associeFilterActive ? popupContent.includes('Associé-e BBE') : true;
            let matchesLabelFilter = labelFilters['haie'] && labelFilters['vegetal'] 

                ? (popupContent.includes('Label haie') || popupContent.includes('végétal local')) 

                : (labelFilters['haie'] ? popupContent.includes('Label haie') 

                : (labelFilters['vegetal'] ? popupContent.includes('végétal local') 

                : labelFilters['aucun'] ? popupContent.includes('Aucun') : true));

        

            let matchesDomaineFilter = Object.keys(domaineFilters).some(function(key) {

                return domaineFilters[key] ? popupContent.includes(key) : false;

            }) || !Object.values(domaineFilters).includes(true); 

           

            return matchesStatusFilter && matchesAssocieFilter && matchesLabelFilter && matchesDomaineFilter;

        });

        

        markersCluster.clearLayers(); 

        markersCluster.addLayers(filteredMarkers);

    }

    

    function handleFilterClick(filterId, otherFilterIds) {
        $(filterId).on('click', function() {
            $(this).toggleClass('filter-active');
            if ($(this).hasClass('wait-button')) {
                $(this).toggleClass('button-active');
            }
            if ($(this).hasClass('filter-active') && otherFilterIds && Array.isArray(otherFilterIds)) {
                otherFilterIds.forEach(function(otherFilterId) {
                    $(otherFilterId).removeClass('filter-active button-active');
                });
            }
            filterMarkers(); 
        });
    }

    function handleToggleClick(toggleId) {
        $(toggleId).on('click', function() {
            const parentElement = document.querySelector(toggleId);
            const childElement = document.querySelector(`${toggleId} > div`);
            if ($(this).toggleClass('filter-active').hasClass('filter-active')) {
                parentElement.classList.remove("toggle-to-anim-parent-reverse");
                childElement.classList.remove("toggle-to-anim-enfant-reverse");
                parentElement.classList.add("toggle-to-anim-parent");
                childElement.classList.add("toggle-to-anim-enfant");
            } else {
                parentElement.classList.remove("toggle-to-anim-parent");
                childElement.classList.remove("toggle-to-anim-enfant");
                parentElement.classList.add("toggle-to-anim-parent-reverse");
                childElement.classList.add("toggle-to-anim-enfant-reverse");
            }
            filterMarkers(); 
        });
    }

    handleFilterClick('#en-cours', ['#prevu', '#projets-finis']);
    handleFilterClick('#prevu', ['#en-cours', '#projets-finis']);
    handleFilterClick('#projets-finis', ['#en-cours', '#prevu']);
    handleToggleClick('#toggle-associe');
    handleFilterClick('#label-haie', ['#label-aucun']);
    handleFilterClick('#label-vegetal', ['#label-aucun']);
    handleFilterClick('#lieux-de-plantation', false);
    handleFilterClick('#chaufferies-bois-clients', false);
    handleFilterClick('#exploitations-productrices-de-bois-pour-BBE', false);
    handleFilterClick('#chaufferies-vente-de-chaleur', false);
    handleFilterClick('#plateformes-logistiques', false);

    map.scrollWheelZoom.disable();

    map.on('click', () => {
        map.scrollWheelZoom.enable();
    });
    map.on('mouseout', () => {
        map.scrollWheelZoom.disable();
    });
});