// Mobile menu toggle
document.addEventListener('DOMContentLoaded', function() {
  console.log("DOM loaded - initializing dark mode");
  
  const menuButton = document.querySelector('[aria-controls="mobile-menu"]');
  const mobileMenu = document.getElementById('mobile-menu');
  const menuIcons = menuButton.querySelectorAll('svg');
  
  if (menuButton && mobileMenu) {
    menuButton.addEventListener('click', function() {
      const expanded = menuButton.getAttribute('aria-expanded') === 'true';
      
      // Toggle aria-expanded
      menuButton.setAttribute('aria-expanded', !expanded);
      
      // Toggle menu visibility
      mobileMenu.classList.toggle('hidden');
      
      // Toggle icons
      menuIcons.forEach(icon => {
        icon.classList.toggle('hidden');
      });
    });
  }

  // Theme toggle functionality
  const themeToggleBtn = document.getElementById('theme-toggle');
  const themeToggleDarkIcon = document.getElementById('theme-toggle-dark-icon');
  const themeToggleLightIcon = document.getElementById('theme-toggle-light-icon');
  const mobileThemeToggleBtn = document.getElementById('mobile-theme-toggle');

  // Check if dark mode is already enabled
  const isDarkMode = localStorage.getItem('color-theme') === 'dark' || 
    (!localStorage.getItem('color-theme') && window.matchMedia('(prefers-color-scheme: dark)').matches);
  
  console.log("Initial dark mode state:", isDarkMode);

  // Set initial theme
  if (isDarkMode) {
    document.documentElement.classList.add('dark');
    if (themeToggleLightIcon && themeToggleDarkIcon) {
      themeToggleLightIcon.classList.remove('hidden');
      themeToggleDarkIcon.classList.add('hidden');
    }
  } else {
    document.documentElement.classList.remove('dark');
    if (themeToggleLightIcon && themeToggleDarkIcon) {
      themeToggleLightIcon.classList.add('hidden');
      themeToggleDarkIcon.classList.remove('hidden');
    }
  }

  // Toggle theme function
  function toggleTheme() {
    console.log("Toggle theme clicked");
    
    // Add transition class
    document.documentElement.classList.add('transition');
    
    // Toggle theme
    const isDark = document.documentElement.classList.contains('dark');
    console.log("Current dark mode:", isDark);
    
    if (isDark) {
      document.documentElement.classList.remove('dark');
      localStorage.setItem('color-theme', 'light');
      if (themeToggleLightIcon && themeToggleDarkIcon) {
        themeToggleLightIcon.classList.add('hidden');
        themeToggleDarkIcon.classList.remove('hidden');
      }
      console.log("Switched to light mode");
    } else {
      document.documentElement.classList.add('dark');
      localStorage.setItem('color-theme', 'dark');
      if (themeToggleLightIcon && themeToggleDarkIcon) {
        themeToggleLightIcon.classList.remove('hidden');
        themeToggleDarkIcon.classList.add('hidden');
      }
      console.log("Switched to dark mode");
    }
    
    // Remove transition class after transition completes
    setTimeout(() => {
      document.documentElement.classList.remove('transition');
    }, 300);
  }

  // Add event listeners to toggle buttons
  if (themeToggleBtn) {
    console.log("Adding event listener to theme toggle button");
    themeToggleBtn.addEventListener('click', toggleTheme);
  }
  
  if (mobileThemeToggleBtn) {
    console.log("Adding event listener to mobile theme toggle button");
    mobileThemeToggleBtn.addEventListener('click', toggleTheme);
  }
});