// ===== Panel Management =====
// Mengelola Left Sidebar Toggle + Right Panel + Layer Control

(function () {
    // ---- Konstanta Jenis Ibadah ----
    const IBADAH_EMOJI = {
        'Masjid':    '🕌',
        'Gereja':    '⛪',
        'Pura':      '🛕',
        'Vihara':    '🪷',
        'Kelenteng': '🏮',
    };
    window.IBADAH_EMOJI = IBADAH_EMOJI;

    // ---- State ----
    let activePanel = null;

    // ---- Elements ----
    const sidebarToggleBtn  = document.getElementById('sidebarToggleBtn');
    const sidebarToggleIcon = document.getElementById('sidebarToggleIcon');
    const leftSidebar       = document.getElementById('leftSidebar');
    const rightPanel        = document.getElementById('rightPanel');
    const rightPanelTitle   = document.getElementById('rightPanelTitle');
    const rightPanelActions = document.getElementById('rightPanelActions');
    const rightPanelBody    = document.getElementById('rightPanelBody');
    const rightPanelClose   = document.getElementById('rightPanelClose');

    // ---- Sidebar Toggle ----
    sidebarToggleBtn.addEventListener('click', function () {
        const isOpen = leftSidebar.style.display !== 'none';
        if (isOpen) {
            leftSidebar.style.display = 'none';
            sidebarToggleBtn.classList.remove('open');
            sidebarToggleIcon.className = 'fas fa-chevron-right';
        } else {
            leftSidebar.style.display = 'flex';
            sidebarToggleBtn.classList.add('open');
            sidebarToggleIcon.className = 'fas fa-chevron-left';
        }
    });

    // ---- Sidebar Buttons ----
    document.querySelectorAll('.sidebar-btn').forEach(btn => {
        btn.addEventListener('click', function () {
            const panel = this.dataset.panel;
            if (activePanel === panel) {
                closePanel();
            } else {
                openPanel(panel);
            }
        });
    });

    rightPanelClose.addEventListener('click', closePanel);

    // ---- Open / Close Panel ----
    function openPanel(panel) {
        activePanel = panel;
        rightPanel.classList.add('open');
        document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
        const activeBtn = document.querySelector(`.sidebar-btn[data-panel="${panel}"]`);
        if (activeBtn) activeBtn.classList.add('active');
        renderPanel(panel);
    }

    function closePanel() {
        activePanel = null;
        rightPanel.classList.remove('open');
        document.querySelectorAll('.sidebar-btn').forEach(b => b.classList.remove('active'));
    }

    window.refreshActivePanel = function () {
        if (activePanel && activePanel !== 'layer') renderPanel(activePanel);
    };

    // ---- Render Panel by Type ----
    function renderPanel(type) {
        rightPanelBody.innerHTML = '<div class="panel-empty">Memuat data...</div>';
        rightPanelActions.innerHTML = '';

        switch (type) {
            case 'spbu':   renderSpbuPanel();   break;
            case 'jalan':  renderJalanPanel();  break;
            case 'parsil': renderParsilPanel(); break;
            case 'ibadah': renderIbadahPanel(); break;
            case 'miskin': renderMiskinPanel(); break;
        }
    }

    // ==========================
    // ===== SPBU Panel =========
    // ==========================
    function renderSpbuPanel() {
        rightPanelTitle.textContent = '⛽ SPBU';
        rightPanelActions.innerHTML = `
            <button class="btn-panel-add" id="btnPanelAddSpbu">
                <i class="fas fa-plus"></i> Tambah SPBU
            </button>`;
        document.getElementById('btnPanelAddSpbu').addEventListener('click', () => {
            window.activateAddMode('spbu');
        });

        const items = [];
        spbuLayer.eachLayer(l => { if (l.spbuData) items.push(l.spbuData); });

        if (!items.length) {
            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data SPBU</div>';
            return;
        }

        rightPanelBody.innerHTML = '';
        items.forEach(d => {
            const bdg = d.is_24_jam
                ? '<span class="data-card-badge badge-green">24 Jam</span>'
                : '<span class="data-card-badge badge-red">Tidak 24 Jam</span>';
            const card = document.createElement('div');
            card.className = 'data-card';
            card.innerHTML = `
                <div class="data-card-main">
                    <div class="data-card-icon card-icon-spbu">⛽</div>
                    <div class="data-card-info">
                        <div class="data-card-name">${escHtml(d.nama)}</div>
                        <div class="data-card-sub">📞 ${d.no_wa || '-'}</div>
                        ${bdg}
                    </div>
                    <div class="data-card-actions">
                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
                    </div>
                </div>`;
            card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); openEditSpbuModal(d.id); });
            card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); deleteSpbu(d.id); });
            card.addEventListener('click', () => flyToSpbu(d.id));
            rightPanelBody.appendChild(card);
        });
    }

    function flyToSpbu(id) {
        spbuLayer.eachLayer(l => {
            if (l.spbuData && l.spbuData.id == id) { map.setView(l.getLatLng(), 17); l.openPopup(); }
        });
    }

    // ==========================
    // ===== Jalan Panel ========
    // ==========================
    function renderJalanPanel() {
        rightPanelTitle.textContent = '🛣️ Jalan';
        rightPanelActions.innerHTML = `
            <button class="btn-panel-add" id="btnPanelAddJalan">
                <i class="fas fa-plus"></i> Tambah Jalan
            </button>`;
        document.getElementById('btnPanelAddJalan').addEventListener('click', () => {
            window.activateDraw('polyline');
        });

        const items = [];
        jalanLayer.eachLayer(l => { if (l.jalanData) items.push(l.jalanData); });

        if (!items.length) {
            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data jalan</div>';
            return;
        }

        const statusBadge = {
            'Nasional' : '<span class="data-card-badge badge-red">Nasional</span>',
            'Provinsi' : '<span class="data-card-badge badge-blue">Provinsi</span>',
            'Kabupaten': '<span class="data-card-badge badge-green">Kabupaten</span>',
        };

        rightPanelBody.innerHTML = '';
        items.forEach(d => {
            const km   = (d.panjang / 1000).toFixed(2);
            const card = document.createElement('div');
            card.className = 'data-card';
            card.innerHTML = `
                <div class="data-card-main">
                    <div class="data-card-icon card-icon-jalan">🛣️</div>
                    <div class="data-card-info">
                        <div class="data-card-name">${escHtml(d.nama)}</div>
                        <div class="data-card-sub">📏 ${km} km</div>
                        ${statusBadge[d.status] || ''}
                    </div>
                    <div class="data-card-actions">
                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
                    </div>
                </div>`;
            card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); openEditJalanModal(d.id); });
            card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); deleteJalan(d.id); });
            card.addEventListener('click', () => flyToJalan(d.id));
            rightPanelBody.appendChild(card);
        });
    }

    function flyToJalan(id) {
        jalanLayer.eachLayer(l => {
            if (l.jalanData && l.jalanData.id == id && l.getBounds) {
                map.fitBounds(l.getBounds(), { padding: [40, 40] }); l.openPopup();
            }
        });
    }

    // ==========================
    // ===== Parsil Panel =======
    // ==========================
    function renderParsilPanel() {
        rightPanelTitle.textContent = '🗺️ Parsil Tanah';
        rightPanelActions.innerHTML = `
            <button class="btn-panel-add" id="btnPanelAddParsil">
                <i class="fas fa-plus"></i> Tambah Parsil
            </button>`;
        document.getElementById('btnPanelAddParsil').addEventListener('click', () => {
            window.activateDraw('polygon');
        });

        const items = [];
        parsilLayer.eachLayer(l => { if (l.parsilData) items.push(l.parsilData); });

        if (!items.length) {
            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data parsil</div>';
            return;
        }

        const statusBadge = {
            'SHM': '<span class="data-card-badge badge-green">SHM</span>',
            'HGB': '<span class="data-card-badge badge-blue">HGB</span>',
            'HGU': '<span class="data-card-badge badge-yellow">HGU</span>',
            'HP' : '<span class="data-card-badge badge-orange">HP</span>',
        };

        rightPanelBody.innerHTML = '';
        items.forEach(d => {
            const luas = d.luas >= 10000
                ? (d.luas / 10000).toFixed(2) + ' ha'
                : d.luas.toFixed(0) + ' m²';
            const card = document.createElement('div');
            card.className = 'data-card';
            card.innerHTML = `
                <div class="data-card-main">
                    <div class="data-card-icon card-icon-parsil">🗺️</div>
                    <div class="data-card-info">
                        <div class="data-card-name">${escHtml(d.nama || 'Tanpa Nama')}</div>
                        <div class="data-card-sub">📐 ${luas}</div>
                        ${statusBadge[d.status] || ''}
                    </div>
                    <div class="data-card-actions">
                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
                    </div>
                </div>`;
            card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); openEditParsilModal(d.id); });
            card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); deleteParsil(d.id); });
            card.addEventListener('click', () => flyToParsil(d.id));
            rightPanelBody.appendChild(card);
        });
    }

    function flyToParsil(id) {
        parsilLayer.eachLayer(l => {
            if (l.parsilData && l.parsilData.id == id && l.getBounds) {
                map.fitBounds(l.getBounds(), { padding: [40, 40] }); l.openPopup();
            }
        });
    }

    // ==========================
    // ===== Ibadah Panel =======
    // ==========================
    function renderIbadahPanel() {
        rightPanelTitle.textContent = '🕌 Rumah Ibadah';
        rightPanelActions.innerHTML = `
            <button class="btn-panel-add" id="btnPanelAddIbadah">
                <i class="fas fa-plus"></i> Tambah Ibadah
            </button>`;
        document.getElementById('btnPanelAddIbadah').addEventListener('click', () => {
            window.activateAddMode('rumah_ibadah');
        });

        const items = [];
        rumahIbadahLayer.eachLayer(l => {
            if (l.ibadahData && l instanceof L.Marker) items.push(l.ibadahData);
        });

        if (!items.length) {
            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data rumah ibadah</div>';
            return;
        }

        rightPanelBody.innerHTML = '';
        items.forEach(d => {
            const emoji = IBADAH_EMOJI[d.jenis] || '🕌';
            const card  = document.createElement('div');
            card.className = 'data-card';
            card.innerHTML = `
                <div class="data-card-main">
                    <div class="data-card-icon card-icon-ibadah">${emoji}</div>
                    <div class="data-card-info">
                        <div class="data-card-name">${escHtml(d.nama)}</div>
                        <div class="data-card-sub">${escHtml(d.jenis || 'Masjid')} • 📡 ${d.radius} m</div>
                    </div>
                    <div class="data-card-actions">
                        <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
                        <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
                    </div>
                </div>`;
            card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); openEditIbadahModal(d.id); });
            card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); deleteIbadah(d.id); });
            card.addEventListener('click', () => flyToIbadah(d.id));
            rightPanelBody.appendChild(card);
        });
    }

    function flyToIbadah(id) {
        rumahIbadahLayer.eachLayer(l => {
            if (l.ibadahData && l.ibadahData.id == id && l instanceof L.Marker) {
                map.setView(l.getLatLng(), 17); l.openPopup();
            }
        });
    }

    // ==========================
    // ===== Miskin Panel =======
    // ==========================
    function renderMiskinPanel() {
        rightPanelTitle.textContent = '🏠 Penduduk Miskin';
        rightPanelActions.innerHTML = `
            <button class="btn-panel-add" id="btnPanelTambahMiskin">
                <i class="fas fa-plus"></i> Tambah
            </button>
            <button class="btn-panel-import" id="btnPanelImportMiskin">
                <i class="fas fa-file-import"></i> Impor
            </button>`;

        // Tombol Tambah: buka form via right-click popup di peta
        document.getElementById('btnPanelTambahMiskin').addEventListener('click', () => {
            // Aktifkan mode: klik kiri di peta = tambah miskin
            window.currentAddMode = 'miskin_click';
            document.getElementById('map').style.cursor = 'crosshair';
            if (window.cursorTooltip) {
                window.cursorTooltip.textContent = 'Klik di peta untuk tentukan lokasi penduduk miskin';
            }
        });

        document.getElementById('btnPanelImportMiskin').addEventListener('click', () => {
            alert('Fitur impor CSV akan segera tersedia.');
        });

        const all = [];
        pendudukMiskinLayer.eachLayer(l => { if (l.miskinData) all.push(l.miskinData); });

        if (!all.length) {
            rightPanelBody.innerHTML = '<div class="panel-empty">Belum ada data penduduk miskin</div>';
            return;
        }

        const inRadius = (d) => {
            if (typeof ibadahDataList === 'undefined') return false;
            for (const ib of ibadahDataList) {
                const dist = L.latLng(d.lat, d.lng).distanceTo(L.latLng(ib.lat, ib.lng));
                if (dist <= ib.radius) return true;
            }
            return false;
        };

        rightPanelBody.innerHTML = '';

        const terurusItems = all.filter(d => inRadius(d));
        const tidakItems   = all.filter(d => !inRadius(d));

        if (terurusItems.length) {
            const h1 = document.createElement('div');
            h1.className = 'panel-section-title';
            h1.innerHTML = `✅ Terurus <span style="font-weight:400;text-transform:none;font-size:10px;">(${terurusItems.length})</span>`;
            rightPanelBody.appendChild(h1);
            terurusItems.forEach(d => rightPanelBody.appendChild(buildMiskinCard(d, true)));
        }

        if (tidakItems.length) {
            const h2 = document.createElement('div');
            h2.className = 'panel-section-title';
            h2.innerHTML = `⚠️ Tidak Terurus <span style="font-weight:400;text-transform:none;font-size:10px;">(${tidakItems.length})</span>`;
            rightPanelBody.appendChild(h2);
            tidakItems.forEach(d => rightPanelBody.appendChild(buildMiskinCard(d, false)));
        }
    }

    function buildMiskinCard(d, terurus) {
        const iconCls = terurus ? 'card-icon-miskin-in' : 'card-icon-miskin-out';
        const badge   = d.kategori_bantuan === 'Makan'
            ? '<span class="data-card-badge badge-orange">Bantuan Makan</span>'
            : '<span class="data-card-badge badge-blue">Pemberdayaan</span>';

        const card = document.createElement('div');
        card.className = 'data-card';
        card.dataset.miskinId = d.id;
        card.innerHTML = `
            <div class="data-card-main">
                <div class="data-card-icon ${iconCls}">🏠</div>
                <div class="data-card-info">
                    <div class="data-card-name">${escHtml(d.nama)}</div>
                    <div class="data-card-sub">👨‍👩‍👧 ${d.jumlah_jiwa || '-'} jiwa</div>
                    ${badge}
                </div>
                <div class="data-card-actions">
                    <button class="btn-card-action btn-card-edit"   title="Edit"><i class="fas fa-pen"></i></button>
                    <button class="btn-card-action btn-card-delete" title="Hapus"><i class="fas fa-trash"></i></button>
                </div>
            </div>
            <div class="data-card-expand">
                <div class="expand-row"><span>Kategori Bantuan</span><span>${escHtml(d.kategori_bantuan)}</span></div>
                <div class="expand-row"><span>Jumlah Jiwa</span><span>${d.jumlah_jiwa || '-'}</span></div>
                <div class="expand-row"><span>Status</span><span>${terurus ? 'Terurus ✅' : 'Tidak Terurus ⚠️'}</span></div>
                <button class="btn-log-bantuan" data-id="${d.id}" data-nama="${escHtml(d.nama)}">
                    <i class="fas fa-history"></i> Lihat Log Bantuan
                </button>
            </div>`;

        card.querySelector('.btn-card-edit').addEventListener('click', (e) => { e.stopPropagation(); openEditMiskinModal(d.id); });
        card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); deleteMiskin(d.id); });
        card.querySelector('.btn-log-bantuan').addEventListener('click', (e) => { e.stopPropagation(); openLogBantuan(d.id, d.nama); });

        card.querySelector('.data-card-main').addEventListener('click', () => {
            card.classList.toggle('expanded');
            flyToMiskin(d.id);
        });

        return card;
    }

    function flyToMiskin(id) {
        pendudukMiskinLayer.eachLayer(l => {
            if (l.miskinData && l.miskinData.id == id) {
                map.setView(l.getLatLng(), 17); l.openPopup();
            }
        });
    }

    // ---- Hook: klik peta saat mode miskin_click ----
    // Ditangkap oleh kemiskinan.js via contextmenu — mode ini pakai klik kiri
    map.on('click', function(e) {
        if (window.currentAddMode === 'miskin_click') {
            window.currentAddMode = null;
            document.getElementById('map').style.cursor = '';
            if (window.cursorTooltip) window.cursorTooltip.style.display = 'none';
            // Buka form tambah miskin
            if (typeof window.formAddMiskin === 'function') {
                window.formAddMiskin(e.latlng.lat, e.latlng.lng);
            }
        }
    });

    // ==========================
    // ===== Log Bantuan Modal ==
    // ==========================
    const logModal     = document.getElementById('logBantuanModal');
    const logTitle     = document.getElementById('logBantuanTitle');
    const logList      = document.getElementById('logBantuanList');
    const logSaveBtn   = document.getElementById('logSaveBtn');
    const logIbadahSel = document.getElementById('logIbadahId');
    let   _logMiskinId = null;

    window.openLogBantuan = function (miskinId, nama) {
        _logMiskinId = miskinId;
        logTitle.textContent = `Log Bantuan — ${nama}`;
        logModal.classList.add('show');

        // Isi dropdown ibadah
        logIbadahSel.innerHTML = '<option value="">-- Pilih Rumah Ibadah --</option>';
        if (typeof ibadahDataList !== 'undefined') {
            ibadahDataList.forEach(ib => {
                const opt = document.createElement('option');
                opt.value = ib.id;
                opt.textContent = `${IBADAH_EMOJI[ib.jenis] || '🕌'} ${ib.nama}`;
                logIbadahSel.appendChild(opt);
            });
        }

        // Set tanggal default hari ini
        document.getElementById('logTanggal').valueAsDate = new Date();
        fetchLogBantuan(miskinId);
    };

    window.closeLogBantuanModal = function () {
        logModal.classList.remove('show');
        _logMiskinId = null;
    };

    function fetchLogBantuan(miskinId) {
        logList.innerHTML = '<div class="panel-empty" style="padding:15px;">Memuat...</div>';
        fetch(`api/log_bantuan/read.php?miskin_id=${miskinId}`)
            .then(r => r.json())
            .then(data => {
                if (!data.data || !data.data.length) {
                    logList.innerHTML = '<div class="panel-empty" style="padding:15px;">Belum ada riwayat bantuan</div>';
                    return;
                }
                logList.innerHTML = '';
                data.data.forEach(log => {
                    const tgl  = new Date(log.tanggal).toLocaleDateString('id-ID', { day:'2-digit', month:'short', year:'numeric' });
                    const item = document.createElement('div');
                    item.className = 'log-item';
                    item.innerHTML = `
                        <div class="log-dot"></div>
                        <div class="log-info">
                            <div class="log-type">${escHtml(log.tipe_bantuan)}</div>
                            <div class="log-meta">${IBADAH_EMOJI[log.jenis_ibadah] || '🕌'} ${escHtml(log.nama_ibadah)} • ${tgl}</div>
                            ${log.keterangan ? `<div class="log-keterangan">${escHtml(log.keterangan)}</div>` : ''}
                        </div>`;
                    logList.appendChild(item);
                });
            })
            .catch(() => {
                logList.innerHTML = '<div class="panel-empty" style="padding:15px; color:#ef4444;">Gagal memuat data</div>';
            });
    }

    logSaveBtn.addEventListener('click', function () {
        const ibadah_id    = logIbadahSel.value;
        const tipe_bantuan = document.getElementById('logTipeBantuan').value;
        const tanggal      = document.getElementById('logTanggal').value;
        const keterangan   = document.getElementById('logKeterangan').value;

        if (!ibadah_id) { alert('Pilih rumah ibadah terlebih dahulu!'); return; }
        if (!tanggal)   { alert('Tanggal harus diisi!'); return; }

        fetch('api/log_bantuan/create.php', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ miskin_id: _logMiskinId, ibadah_id, tipe_bantuan, tanggal, keterangan })
        })
        .then(r => r.json())
        .then(data => {
            if (data.status === 'success') {
                document.getElementById('logKeterangan').value = '';
                fetchLogBantuan(_logMiskinId);
            } else {
                alert(data.message || 'Gagal menyimpan');
            }
        });
    });

    // ---- Utility ----
    function escHtml(str) {
        if (!str) return '';
        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    // ---- Expose ----
    window.openRightPanel = openPanel;

})();