import './bootstrap';

document.addEventListener('DOMContentLoaded', function () {
    // ─── 1. Public Mobile Menu & Backdrop ─────────────────
    const menuBtn = document.getElementById('mobile-menu-btn');
    const mobileMenu = document.getElementById('mobile-menu');
    const mobileBackdrop = document.getElementById('mobile-menu-backdrop');
    const hamburgerIcon = document.getElementById('hamburger-icon');

    const hamburgerSvg = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"/>';
    const closeSvg = '<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>';

    function openMobileMenu() {
        if (!mobileMenu) return;
        mobileMenu.classList.remove('hidden');
        if (mobileBackdrop) mobileBackdrop.classList.remove('hidden');
        if (hamburgerIcon) hamburgerIcon.innerHTML = closeSvg;
        document.body.classList.add('overflow-hidden');
    }

    function closeMobileMenu() {
        if (!mobileMenu) return;
        mobileMenu.classList.add('hidden');
        if (mobileBackdrop) mobileBackdrop.classList.add('hidden');
        if (hamburgerIcon) hamburgerIcon.innerHTML = hamburgerSvg;
        document.body.classList.remove('overflow-hidden');
    }

    if (menuBtn && mobileMenu) {
        menuBtn.addEventListener('click', function (e) {
            e.stopPropagation();
            if (mobileMenu.classList.contains('hidden')) {
                openMobileMenu();
            } else {
                closeMobileMenu();
            }
        });
    }

    if (mobileBackdrop) {
        mobileBackdrop.addEventListener('click', closeMobileMenu);
    }

    // Close mobile menu when clicking direct link
    if (mobileMenu) {
        mobileMenu.querySelectorAll('a').forEach(link => {
            link.addEventListener('click', function () {
                closeMobileMenu();
            });
        });
    }

    // Dropdown submenus on mobile (accordion)
    const accordionBtns = document.querySelectorAll('[data-accordion]');
    accordionBtns.forEach(btn => {
        btn.addEventListener('click', function (e) {
            e.stopPropagation();
            const targetId = this.dataset.accordion;
            const target = document.getElementById(targetId);
            if (target) {
                const isHidden = target.classList.contains('hidden');
                target.classList.toggle('hidden');
                const icon = this.querySelector('[data-chevron]');
                if (icon) {
                    if (isHidden) {
                        icon.style.transform = 'rotate(180deg)';
                    } else {
                        icon.style.transform = 'rotate(0deg)';
                    }
                }
            }
        });
    });

    // ─── 2. Admin Sidebar Toggle & Backdrop ───────────────
    const adminSidebarBtn = document.getElementById('admin-sidebar-toggle');
    const adminSidebar = document.getElementById('admin-sidebar');
    const adminBackdrop = document.getElementById('admin-sidebar-backdrop');

    function openAdminSidebar() {
        if (!adminSidebar) return;
        adminSidebar.classList.remove('-translate-x-full');
        if (adminBackdrop) adminBackdrop.classList.remove('hidden');
    }

    function closeAdminSidebar() {
        if (!adminSidebar) return;
        adminSidebar.classList.add('-translate-x-full');
        if (adminBackdrop) adminBackdrop.classList.add('hidden');
    }

    if (adminSidebarBtn && adminSidebar) {
        adminSidebarBtn.addEventListener('click', function () {
            if (adminSidebar.classList.contains('-translate-x-full')) {
                openAdminSidebar();
            } else {
                closeAdminSidebar();
            }
        });
    }

    if (adminBackdrop) {
        adminBackdrop.addEventListener('click', closeAdminSidebar);
    }

    // ─── 3. Auto-close menus on resize ────────────────────
    window.addEventListener('resize', function () {
        if (window.innerWidth >= 768) {
            closeMobileMenu();
        }
        if (window.innerWidth >= 1024) {
            closeAdminSidebar();
        }
    });

    // ─── 4. Active nav link highlight ─────────────────────
    const currentPath = window.location.pathname;
    document.querySelectorAll('[data-nav-path]').forEach(link => {
        if (currentPath === link.dataset.navPath || currentPath.startsWith(link.dataset.navPath + '/')) {
            link.classList.add('active');
        }
    });

    // ─── 5. Confirm delete forms ──────────────────────────
    document.querySelectorAll('[data-confirm-delete]').forEach(form => {
        form.addEventListener('submit', function (e) {
            if (!confirm('Apakah Anda yakin ingin menghapus data ini? Tindakan ini tidak dapat dibatalkan.')) {
                e.preventDefault();
            }
        });
    });
});

