/**
 * Custom Mobile Navbar Toggle - GoVerifyr
 * Handles the mobile menu functionality with new class names
 */

(function() {
    'use strict';

    // Initialize immediately
    function init() {
        setupNavbarToggle();
    }

    function setupNavbarToggle() {
        // Find the toggle button with new class name
        const toggleButton = document.querySelector('.mobile-menu-trigger');
        
        // Find the collapsible navbar with new ID
        const navbarMenu = document.querySelector('#main-navigation');

        if (!toggleButton || !navbarMenu) {
            console.log('Navigation elements not found');
            return;
        }

        console.log('Navbar toggle initialized'); // Debug log

        // Add click event to toggle button
        toggleButton.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            console.log('Toggle button clicked'); // Debug log
            
            // Toggle the 'menu-active' class which shows/hides the menu
            if (navbarMenu.classList.contains('menu-active')) {
                console.log('Closing menu');
                closeNavbar(navbarMenu, toggleButton);
            } else {
                console.log('Opening menu');
                openNavbar(navbarMenu, toggleButton);
            }
        });

        // Close menu when clicking outside
        document.addEventListener('click', function(e) {
            const isClickInsideNav = navbarMenu.contains(e.target);
            const isClickOnToggle = toggleButton.contains(e.target);
            
            if (!isClickInsideNav && !isClickOnToggle && navbarMenu.classList.contains('menu-active')) {
                closeNavbar(navbarMenu, toggleButton);
            }
        });

        // Close menu when clicking on a menu item
        const menuLinks = navbarMenu.querySelectorAll('.nav-link, .auth-btn');
        menuLinks.forEach(function(link) {
            link.addEventListener('click', function() {
                // Small delay to allow navigation
                setTimeout(function() {
                    closeNavbar(navbarMenu, toggleButton);
                }, 150);
            });
        });

        // Handle window resize - close menu when switching back to desktop
        let resizeTimer;
        window.addEventListener('resize', function() {
            clearTimeout(resizeTimer);
            resizeTimer = setTimeout(function() {
                if (window.innerWidth > 767) {
                    closeNavbar(navbarMenu, toggleButton);
                }
            }, 250);
        });

        // Handle escape key to close menu
        document.addEventListener('keydown', function(e) {
            if (e.key === 'Escape' && navbarMenu.classList.contains('menu-active')) {
                closeNavbar(navbarMenu, toggleButton);
                toggleButton.focus();
            }
        });
    }

    function openNavbar(navbarMenu, toggleButton) {
        // Add the 'menu-active' class to show the menu
        navbarMenu.classList.add('menu-active');
        
        // Update toggle button aria attributes for accessibility
        toggleButton.setAttribute('aria-expanded', 'true');
        
        console.log('Menu opened, class added'); // Debug log
    }

    function closeNavbar(navbarMenu, toggleButton) {
        if (!navbarMenu.classList.contains('menu-active')) {
            return; // Already closed
        }
        
        // Remove the 'menu-active' class
        navbarMenu.classList.remove('menu-active');
        
        // Update aria attributes
        toggleButton.setAttribute('aria-expanded', 'false');
        
        console.log('Menu closed, class removed'); // Debug log
    }

    // Wait for DOM to be ready
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', init);
    } else {
        // DOM already loaded
        init();
    }

})();