// --- Fitur Import GeoJSON ---

const fileGeoJson = document.getElementById('fileGeoJson');
let geoJsonLayers = {};
let geoJsonCounter = 0;

window.toggleGeoJsonMenu = function() {
    const list = document.getElementById('geoJsonFileList');
    const icon = document.getElementById('geoJsonToggleIcon');
    if (list.style.display === 'none') {
        list.style.display = 'block';
        icon.className = 'fas fa-minus';
    } else {
        list.style.display = 'none';
        icon.className = 'fas fa-plus';
    }
};

fileGeoJson.addEventListener('change', function(e) {
    const file = e.target.files[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onload = function(event) {
        try {
            const geoJsonData = JSON.parse(event.target.result);
            const fileName = file.name;
            const layerId = 'gj_' + (++geoJsonCounter);
            
            // Buat FeatureGroup khusus untuk file ini
            const individualLayer = L.featureGroup();
            
            // Tambahkan ke map
            L.geoJSON(geoJsonData, {
                onEachFeature: function (feature, layer) {
                    if (feature.properties) {
                        let popupContent = '<h4>Informasi Feature</h4><ul style="list-style:none; padding:0;">';
                        for (let key in feature.properties) {
                            popupContent += `<li><strong>${key}:</strong> ${feature.properties[key]}</li>`;
                        }
                        popupContent += '</ul>';
                        layer.bindPopup(popupContent);
                    }
                },
                style: function(feature) {
                    return {
                        color: feature.properties.color || '#3388ff',
                        weight: 2,
                        fillOpacity: 0.4
                    };
                }
            }).addTo(individualLayer);
            
            individualLayer.addTo(map);
            geoJsonLayers[layerId] = individualLayer;
            
            // Tambahkan checkbox ke UI
            const container = document.getElementById('geoJsonLayersContainer');
            const label = document.createElement('label');
            label.className = 'layer-option';
            label.innerHTML = `<input type="checkbox" id="chk_${layerId}" checked> ${fileName}`;
            
            label.querySelector('input').addEventListener('change', function(e) {
                if (e.target.checked) {
                    map.addLayer(geoJsonLayers[layerId]);
                } else {
                    map.removeLayer(geoJsonLayers[layerId]);
                }
            });
            
            container.appendChild(label);
            
            // Reset input file agar bisa import file yang sama jika dihapus
            fileGeoJson.value = '';
            
            alert('File GeoJSON berhasil dimuat!');

        } catch (error) {
            alert('Gagal memproses file GeoJSON. Pastikan format valid.');
            console.error(error);
        }
    };
    reader.readAsText(file);
});