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

(function () {
    // ---- 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 ----
    if (sidebarToggleBtn) {
        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);
            }
        });
    });

    if (rightPanelClose) {
        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 'spbu': renderSpbuPanel(); break;
            case 'jalan': renderJalanPanel(); break;
            case 'parsil': renderParsilPanel(); break;
        }
    }

    // ==========================
    // ===== SPBU Panel =======
    // ==========================
    function renderSpbuPanel() {
        rightPanelTitle.textContent = '⛽ Daftar SPBU';
        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
        if (isAdmin) {
            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 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" style="background:#fef3c7; color:#d97706; padding:8px; border-radius:8px; font-size:18px;">⛽</div>
                    <div class="data-card-info">
                        <div class="data-card-name">${escHtml(d.nama)}</div>
                        <div class="data-card-sub">📞 ${escHtml(d.no_wa || '-')} • 🕐 ${d.is_24_jam ? '24 Jam' : 'Tidak 24 Jam'}</div>
                    </div>
                    ${actionButtons}
                </div>`;
            if (isAdmin) {
                card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); window.openEditSpbuModal(d.id); });
                card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); window.deleteSpbu(d.id); });
            }
            card.addEventListener('click', () => {
                spbuLayer.eachLayer(l => {
                    if (l.spbuData && l.spbuData.id == d.id) {
                        map.setView(l.getLatLng(), 17); l.openPopup();
                    }
                });
            });
            rightPanelBody.appendChild(card);
        });
    }

    // ==========================
    // ===== Jalan Panel =======
    // ==========================
    function renderJalanPanel() {
        rightPanelTitle.textContent = '🛣️ Daftar Jalan';
        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
        
        rightPanelActions.innerHTML = '';

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

        rightPanelBody.innerHTML = '';
        items.forEach(d => {
            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" style="background:#e0e7ff; color:#4f46e5; padding:8px; border-radius:8px; font-size:18px;">🛣️</div>
                    <div class="data-card-info">
                        <div class="data-card-name">${escHtml(d.nama)}</div>
                        <div class="data-card-sub">📏 ${d.panjang.toFixed(2)} m • 🏷️ ${escHtml(d.status)}</div>
                    </div>
                    ${actionButtons}
                </div>`;
            if (isAdmin) {
                card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); window.openEditJalanModal(d.id); });
                card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); window.deleteJalan(d.id); });
            }
            card.addEventListener('click', () => {
                jalanLayer.eachLayer(l => {
                    if (l.jalanData && l.jalanData.id == d.id) {
                        map.fitBounds(l.getBounds()); l.openPopup();
                    }
                });
            });
            rightPanelBody.appendChild(card);
        });
    }

    // ==========================
    // ===== Parsil Panel =======
    // ==========================
    function renderParsilPanel() {
        rightPanelTitle.textContent = '🗺️ Daftar Parsil Tanah';
        const isAdmin = !!(window.currentUser && window.currentUser.role === 'admin');
        
        rightPanelActions.innerHTML = '';

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

        rightPanelBody.innerHTML = '';
        items.forEach(d => {
            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" style="background:#d1fae5; color:#059669; padding:8px; border-radius:8px; font-size:18px;">🗺️</div>
                    <div class="data-card-info">
                        <div class="data-card-name">${escHtml(d.nama || 'Tanpa Nama')}</div>
                        <div class="data-card-sub">📐 ${d.luas.toFixed(2)} m² • 🏷️ ${escHtml(d.status)}</div>
                    </div>
                    ${actionButtons}
                </div>`;
            if (isAdmin) {
                card.querySelector('.btn-card-edit').addEventListener('click',   (e) => { e.stopPropagation(); window.openEditParsilModal(d.id); });
                card.querySelector('.btn-card-delete').addEventListener('click', (e) => { e.stopPropagation(); window.deleteParsil(d.id); });
            }
            card.addEventListener('click', () => {
                parsilLayer.eachLayer(l => {
                    if (l.parsilData && l.parsilData.id == d.id) {
                        map.fitBounds(l.getBounds()); l.openPopup();
                    }
                });
            });
            rightPanelBody.appendChild(card);
        });
    }

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

})();