/* ==========================================================================
   LOGIQUE CARTOGRAPHIQUE CENTRALISÉE : /js/map_public.js
   ========================================================================== */

document.addEventListener("DOMContentLoaded", () => {
    
    // 1. Définition de l'ancrage visuel par défaut sur l'Europe continentale
    const map = L.map('map').setView([46.603354, 1.888334], 6);

    // 2. Implantation de la couche cartographique OpenStreetMap
    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. Bouclage et analyse des informations 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. DESIGN MARQUEUR IDENTIQUE ADMIN (Badge circulaire bleu électrique)
                const modernBadgeIcon = L.divIcon({
                    className: 'pt-custom-marker-badge', 
                    html: `<span>${coastersCount}</span>`, 
                    iconSize: [36, 36], 
                    iconAnchor: [18, 18], 
                    popupAnchor: [0, -18] 
                });

                const marker = L.marker([lat, lng], { icon: modernBadgeIcon }).addTo(map);

                // 5. Structure HTML interne de la popup au clic sur le point
                const popupHTML = `
                    <div class="map-popup-card">
                        <img src="${cover}" class="map-popup-thumb" alt="Visuel" style="width:100%; height:110px; object-fit:cover; background:#f1f5f9;">
                        <div class="map-popup-body" style="padding:14px;">
                            <h4 style="font-size:0.95rem; font-weight:800; color:#0f172a; margin:0 0 4px 0;">${parc.nom}</h4>
                            <p style="font-size:0.8rem; color:#64748b; margin:0 0 12px 0; display:flex; align-items:center; gap:6px;"><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:#ffffff; 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);
            }
        });
    }
});