/* ==========================================================================
   LOGIQUE CARTOGRAPHIQUE PUBLIC SASS : /js/map.js
   ========================================================================== */

document.addEventListener("DOMContentLoaded", () => {
    
    // 1. Initialisation de la carte centrée sur l'Europe
    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 des données géographiques transmises par PHP
    if (typeof PARCS_DATA !== 'undefined' && PARCS_DATA.length > 0) {
        
        PARCS_DATA.forEach(parc => {
            const lat = parseFloat(parc.latitude);
            const lng = parseFloat(parc.longitude);

            if (!isNaN(lat) && !isNaN(lng)) {
                
                const cover = parc.cover_image ? `img/covers/${parc.cover_image}` : `img/covers/default.jpg`;
                const coastersCount = parseInt(parc.nb_coasters) || 0;

                // 4. GENERATION DU BADGE NUMÉRIQUE IDENTIQUE A L'ADMIN (Rond bleu moderne)
                const modernBadgeIcon = L.divIcon({
                    className: 'pt-custom-marker-badge', // Classe stylisée dans mapview.css
                    html: `<span>${coastersCount}</span>`, 
                    iconSize: [36, 36], 
                    iconAnchor: [18, 18], 
                    popupAnchor: [0, -18] 
                });

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

                // Structure de la popup premium au clic
                const popupHTML = `
                    <div class="map-popup-card">
                        <img src="${cover}" class="map-popup-thumb" alt="Cover" style="width:100%; height:110px; object-fit:cover; border-radius:10px; margin-bottom:8px;">
                        <div class="map-popup-body">
                            <h4 style="margin:0 0 4px 0; font-size:0.95rem; font-weight:800; color:#0f172a;">${parc.nom}</h4>
                            <p style="margin:0 0 10px 0; font-size:0.8rem; color:#64748b;"><i class="fa-solid fa-ticket" style="color:#4a51ff;"></i> ${coastersCount} Coaster${coastersCount > 1 ? 's' : ''} actif(s)</p>
                            <a href="parcview.php?id=${parc.id}" class="map-popup-btn" style="display:block; text-align:center; background:#4a51ff; color:#fff; text-decoration:none; padding:8px 12px; border-radius:8px; font-size:0.8rem; font-weight:700;">Consulter le parc <i class="fa-solid fa-chevron-right" style="font-size:0.7rem; margin-left:4px;"></i></a>
                        </div>
                    </div>
                `;

                marker.bindPopup(popupHTML);
            }
        });
    }
});