// Mobile Menu Toggle
document.addEventListener('DOMContentLoaded', function() {
    const mobileMenuBtn = document.getElementById('mobileMenuBtn');
    const sidebarCloseBtn = document.getElementById('sidebarCloseBtn');
    const sidebar = document.getElementById('sidebar');

    // Guard: if sidebar doesn't exist, do nothing
    if (!sidebar) return;

    // Create overlay if it doesn't exist
    let overlay = document.querySelector('.sidebar-overlay');
    if (!overlay) {
        overlay = document.createElement('div');
        overlay.className = 'sidebar-overlay';
        document.body.appendChild(overlay);
    }

    function openSidebar() {
        console.log('Opening sidebar...');
        sidebar.classList.add('show');
        overlay.classList.add('show');
        document.body.style.overflow = 'hidden';
    }

    function closeSidebar() {
        console.log('Closing sidebar...');
        sidebar.classList.remove('show');
        overlay.classList.remove('show');
        document.body.style.overflow = '';
    }

    // Show/hide mobile button and ensure sidebar state based on screen size
    function updateMobileButtons() {
        const isMobile = window.innerWidth <= 992;
        if (mobileMenuBtn) mobileMenuBtn.style.display = isMobile ? 'flex' : 'none';

        if (!isMobile) {
            sidebar.classList.remove('show');
            overlay.classList.remove('show');
            document.body.style.overflow = '';
        } else {
            if (!sidebar.classList.contains('show')) {
                overlay.classList.remove('show');
                document.body.style.overflow = '';
            }
        }
    }

    updateMobileButtons();
    window.addEventListener('resize', updateMobileButtons);

    // Toggle sidebar on menu button click - Handled by HTML onclick for reliability
    /*
    if (mobileMenuBtn) {
        mobileMenuBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            if (sidebar.classList.contains('show')) {
                closeSidebar();
            } else {
                openSidebar();
            }
        });
    }
    */

    // Close sidebar on close button click
    if (sidebarCloseBtn) {
        sidebarCloseBtn.addEventListener('click', function(e) {
            e.stopPropagation();
            closeSidebar();
        });
    }

    // Close sidebar when clicking overlay
    overlay.addEventListener('click', function() {
        closeSidebar();
    });

    // Close sidebar when clicking a nav link (mobile only) - Exclude dropdown toggles
    const navLinks = sidebar.querySelectorAll('.nav-link:not(.dropdown-toggle)');
    navLinks.forEach(function(link) {
        link.addEventListener('click', function() {
            if (window.innerWidth <= 992) {
                closeSidebar();
            }
        });
    });

    // Close sidebar on escape key
    document.addEventListener('keydown', function(e) {
        if (e.key === 'Escape') {
            closeSidebar();
        }
    });

    // Prevent sidebar from closing when clicking inside it - allow dropdowns to work
    sidebar.addEventListener('click', function(e) {
        // We don't need to stop propagation here as it can interfere with Bootstrap dropdowns
        // Bootstrap handles its own dropdown toggling and closing.
    });

    // ---- Sidebar user dropdown ----
    // Bootstrap 5 with data-bs-boundary="viewport" handles this automatically.
    // We only need to ensure the z-index is high enough.
    const userDropdownToggle = document.getElementById('userDropdown');
    if (userDropdownToggle) {
        // No manual repositioning needed with data-bs-boundary="viewport"
    }
});
