let map;
const markers = [];
let streetLayer, satelliteLayer, labelsLayer, hybridLayer;

function initMap(center) {
    // Base layers
    streetLayer = L.tileLayer(
        'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        { attribution: '© OpenStreetMap contributors' }
    );

    satelliteLayer = L.tileLayer(
        'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
        { attribution: 'Tiles © Esri' }
    );

    labelsLayer = L.tileLayer(
        'https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer/tile/{z}/{y}/{x}',
        { attribution: 'Labels © Esri' }
    );

    hybridLayer = L.layerGroup([satelliteLayer, labelsLayer]);

    // Init map dengan posisi dari API
    map = L.map('map', {
        center: [center.lat, center.lng],
        zoom: 12,
        layers: [hybridLayer],
        fullscreenControl: true,
        fullscreenControlOptions: { position: 'topleft' }
    });

    // Control layer
    L.control.layers({
        "Jalan (OSM)": streetLayer,
        "Hybrid (Satelit + Jalan)": hybridLayer
    }).addTo(map);

    // Ambil marker pertama kali
    fetchMarkers();
    // Refresh marker tiap 30 detik
    setInterval(fetchMarkers, 30000);
}

function fetchMarkers() {
    fetch(`load/maps_marker.php?i=${topologiId}`)
        .then(response => {
            if (!response.ok) throw new Error('Network response was not ok ' + response.statusText);
            return response.json();
        })
        .then(res => {
            if (!res.status) {
                console.warn("⚠️ Tidak ada data marker");
                return;
            }

            // Hapus marker lama
            markers.forEach(marker => map.removeLayer(marker));
            markers.length = 0;

            // Tambahkan marker baru
            res.data.forEach(markerData => {
                const iconCustom = L.icon({
                    iconUrl: markerData.icon,
                    iconSize: [30, 30]
                });

                const markerInstance = L.marker(
                    [markerData.lat, markerData.lng],
                    { icon: iconCustom, title: markerData.title }
                ).addTo(map);

                markerInstance.bindPopup(markerData.content);
                markers.push(markerInstance);
            });

            console.log(`✅ Marker berhasil ditampilkan: ${markers.length}`);
        })
        .catch(error => console.error('❌ Error fetching markers:', error));
}

// Ambil dulu center dari API sebelum init map
window.onload = function() {
    fetch(`load/maps_marker.php?i=${topologiId}`)
        .then(res => res.json())
        .then(res => {
            if (res.status && res.centerlonglat) {
                console.log("📍 Init map pakai centerlonglat:", res.centerlonglat);
                initMap(res.centerlonglat);
            } else {
                console.warn("⚠️ Centerlonglat tidak ada, pakai fallback Jakarta");
                initMap({ lat: -6.2, lng: 106.816666 });
            }
        })
        .catch(err => {
            console.error("❌ Gagal ambil data awal:", err);
            initMap({ lat: -6.2, lng: 106.816666 }); // fallback
        });
};