document.addEventListener('DOMContentLoaded', () => {

    // =========================
    // CEK LEAFLET
    // =========================
    if (typeof L === 'undefined') {
        console.error('Leaflet not loaded');
        return;
    }

    const mapEl = document.getElementById('map');
    if (!mapEl) return;

    // =========================
    // INIT MAP
    // =========================
    const map = L.map('map').setView([-6.2, 106.8], 5);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19
    }).addTo(map);

    // =========================
    // ICONS
    // =========================
    const iconNormal = L.icon({
        iconUrl: '../assets/images/site-green.png',
        iconSize: [38, 38],
        iconAnchor: [19, 38],
        popupAnchor: [0, -36]
    });

    const iconAlert = L.icon({
        iconUrl: '../assets/images/site-red.png',
        iconSize: [38, 38],
        iconAnchor: [19, 38],
        popupAnchor: [0, -36]
    });

    // =========================
    // MARKER LAYER
    // =========================
    const markerLayer = L.layerGroup().addTo(map);
    let firstLoad = true;

    // =========================
    // LOAD MAP DATA
    // =========================
    function loadMapData() {

        fetch('../api/monitoring/map_sites.php')
            .then(res => res.text())
            .then(text => {

                console.log('MAP API RESPONSE:', text);

                if (!text || !text.trim()) return;

                let data;
                try {
                    data = JSON.parse(text);
                } catch (err) {
                    console.error('JSON parse error:', err);
                    return;
                }

                if (!Array.isArray(data)) return;

                markerLayer.clearLayers();
                let bounds = [];

                data.forEach(site => {

                    const lat = parseFloat(site.lat);
                    const lng = parseFloat(site.lon);
                    if (isNaN(lat) || isNaN(lng)) return;

                    bounds.push([lat, lng]);

                    const hasAlert = Number(site.active_alert) > 0;
                    const icon = hasAlert ? iconAlert : iconNormal;

                    const popupHtml = `
                        <b>${site.nama_site}</b><br>
                        Code Site : ${site.code_site}<br>
                        Total PC  : ${site.total_pc}<br>
                        🔥 Alert  : <b>${site.active_alert}</b>
                    `;

                    // =========================
                    // MARKER + BLINK
                    // =========================
                    const marker = L.marker([lat, lng], {
                        icon: icon,
                        className: hasAlert ? 'blink' : ''
                    })
                    .bindPopup(popupHtml)
                    .addTo(markerLayer);

                });

                // =========================
                // FIT BOUNDS HANYA SEKALI
                // =========================
                if (firstLoad && bounds.length > 0) {
                    map.fitBounds(bounds, { padding: [40, 40] });
                    firstLoad = false;
                }
            })
            .catch(err => console.error('MAP ERROR:', err));
    }

    // =========================
    // INITIAL LOAD
    // =========================
    loadMapData();

    // =========================
    // AUTO REFRESH (10 DETIK)
    // =========================
    setInterval(loadMapData, 10000);

});
