'use strict';

document.addEventListener('DOMContentLoaded', () => {

  if (window.location.hash) {
    history.replaceState(null, '', window.location.pathname + window.location.search);
  }
  window.scrollTo({ top: 0, left: 0, behavior: 'instant' });
  const header      = document.getElementById('site-header');
  const hamburger   = document.getElementById('nav-hamburger');
  const drawer      = document.getElementById('mobile-drawer');
  const backdrop    = document.getElementById('drawer-backdrop');
  const drawerClose = document.getElementById('drawer-close');
  const megaOverlay = document.getElementById('mega-overlay');
  const megaBtns    = document.querySelectorAll('.nav-mega-btn');
  const megaPanels  = document.querySelectorAll('.mega-panel');
  const accBtns     = document.querySelectorAll('.drawer-acc-btn');

  let openMega = null;
  let scrollTimer = null;

  const onScroll = () => {
    header?.classList.toggle('scrolled', window.scrollY > 50);
  };
  window.addEventListener('scroll', onScroll, { passive: true });
  onScroll();
  function openMegaPanel(key) {
    if (openMega === key) return;
    closeMegaPanel();
    openMega = key;

    const panel = document.getElementById('mega-' + key);
    const btn   = document.querySelector(`[data-mega="${key}"] .nav-mega-btn`);
    const item  = document.querySelector(`[data-mega="${key}"]`);

    panel?.classList.add('is-open');
    megaOverlay?.classList.add('is-visible');
    btn?.setAttribute('aria-expanded', 'true');
    item?.classList.add('mega-open');
  }

  function closeMegaPanel() {
    if (!openMega) return;
    const panel = document.getElementById('mega-' + openMega);
    const btn   = document.querySelector(`[data-mega="${openMega}"] .nav-mega-btn`);
    const item  = document.querySelector(`[data-mega="${openMega}"]`);

    panel?.classList.remove('is-open');
    megaOverlay?.classList.remove('is-visible');
    btn?.setAttribute('aria-expanded', 'false');
    item?.classList.remove('mega-open');
    openMega = null;
  }

  megaBtns.forEach(btn => {
    const key = btn.closest('[data-mega]')?.dataset.mega;
    if (!key) return;

    btn.addEventListener('click', (e) => {
      e.stopPropagation();
      openMega === key ? closeMegaPanel() : openMegaPanel(key);
    });
  });

  document.querySelectorAll('.has-mega').forEach(item => {
    const key = item.dataset.mega;
    let hoverTimer;

    item.addEventListener('mouseenter', () => {
      hoverTimer = setTimeout(() => openMegaPanel(key), 80);
    });
    item.addEventListener('mouseleave', () => {
      clearTimeout(hoverTimer);
    });
  });

  megaPanels.forEach(panel => {
    const key = panel.id.replace('mega-', '');
    let leaveTimer;

    panel.addEventListener('mouseenter', () => clearTimeout(leaveTimer));
    panel.addEventListener('mouseleave', () => {
      leaveTimer = setTimeout(closeMegaPanel, 120);
    });

    const navItem = document.querySelector(`[data-mega="${key}"]`);
    if (navItem) {
      navItem.addEventListener('mouseleave', () => {
        leaveTimer = setTimeout(closeMegaPanel, 120);
      });
    }
  });

  megaOverlay?.addEventListener('click', closeMegaPanel);
  document.addEventListener('keydown', e => {
    if (e.key === 'Escape') { closeMegaPanel(); closeDrawer(); }
  });

  document.addEventListener('click', e => {
    if (!e.target.closest('.has-mega') && !e.target.closest('.mega-panel')) {
      closeMegaPanel();
    }
  });

  function openDrawer() {
    drawer?.classList.add('is-open');
    backdrop?.classList.add('is-visible');
    hamburger?.classList.add('is-open');
    hamburger?.setAttribute('aria-expanded', 'true');
    drawer?.removeAttribute('aria-hidden');
    document.body.style.overflow = 'hidden';
    drawerClose?.focus();
  }

  function closeDrawer() {
    drawer?.classList.remove('is-open');
    backdrop?.classList.remove('is-visible');
    hamburger?.classList.remove('is-open');
    hamburger?.setAttribute('aria-expanded', 'false');
    drawer?.setAttribute('aria-hidden', 'true');
    document.body.style.overflow = '';
    hamburger?.focus();
  }

  hamburger?.addEventListener('click', () => {
    drawer?.classList.contains('is-open') ? closeDrawer() : openDrawer();
  });
  drawerClose?.addEventListener('click', closeDrawer);
  backdrop?.addEventListener('click', closeDrawer);

  accBtns.forEach(btn => {
    btn.addEventListener('click', () => {
      const isOpen = btn.classList.contains('is-open');
      accBtns.forEach(b => {
        b.classList.remove('is-open');
        b.setAttribute('aria-expanded', 'false');
        b.nextElementSibling?.classList.remove('is-open');
      });
      if (!isOpen) {
        btn.classList.add('is-open');
        btn.setAttribute('aria-expanded', 'true');
        btn.nextElementSibling?.classList.add('is-open');
      }
    });
  });

  document.querySelectorAll('a[href^="#"]').forEach(anchor => {
    anchor.addEventListener('click', function (e) {
      const target = document.querySelector(this.getAttribute('href'));
      if (!target) return;
      e.preventDefault();
      const headerH = parseInt(
        getComputedStyle(document.documentElement).getPropertyValue('--header-h')
      ) || 68;
      const top = target.getBoundingClientRect().top + window.scrollY - headerH - 16;
      window.scrollTo({ top, behavior: 'smooth' });
    });
  });

});