// Services dropdown functionality
let servicesDropdownOpen = false;
let currentActiveDropdown = null;

function toggleServicesDropdown() {
  const dropdown = document.getElementById('services-dropdown');
  const servicesLink = document.getElementById('services-link');
  
  if (!dropdown || !servicesLink) return;
  
  servicesDropdownOpen = !servicesDropdownOpen;
  
  if (servicesDropdownOpen) {
    dropdown.classList.remove('hidden');
    dropdown.classList.add('block');
    servicesLink.setAttribute('aria-expanded', 'true');
  } else {
    dropdown.classList.remove('block');
    dropdown.classList.add('hidden');
    servicesLink.setAttribute('aria-expanded', 'false');
    // Close any open submenus
    closeAllSubmenus();
  }
}

function closeServicesDropdown() {
  const dropdown = document.getElementById('services-dropdown');
  const servicesLink = document.getElementById('services-link');
  
  if (!dropdown || !servicesLink) return;
  
  servicesDropdownOpen = false;
  dropdown.classList.remove('block');
  dropdown.classList.add('hidden');
  servicesLink.setAttribute('aria-expanded', 'false');
  closeAllSubmenus();
}

function toggleSubMenu(submenuId) {
  const submenu = document.getElementById(submenuId);
  if (!submenu) return;
  
  // Close other submenus if one is open
  if (currentActiveDropdown && currentActiveDropdown !== submenuId) {
    const activeSubmenu = document.getElementById(currentActiveDropdown);
    if (activeSubmenu) {
      activeSubmenu.classList.remove('block');
      activeSubmenu.classList.add('hidden');
    }
  }
  
  // Toggle current submenu
  const isOpen = submenu.classList.contains('block');
  if (isOpen) {
    submenu.classList.remove('block');
    submenu.classList.add('hidden');
    currentActiveDropdown = null;
  } else {
    submenu.classList.remove('hidden');
    submenu.classList.add('block');
    currentActiveDropdown = submenuId;
  }
}

function closeAllSubmenus() {
  const submenus = ['cosmetic-submenu', 'general-submenu', 'orthodontics-submenu', 'restorative-submenu'];
  submenus.forEach(id => {
    const submenu = document.getElementById(id);
    if (submenu) {
      submenu.classList.remove('block');
      submenu.classList.add('hidden');
    }
  });
  currentActiveDropdown = null;
}

function handleClickOutside(event) {
  const servicesDropdown = document.getElementById('services-dropdown');
  const servicesLink = document.getElementById('services-link');
  
  if (servicesDropdown && servicesLink && 
      !servicesDropdown.contains(event.target) && 
      !servicesLink.contains(event.target)) {
    closeServicesDropdown();
  }
}

// Mobile menu collapsible functionality
function toggleMobileSubmenu(submenuId, trigger) {
  const submenu = document.getElementById(submenuId);
  const chevron = trigger.querySelector('i.fa-chevron-down');
  
  if (!submenu || !chevron) return;
  
  const isHidden = submenu.classList.contains('hidden');
  
  if (isHidden) {
    submenu.classList.remove('hidden');
    chevron.style.transform = 'rotate(180deg)';
    chevron.style.color = '#C5A99B';
  } else {
    submenu.classList.add('hidden');
    chevron.style.transform = 'rotate(0deg)';
    chevron.style.color = '#2E4D45';
  }
}

function toggleMobileSubSubmenu(submenuId, trigger) {
  const submenu = document.getElementById(submenuId);
  const chevron = trigger.querySelector('i.fa-chevron-right');
  
  if (!submenu || !chevron) return;
  
  const isHidden = submenu.classList.contains('hidden');
  
  if (isHidden) {
    submenu.classList.remove('hidden');
    chevron.style.transform = 'rotate(90deg)';
    chevron.style.color = '#C5A99B';
  } else {
    submenu.classList.add('hidden');
    chevron.style.transform = 'rotate(0deg)';
    chevron.style.color = '#2E4D45';
  }
}

// Make functions globally available
window.toggleMobileSubmenu = toggleMobileSubmenu;
window.toggleMobileSubSubmenu = toggleMobileSubSubmenu;

export function init() {
  // Add click event listener to services link
  const servicesLink = document.getElementById('services-link');
  if (servicesLink) {
    servicesLink.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      toggleServicesDropdown();
    });
  }
  
  // Add click event listeners to submenu triggers
  const cosmeticTrigger = document.getElementById('cosmetic-trigger');
  if (cosmeticTrigger) {
    cosmeticTrigger.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      toggleSubMenu('cosmetic-submenu');
    });
  }
  
  const generalTrigger = document.getElementById('general-trigger');
  if (generalTrigger) {
    generalTrigger.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      toggleSubMenu('general-submenu');
    });
  }
  
  const orthodonticsTrigger = document.getElementById('orthodontics-trigger');
  if (orthodonticsTrigger) {
    orthodonticsTrigger.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      toggleSubMenu('orthodontics-submenu');
    });
  }
  
  const restorativeTrigger = document.getElementById('restorative-trigger');
  if (restorativeTrigger) {
    restorativeTrigger.addEventListener('click', function(e) {
      e.preventDefault();
      e.stopPropagation();
      toggleSubMenu('restorative-submenu');
    });
  }
  
  // Close dropdowns when clicking outside
  document.addEventListener('click', handleClickOutside);
}

export function teardown() {
  // Remove event listeners
  const servicesLink = document.getElementById('services-link');
  if (servicesLink) {
    servicesLink.removeEventListener('click', toggleServicesDropdown);
  }
  
  const triggers = ['cosmetic-trigger', 'general-trigger', 'orthodontics-trigger', 'restorative-trigger'];
  triggers.forEach(id => {
    const trigger = document.getElementById(id);
    if (trigger) {
      trigger.removeEventListener('click', function(e) {
        e.preventDefault();
        e.stopPropagation();
        toggleSubMenu(id.replace('-trigger', '-submenu'));
      });
    }
  });
  
  document.removeEventListener('click', handleClickOutside);
  
  // Clean up global functions
  if (window.toggleMobileSubmenu) delete window.toggleMobileSubmenu;
  if (window.toggleMobileSubSubmenu) delete window.toggleMobileSubSubmenu;
}