// ===== 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) {
        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
        activePanel = panel;
        rightPanel.classList.add('open');
        document.body.classList.add('right-panel-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() {
        if (typeof window.deactivateAddMode === 'function') window.deactivateAddMode();
        activePanel = null;
        rightPanel.classList.remove('open');
        document.body.classList.remove('right-panel-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 'ibadah': renderIbadahPanel(); break;
            case 'miskin': renderMiskinPanel(); break;
        }
    }



    // ==========================
    // ===== Ibadah Panel =======
    // ==========================
    function renderIbadahPanel() {
        rightPanelTitle.textContent = '🕌 Rumah Ibadah';
        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
        if (isAdmin) {
            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');
            });
        } else {
            rightPanelActions.innerHTML = '';
        }

        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';
            let actionButtons = '';
            if (isAdmin) {
                actionButtons = `
                    <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>
                `;
            }
            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>
                    ${actionButtons}
                </div>`;
            if (isAdmin) {
                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';
        const canManage = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola'));
        if (canManage) {
            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>`;

            document.getElementById('btnPanelTambahMiskin').addEventListener('click', () => {
                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', () => {
                if (typeof window.openImportMiskinModal === 'function') {
                    window.openImportMiskinModal();
                } else {
                    alert('Fitur impor belum siap.');
                }
            });
        } else {
            rightPanelActions.innerHTML = '';
        }

        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 canManage = !!(window.currentUser && (window.currentUser.role === 'admin' || window.currentUser.role === 'pengelola'));
        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;
        
        let actionButtons = '';
        if (canManage) {
            actionButtons = `
                <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>
            `;
        }
        
        let fotoHtml = '';
        if (d.foto_rumah || d.foto_kk) {
            fotoHtml += `<div class="expand-row-photos" style="display:flex; gap:10px; margin-top:8px; justify-content: space-around;">`;
            if (d.foto_rumah) {
                fotoHtml += `
                    <div style="text-align:center;">
                        <span style="font-size:10px; display:block; font-weight:500; color:#555;">Foto Rumah</span>
                        <a href="uploads/${d.foto_rumah}" target="_blank">
                            <img src="uploads/${d.foto_rumah}" style="width:80px; height:60px; object-fit:cover; border-radius:4px; border:1px solid #ddd; margin-top:3px;" />
                        </a>
                    </div>`;
            }
            if (d.foto_kk) {
                fotoHtml += `
                    <div style="text-align:center;">
                        <span style="font-size:10px; display:block; font-weight:500; color:#555;">Foto KK</span>
                        <a href="uploads/${d.foto_kk}" target="_blank">
                            <img src="uploads/${d.foto_kk}" style="width:80px; height:60px; object-fit:cover; border-radius:4px; border:1px solid #ddd; margin-top:3px;" />
                        </a>
                    </div>`;
            }
            fotoHtml += `</div>`;
        }
        
        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>
                ${actionButtons}
            </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>
                ${fotoHtml}
                <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>`;

        if (canManage) {
            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');

        const isAuth = !!window.currentUser;
        const formContainer = document.querySelector('#logBantuanModal .modal-body > div:last-child');
        const modalFooter = document.querySelector('#logBantuanModal .modal-footer');
        
        if (isAuth) {
            if (formContainer) formContainer.style.display = 'block';
            if (modalFooter) modalFooter.style.display = 'flex';
        } else {
            if (formContainer) formContainer.style.display = 'none';
            if (modalFooter) modalFooter.style.display = 'none';
        }

        // 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);
            });
        }

        if (window.currentUser && window.currentUser.role === 'pengelola') {
            logIbadahSel.value = window.currentUser.ibadah_id;
            logIbadahSel.disabled = true;
        } else {
            logIbadahSel.disabled = false;
        }

        // 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;

})();