---
import { getLocalePath, languageLabels, languageNames, languages, type Lang, type Translations } from '../i18n/translations'

export interface Props {
  lang: Lang
  t: Translations['header']
}

const { lang, t } = Astro.props
const logoIcon = "/assets/header-logo-icon.png";
const logoWordmark = "/assets/header-logo-wordmark.svg";
const globeIcon = "/assets/header-globe.svg";
const navItems = [
  { href: '#hero', label: t.nav.home },
  { href: '#features', label: t.nav.features },
  { href: '#experience', label: t.nav.experience },
  { href: '#use-cases', label: t.nav.useCases },
  { href: '#reliability', label: t.nav.reliability },
]
const languageOptions = languages.map(item => ({
  lang: item,
  href: getLocalePath(item),
  label: `${languageLabels[item]} - ${languageNames[item]}`,
}))
---

<header id="site-header" class="site-header">
  <div class="site-header__bar">
    <div class="site-header__brand">
      <a href={getLocalePath(lang)} class="site-logo">
        <div class="site-logo__icon-frame">
          <img alt={t.logoIconAlt} class="site-logo__icon" src={logoIcon} />
        </div>
        <div class="site-logo__wordmark-frame">
          <img alt={t.logoAlt} class="site-logo__wordmark" src={logoWordmark} />
        </div>
      </a>
    </div>

    <nav class="site-nav" aria-label={t.navLabel}>
      {navItems.map((item, index) => (
        <a href={item.href} class={`site-nav__link ${index === 0 ? 'is-active' : ''}`} data-nav-link>{item.label}</a>
      ))}
    </nav>

    <div class="site-header__actions">
      <div class="language-switcher">
        <button
          id="language-toggle"
          class="language-switcher__button"
          type="button"
          aria-label={t.languageAlt}
          aria-expanded="false"
          aria-controls="language-menu"
        >
          <img alt="" class="language-switcher__icon" src={globeIcon} />
          <span class="language-switcher__current">{languageLabels[lang]}</span>
        </button>
        <div id="language-menu" class="language-switcher__menu is-hidden" aria-hidden="true">
          {languageOptions.map(option => (
            <a
              href={option.href}
              class={`language-switcher__option ${option.lang === lang ? 'is-active' : ''}`}
              aria-current={option.lang === lang ? 'page' : undefined}
            >
              {option.label}
            </a>
          ))}
        </div>
      </div>

      <a href="#download" class="site-header__download">
        <span class="site-header__download-label">{t.download}</span>
      </a>

      <button
        id="menu-toggle"
        class="menu-toggle"
        type="button"
        aria-label={t.openMenu}
        aria-expanded="false"
        aria-controls="mobile-nav"
        data-open-label={t.openMenu}
        data-close-label={t.closeMenu}
      >
        <span id="bar-1" class="menu-toggle__bar"></span>
        <span id="bar-2" class="menu-toggle__bar"></span>
        <span id="bar-3" class="menu-toggle__bar"></span>
      </button>
    </div>
  </div>

  <div id="mobile-nav" class="mobile-nav is-hidden" aria-hidden="true">
    <ul class="mobile-nav__list">
      {navItems.map((item, index) => (
        <li><a href={item.href} class={`mobile-nav__link ${index === navItems.length - 1 ? 'mobile-nav__link--last' : ''}`} data-nav-link>{item.label}</a></li>
      ))}
      <li class="mobile-nav__languages">
        {languages.map(item => (
          <a href={getLocalePath(item)} class={`mobile-nav__language-link ${item === lang ? 'is-active' : ''}`} aria-current={item === lang ? 'page' : undefined}>
            {languageNames[item]}
          </a>
        ))}
      </li>
      <li class="mobile-nav__download-item">
        <a href="#download" class="mobile-nav__download">
          {t.download}
        </a>
      </li>
    </ul>
  </div>
</header>

<script>
  const toggle = document.getElementById('menu-toggle') as HTMLButtonElement;
  const nav = document.getElementById('mobile-nav') as HTMLDivElement;
  const bar1 = document.getElementById('bar-1') as HTMLSpanElement;
  const bar2 = document.getElementById('bar-2') as HTMLSpanElement;
  const bar3 = document.getElementById('bar-3') as HTMLSpanElement;
  const languageToggle = document.getElementById('language-toggle') as HTMLButtonElement | null;
  const languageMenu = document.getElementById('language-menu') as HTMLDivElement | null;

  function closeLanguageMenu() {
    if (!languageToggle || !languageMenu) return;
    languageToggle.setAttribute('aria-expanded', 'false');
    languageMenu.classList.add('is-hidden');
    languageMenu.setAttribute('aria-hidden', 'true');
  }

  function openLanguageMenu() {
    if (!languageToggle || !languageMenu) return;
    languageToggle.setAttribute('aria-expanded', 'true');
    languageMenu.classList.remove('is-hidden');
    languageMenu.removeAttribute('aria-hidden');
  }

  function openMenu() {
    toggle.setAttribute('aria-expanded', 'true');
    toggle.setAttribute('aria-label', toggle.dataset.closeLabel || 'Close menu');
    nav.classList.remove('is-hidden');
    nav.removeAttribute('aria-hidden');
    bar1.style.transform = 'translateY(7px) rotate(45deg)';
    bar2.style.opacity = '0';
    bar3.style.transform = 'translateY(-7px) rotate(-45deg)';
  }

  function closeMenu() {
    toggle.setAttribute('aria-expanded', 'false');
    toggle.setAttribute('aria-label', toggle.dataset.openLabel || 'Open menu');
    nav.classList.add('is-hidden');
    nav.setAttribute('aria-hidden', 'true');
    bar1.style.transform = '';
    bar2.style.opacity = '';
    bar3.style.transform = '';
  }

  toggle.addEventListener('click', () => {
    toggle.getAttribute('aria-expanded') === 'true' ? closeMenu() : openMenu();
  });

  languageToggle?.addEventListener('click', event => {
    event.stopPropagation();
    languageToggle.getAttribute('aria-expanded') === 'true' ? closeLanguageMenu() : openLanguageMenu();
  });

  languageMenu?.addEventListener('click', event => event.stopPropagation());

  document.addEventListener('click', closeLanguageMenu);

  document.addEventListener('keydown', event => {
    if (event.key === 'Escape') closeLanguageMenu();
  });

  nav.querySelectorAll('a').forEach(a => a.addEventListener('click', closeMenu));

  window.addEventListener('resize', () => {
    if (window.innerWidth >= 1024) closeMenu();
    if (window.innerWidth < 1024) closeLanguageMenu();
  });
</script>
