/**
 * Modern Mobile-Responsive Navbar JavaScript
 * Handles theme toggling, language dropdown, and mobile menu interactions
 */

(function() {
  'use strict';

  // Wait for DOM to be fully loaded
  document.addEventListener('DOMContentLoaded', initNavbar);

  function initNavbar() {
    // Get all necessary elements
    const themeBtn = document.getElementById('navThemeBtn');
    const langBtn = document.getElementById('navLangBtn');
    const langWrap = document.querySelector('.navbar-lang-wrap');
    const langDropdown = document.getElementById('navLangDropdown');
    const hamburger = document.getElementById('navHamburger');
    const mobileMenu = document.getElementById('navMobileMenu');
    const mobileClose = document.getElementById('navMobileClose');

    // Initialize theme
    initTheme();

    // Theme toggle functionality
    if (themeBtn) {
      themeBtn.addEventListener('click', toggleTheme);
    }

    // Language dropdown functionality
    if (langBtn && langWrap && langDropdown) {
      langBtn.addEventListener('click', function(e) {
        e.stopPropagation();
        toggleLanguageDropdown();
      });

      // Close dropdown when clicking outside
      document.addEventListener('click', function(e) {
        if (!langWrap.contains(e.target)) {
          closeLanguageDropdown();
        }
      });
    }

    // Mobile menu functionality
    if (hamburger && mobileMenu) {
      hamburger.addEventListener('click', openMobileMenu);
    }

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

    if (mobileMenu) {
      // Close mobile menu when clicking overlay
      mobileMenu.addEventListener('click', function(e) {
        if (e.target === mobileMenu) {
          closeMobileMenu();
        }
      });

      // Close mobile menu when clicking a link
      const mobileLinks = mobileMenu.querySelectorAll('.mobile-nav-link');
      mobileLinks.forEach(function(link) {
        link.addEventListener('click', closeMobileMenu);
      });
    }

    // Close mobile menu on escape key
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        closeMobileMenu();
        closeLanguageDropdown();
      }
    });
  }

  // ==================== THEME FUNCTIONS ====================
  function initTheme() {
    const savedTheme = localStorage.getItem('theme') || 'light';
    document.documentElement.setAttribute('data-theme', savedTheme);
  }

  function toggleTheme() {
    const currentTheme = document.documentElement.getAttribute('data-theme');
    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
    
    document.documentElement.setAttribute('data-theme', newTheme);
    localStorage.setItem('theme', newTheme);

    // Trigger theme change event for other components
    window.dispatchEvent(new CustomEvent('themechange', { detail: { theme: newTheme } }));
  }

  // ==================== LANGUAGE DROPDOWN FUNCTIONS ====================
  function toggleLanguageDropdown() {
    const langWrap = document.querySelector('.navbar-lang-wrap');
    const langBtn = document.getElementById('navLangBtn');
    const langDropdown = document.getElementById('navLangDropdown');
    
    if (!langWrap || !langBtn || !langDropdown) return;

    const isOpen = langWrap.classList.contains('open');
    
    if (isOpen) {
      closeLanguageDropdown();
    } else {
      openLanguageDropdown();
    }
  }

  function openLanguageDropdown() {
    const langWrap = document.querySelector('.navbar-lang-wrap');
    const langBtn = document.getElementById('navLangBtn');
    const langDropdown = document.getElementById('navLangDropdown');
    
    if (!langWrap || !langBtn || !langDropdown) return;

    langWrap.classList.add('open');
    langBtn.setAttribute('aria-expanded', 'true');
    langDropdown.removeAttribute('hidden');
  }

  function closeLanguageDropdown() {
    const langWrap = document.querySelector('.navbar-lang-wrap');
    const langBtn = document.getElementById('navLangBtn');
    const langDropdown = document.getElementById('navLangDropdown');
    
    if (!langWrap || !langBtn || !langDropdown) return;

    langWrap.classList.remove('open');
    langBtn.setAttribute('aria-expanded', 'false');
    langDropdown.setAttribute('hidden', '');
  }

  // ==================== MOBILE MENU FUNCTIONS ====================
  function openMobileMenu() {
    const hamburger = document.getElementById('navHamburger');
    const mobileMenu = document.getElementById('navMobileMenu');
    
    if (!hamburger || !mobileMenu) return;

    hamburger.setAttribute('aria-expanded', 'true');
    mobileMenu.setAttribute('aria-hidden', 'false');
    document.body.style.overflow = 'hidden'; // Prevent scrolling when menu is open
  }

  function closeMobileMenu() {
    const hamburger = document.getElementById('navHamburger');
    const mobileMenu = document.getElementById('navMobileMenu');
    
    if (!hamburger || !mobileMenu) return;

    hamburger.setAttribute('aria-expanded', 'false');
    mobileMenu.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = ''; // Restore scrolling
  }

  // ==================== UTILITY FUNCTIONS ====================
  
  // Debounce function for resize events
  function debounce(func, wait) {
    let timeout;
    return function executedFunction() {
      const context = this;
      const args = arguments;
      const later = function() {
        timeout = null;
        func.apply(context, args);
      };
      clearTimeout(timeout);
      timeout = setTimeout(later, wait);
    };
  }

  // Handle window resize
  const handleResize = debounce(function() {
    // Close mobile menu on desktop
    if (window.innerWidth > 1024) {
      closeMobileMenu();
    }
  }, 250);

  window.addEventListener('resize', handleResize);

  // Make functions globally available if needed
  window.navbarControls = {
    toggleTheme: toggleTheme,
    openMobileMenu: openMobileMenu,
    closeMobileMenu: closeMobileMenu,
    toggleLanguageDropdown: toggleLanguageDropdown
  };

})();
