/* ==========================================================================
   LOGIQUE CARTOGRAPHIQUE LEAFLET : /panel/mapview.js
   ========================================================================== */

document.addEventListener("DOMContentLoaded", () => {
    
    // 1. Centrage initial de la vue géolocalisée sur l'Europe continentale
    const map = L.map('map').setView([46.603354, 1.888334], 6);

    // 2. Chargement du fond de carte OpenStreetMap standard
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
    }).addTo(map);

    // 3. Traitement et bouclage sur les données géographiques transmises par PHP
    if (typeof parcsData !== 'undefined' && parcsData.length > 0) {
        
        parcsData.forEach(parc => {
            const lat = parseFloat(parc.latitude);
            const lng = parseFloat(parc.longitude);

            // Vérification que les coordonnées GPS extraites de la BDD sont valides
            if (!isNaN(lat) && !isNaN(lng)) {
                
                // Routage de la cover_image locale ou affichage d'une cover générique
                const cover = parc.cover_image ? `../img/covers/${parc.cover_image}` : `../img/covers/default.jpg`;
                const coastersCount = parseInt(parc.nb_coasters) || 0;

                // 4. DESIGN DU MARQUEUR DIV CUSTOMISÉ CONTENANT LE NOMBRE DE COASTERS
                const modernBadgeIcon = L.divIcon({
                    className: 'pt-custom-marker-badge', // Classe CSS présente dans mapview.css
                    html: `<span>${coastersCount}</span>`, // Chiffre exact injecté au centre
                    iconSize: [36, 36], // Taille parfaite du cercle (36px x 36px)
                    iconAnchor: [18, 18], // Centre l'ancrage horizontalement et verticalement
                    popupAnchor: [0, -18] // Positionne l'ouverture de l'infobulle pile au-dessus du cercle
                });

                // Implantation du marqueur modernisé avec son icône HTML sur la carte
                const marker = L.marker([lat, lng], { icon: modernBadgeIcon }).addTo(map);

                // 5. Structure et gabarit HTML injecté à l'intérieur de l'infobulle au clic
                // MISE À JOUR : Le lien pointe maintenant vers ../parcview.php à la racine
                const popupHTML = `
                    <div class="map-popup-card">
                        <img src="${cover}" class="map-popup-thumb" alt="Cover">
                        <div class="map-popup-body">
                            <h4>${parc.nom}</h4>
                            <p><i class="fa-solid fa-ticket" style="color:#4a51ff;"></i> ${coastersCount} Coaster${coastersCount > 1 ? 's' : ''}</p>
                            <a href="../parcview.php?id=${parc.id}" class="map-popup-btn">Consulter le parc <i class="fa-solid fa-chevron-right" style="font-size:0.7rem; margin-left:4px;"></i></a>
                        </div>
                    </div>
                `;

                // Liaison finale de la bulle d'information au marqueur
                marker.bindPopup(popupHTML);
            }
        });
    }
});