/**
 * Mobile Navbar Toggle Fix
 * Makes the Bootstrap navbar collapse work properly on mobile devices
 * WITHOUT altering existing styles
 */

(function() {
    'use strict';

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

    function init() {
        setupNavbarToggle();
    }

    function setupNavbarToggle() {
        // Find the toggle button
        const toggleButton = document.querySelector('.navbar-toggle');
        
        // Find the collapsible navbar
        const navbarCollapse = document.querySelector('#navbar');

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

        // Add click event to toggle button
        toggleButton.addEventListener('click', function(e) {
            e.preventDefault();
            e.stopPropagation();
            
            // Toggle the 'in' class which shows/hides the menu
            if (navbarCollapse.classList.contains('in')) {
                closeNavbar(navbarCollapse, toggleButton);
            } else {
                openNavbar(navbarCollapse, toggleButton);
            }
        });

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

        // Close menu when clicking on a menu item (optional, good for single page apps)
        const menuLinks = navbarCollapse.querySelectorAll('a');
        menuLinks.forEach(function(link) {
            link.addEventListener('click', function() {
                // Small delay to allow navigation
                setTimeout(function() {
                    closeNavbar(navbarCollapse, 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 > 768) {
                    closeNavbar(navbarCollapse, toggleButton);
                }
            }, 250);
        });
    }

    function openNavbar(navbarCollapse, toggleButton) {
        // Add the 'in' class to show the menu
        navbarCollapse.classList.add('in');
        
        // Update toggle button aria attributes for accessibility
        toggleButton.setAttribute('aria-expanded', 'true');
        navbarCollapse.setAttribute('aria-expanded', 'true');
        
        // Add collapsing class for smooth transition
        navbarCollapse.classList.add('collapsing');
        
        // Set max-height for smooth expansion
        navbarCollapse.style.height = '0px';
        
        // Trigger reflow
        navbarCollapse.offsetHeight;
        
        // Calculate and set the height
        const height = navbarCollapse.scrollHeight;
        navbarCollapse.style.height = height + 'px';
        
        // Remove collapsing class after transition
        setTimeout(function() {
            navbarCollapse.classList.remove('collapsing');
            navbarCollapse.style.height = '';
        }, 350);
    }

    function closeNavbar(navbarCollapse, toggleButton) {
        if (!navbarCollapse.classList.contains('in')) {
            return; // Already closed
        }
        
        // Add collapsing class
        navbarCollapse.classList.add('collapsing');
        
        // Set current height
        navbarCollapse.style.height = navbarCollapse.scrollHeight + 'px';
        
        // Trigger reflow
        navbarCollapse.offsetHeight;
        
        // Set height to 0
        navbarCollapse.style.height = '0px';
        
        // Remove 'in' class and update aria attributes
        setTimeout(function() {
            navbarCollapse.classList.remove('in');
            navbarCollapse.classList.remove('collapsing');
            navbarCollapse.style.height = '';
            
            toggleButton.setAttribute('aria-expanded', 'false');
            navbarCollapse.setAttribute('aria-expanded', 'false');
        }, 350);
    }

    // Add minimal required styles for smooth transitions
    function addTransitionStyles() {
        // Check if styles already exist
        if (document.getElementById('navbar-toggle-styles')) return;

        const style = document.createElement('style');
        style.id = 'navbar-toggle-styles';
        style.textContent = `
            /* Navbar collapse transitions */
            .navbar-collapse {
                overflow: hidden;
                transition: height 0.35s ease;
            }

            .navbar-collapse.collapsing {
                position: relative;
                height: 0;
                overflow: hidden;
                transition: height 0.35s ease;
            }

            .navbar-collapse.in {
                overflow-y: auto;
            }

            /* Ensure mobile menu is hidden by default */
            @media (max-width: 767px) {
                .navbar-collapse.collapse {
                    display: block !important;
                    height: 0 !important;
                    padding-bottom: 0;
                    overflow: hidden !important;
                }

                .navbar-collapse.collapse.in {
                    height: auto !important;
                    padding-bottom: 0;
                    overflow-y: visible !important;
                }

                /* Make sure navbar toggle is visible */
                .navbar-toggle {
                    display: block;
                    cursor: pointer;
                }
            }

            /* Desktop view - show menu normally */
            @media (min-width: 768px) {
                .navbar-collapse.collapse {
                    display: block !important;
                    height: auto !important;
                    padding-bottom: 0;
                    overflow: visible !important;
                }

                .navbar-collapse {
                    border-top: 0;
                }
            }
        `;
        document.head.appendChild(style);
    }

    // Add the transition styles
    addTransitionStyles();

})();