// layout.js — Inject sidebar + header into every page
// Usage: call initLayout('page-id') at the top of each page script

export function initLayout(activePageId) {
    const pageNames = {
        'dashboard':    { title: "Dashboard",               sub: "Assalamu'alaikum, Admin Masjid" },
        'log':          { title: "Log Transaksi Donasi",    sub: "Log Donasi" },
        'pengeluaran':  { title: "Pengeluaran Dana",        sub: "Pengeluaran" },
        'laporan':      { title: "Laporan Kas",             sub: "Laporan" },
    };

    const navLinks = [
        { id: 'dashboard',   href: 'index.html',       icon: 'fa-border-all',          label: 'Dashboard' },
        { id: 'log',         href: 'log.html',         icon: 'fa-clock-rotate-left',   label: 'Log Donasi' },
        { id: 'pengeluaran', href: 'pengeluaran.html', icon: 'fa-money-bill-transfer',  label: 'Pengeluaran' },
        { id: 'laporan',     href: 'laporan.html',     icon: 'fa-file-lines',          label: 'Laporan' },
    ];

    const navHTML = navLinks.map(n => `
        <li>
            <a href="${n.href}" class="nav-item ${n.id === activePageId ? 'active' : ''}">
                <i class="fa-solid ${n.icon}"></i> ${n.label}
            </a>
        </li>
    `).join('');

    const info = pageNames[activePageId];

    document.body.insertAdjacentHTML('afterbegin', `
        <div class="sidebar">
            <div class="sidebar-logo">
                <i class="fa-solid fa-mosque fa-2x"></i>
                <h2>Smart Donation<br>Box</h2>
            </div>
            <nav class="sidebar-nav">
                <ul>${navHTML}</ul>
            </nav>
        </div>

        <main class="main-content">
            <header class="header">
                <div class="header-title">
                    <h1>${info.title}</h1>
                    <p>${info.sub}</p>
                </div>
                <div class="header-right">
                    <button id="theme-toggle" class="btn-theme">
                        <i class="fas fa-moon"></i>
                    </button>
                    <!-- Profile button with dropdown -->
                    <div class="profile-wrapper" id="profile-wrapper">
                        <div class="profile" id="profile-btn" style="cursor:pointer;" title="Klik untuk opsi akun">
                            <img src="https://ui-avatars.com/api/?name=Admin+Masjid&background=E2E8F0&color=10B981" alt="Profile">
                            <span>Admin Masjid</span>
                            <i class="fa-solid fa-chevron-down" id="chevron-icon" style="font-size:11px; color:var(--text-muted); transition:transform 0.3s;"></i>
                        </div>

                        <!-- Dropdown Menu -->
                        <div class="profile-dropdown" id="profile-dropdown">
                            <div class="dropdown-header">
                                <img src="https://ui-avatars.com/api/?name=Admin+Masjid&background=D1FAE5&color=10B981&size=48" alt="Profile">
                                <div>
                                    <div style="font-weight:600; font-size:14px;">Admin Masjid</div>
                                    <div style="font-size:12px; color:var(--text-muted);">Administrator</div>
                                </div>
                            </div>
                            <div class="dropdown-divider"></div>
                            <button class="dropdown-item dropdown-logout" id="btn-logout">
                                <i class="fa-solid fa-right-from-bracket"></i>
                                Keluar
                            </button>
                        </div>
                    </div>
                </div>
            </header>
            <div class="content-area" id="content-area"></div>
        </main>

        <!-- Logout Confirmation Modal -->
        <div class="modal-overlay" id="modal-overlay">
            <div class="modal-box" id="modal-box">
                <div class="modal-icon">
                    <i class="fa-solid fa-right-from-bracket"></i>
                </div>
                <h3 class="modal-title">Konfirmasi Keluar</h3>
                <p class="modal-desc">Apakah Anda yakin ingin keluar dari sistem monitoring?</p>
                <div class="modal-actions">
                    <button class="modal-btn-cancel" id="modal-cancel">
                        <i class="fa-solid fa-xmark"></i> Tidak, Tetap Di Sini
                    </button>
                    <button class="modal-btn-logout" id="modal-confirm">
                        <i class="fa-solid fa-right-from-bracket"></i> Ya, Keluar
                    </button>
                </div>
            </div>
        </div>
    `);

    /* ── Inject dropdown + modal styles ── */
    const style = document.createElement('style');
    style.textContent = `
        /* Profile Wrapper */
        .profile-wrapper {
            position: relative;
        }

        .profile {
            display: flex;
            align-items: center;
            gap: 10px;
            background: var(--card-bg);
            padding: 6px 12px;
            border-radius: 20px;
            border: 1px solid var(--border-color);
            transition: background-color 0.3s ease, border-color 0.2s;
            user-select: none;
        }

        .profile:hover {
            border-color: var(--primary-green);
            background: var(--primary-green-light);
        }

        .profile img { width: 32px; height: 32px; border-radius: 50%; }
        .profile span { font-size: 14px; font-weight: 500; }

        /* Dropdown */
        .profile-dropdown {
            position: absolute;
            top: calc(100% + 10px);
            right: 0;
            background: var(--card-bg);
            border: 1px solid var(--border-color);
            border-radius: 14px;
            box-shadow: 0 8px 32px rgba(0,0,0,0.12);
            min-width: 220px;
            z-index: 999;
            overflow: hidden;
            opacity: 0;
            transform: translateY(-8px) scale(0.97);
            pointer-events: none;
            transition: opacity 0.22s ease, transform 0.22s ease;
        }

        .profile-dropdown.open {
            opacity: 1;
            transform: translateY(0) scale(1);
            pointer-events: all;
        }

        .dropdown-header {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 16px;
        }

        .dropdown-header img {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 2px solid var(--primary-green-light);
        }

        .dropdown-divider {
            height: 1px;
            background: var(--border-color);
            margin: 0 12px;
        }

        .dropdown-item {
            display: flex;
            align-items: center;
            gap: 10px;
            width: 100%;
            padding: 13px 16px;
            background: none;
            border: none;
            font-family: 'Poppins', sans-serif;
            font-size: 14px;
            font-weight: 500;
            color: var(--text-main);
            cursor: pointer;
            transition: background 0.15s;
            text-align: left;
        }

        .dropdown-item:hover {
            background: var(--bg-color);
        }

        .dropdown-logout {
            color: var(--danger-red) !important;
            margin: 6px;
            border-radius: 8px;
        }

        .dropdown-logout:hover {
            background: rgba(239,68,68,0.08) !important;
        }

        /* ── Modal Overlay ── */
        .modal-overlay {
            position: fixed;
            inset: 0;
            background: rgba(0,0,0,0.45);
            backdrop-filter: blur(4px);
            z-index: 9999;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 0;
            pointer-events: none;
            transition: opacity 0.25s ease;
        }

        .modal-overlay.show {
            opacity: 1;
            pointer-events: all;
        }

        .modal-box {
            background: var(--card-bg);
            border-radius: 20px;
            padding: 36px 32px 28px;
            max-width: 380px;
            width: 90%;
            text-align: center;
            box-shadow: 0 20px 60px rgba(0,0,0,0.2);
            transform: scale(0.88) translateY(20px);
            transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), opacity 0.25s ease;
            opacity: 0;
        }

        .modal-overlay.show .modal-box {
            transform: scale(1) translateY(0);
            opacity: 1;
        }

        .modal-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            background: rgba(239,68,68,0.1);
            color: var(--danger-red);
            font-size: 24px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .modal-title {
            font-size: 18px;
            font-weight: 700;
            margin-bottom: 10px;
            color: var(--text-main);
        }

        .modal-desc {
            font-size: 14px;
            color: var(--text-muted);
            line-height: 1.6;
            margin-bottom: 28px;
        }

        .modal-actions {
            display: flex;
            gap: 12px;
            justify-content: center;
        }

        .modal-btn-cancel {
            flex: 1;
            padding: 11px 16px;
            border: 1px solid var(--border-color);
            border-radius: 10px;
            background: var(--bg-color);
            color: var(--text-main);
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.2s;
        }

        .modal-btn-cancel:hover {
            background: var(--border-color);
        }

        .modal-btn-logout {
            flex: 1;
            padding: 11px 16px;
            border: none;
            border-radius: 10px;
            background: var(--danger-red);
            color: #fff;
            font-family: 'Poppins', sans-serif;
            font-size: 13px;
            font-weight: 600;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            transition: background 0.2s;
        }

        .modal-btn-logout:hover {
            background: #DC2626;
        }
    `;
    document.head.appendChild(style);

    /* ── Dark mode logic ── */
    const themeToggle = document.getElementById('theme-toggle');
    const themeIcon   = themeToggle.querySelector('i');
    if (localStorage.getItem('theme') === 'dark') {
        document.body.classList.add('dark-mode');
        themeIcon.classList.replace('fa-moon', 'fa-sun');
    }
    themeToggle.addEventListener('click', () => {
        document.body.classList.toggle('dark-mode');
        const isDark = document.body.classList.contains('dark-mode');
        themeIcon.classList.replace(isDark ? 'fa-moon' : 'fa-sun', isDark ? 'fa-sun' : 'fa-moon');
        localStorage.setItem('theme', isDark ? 'dark' : 'light');
    });

    /* ── Profile Dropdown toggle ── */
    const profileBtn  = document.getElementById('profile-btn');
    const dropdown    = document.getElementById('profile-dropdown');
    const chevron     = document.getElementById('chevron-icon');

    profileBtn.addEventListener('click', (e) => {
        e.stopPropagation();
        const isOpen = dropdown.classList.toggle('open');
        chevron.style.transform = isOpen ? 'rotate(180deg)' : 'rotate(0deg)';
    });

    // Close dropdown when clicking outside
    document.addEventListener('click', () => {
        dropdown.classList.remove('open');
        chevron.style.transform = 'rotate(0deg)';
    });

    /* ── Logout button in dropdown → show modal ── */
    const btnLogout   = document.getElementById('btn-logout');
    const overlay     = document.getElementById('modal-overlay');
    const modalCancel = document.getElementById('modal-cancel');
    const modalConfirm= document.getElementById('modal-confirm');

    function showModal() {
        dropdown.classList.remove('open');
        chevron.style.transform = 'rotate(0deg)';
        overlay.classList.add('show');
    }

    function hideModal() {
        overlay.classList.remove('show');
    }

    function doLogout() {
        localStorage.removeItem('isLoggedIn');
        window.location.href = 'login.html';
    }

    btnLogout.addEventListener('click', showModal);
    modalCancel.addEventListener('click', hideModal);
    modalConfirm.addEventListener('click', doLogout);

    // Close modal on overlay background click
    overlay.addEventListener('click', (e) => {
        if (e.target === overlay) hideModal();
    });

    // Expose global logout for backward compat (index.html calls window.logout)
    window.logout = showModal;
}