"use client";

import Image from "next/image";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useRef, useState } from "react";
import type { Locale } from "@/content/site";
import { libraryPath, librarySegment } from "@/content/libraryPaths";
import { localizePath, serviceKeys, servicePath, services } from "@/content/services";
import { translations } from "@/content/translations";

const navItems = [
  ["solutions", "solutions"],
  ["work", "work"],
  ["knowledge", "knowledge"],
  ["about", "about"],
] as const;

export function SiteHeader({
  locale,
}: {
  locale: Locale;
}) {
  const t = translations[locale];
  const pathname = usePathname();
  const mobileMenu = useRef<HTMLDetailsElement>(null);
  const servicesMenu = useRef<HTMLDivElement>(null);
  const firstServiceLink = useRef<HTMLAnchorElement>(null);
  const [servicesOpen, setServicesOpen] = useState(false);
  const suffix = pathname.replace(new RegExp(`^/${locale}`), "").replace(/\/$/, "");
  const primaryLabel = {
    fr: "Navigation principale",
    en: "Primary navigation",
    ar: "التنقل الرئيسي",
  }[locale];
  const menuLabel = {
    fr: "Ouvrir le menu",
    en: "Open menu",
    ar: "فتح القائمة",
  }[locale];
  const headerCta = {
    fr: "Parlons de votre projet",
    en: "Discuss your project",
    ar: "لنتحدث عن مشروعك",
  }[locale];
  const servicesLabel = translations[locale].nav.services;

  useEffect(() => {
    const closeOnOutsideClick = (event: PointerEvent) => {
      if (!servicesMenu.current?.contains(event.target as Node)) setServicesOpen(false);
    };
    document.addEventListener("pointerdown", closeOnOutsideClick);
    return () => document.removeEventListener("pointerdown", closeOnOutsideClick);
  }, []);

  return (
    <header className="site-header">
      <a className="skip-link" href="#main">
        {locale === "fr" ? "Aller au contenu" : locale === "ar" ? "انتقل إلى المحتوى" : "Skip to content"}
      </a>
      <div className="shell header-inner">
        <Link href={`/${locale}/`} className="brand-lockup" aria-label={`${t.nav.home} — Yashal Studios`}>
          <Image src="/brand/yashal-logo-dark.png" alt="" width={44} height={47} priority />
          <span>
            <strong>YASHAL</strong>
            <small>STUDIOS</small>
          </span>
        </Link>

        <nav className="desktop-nav" aria-label={primaryLabel}>
          <Link
            href={`/${locale}/growth-system/`}
            aria-current={suffix === "/growth-system" ? "page" : undefined}
          >
            {t.nav.growthSystem}
          </Link>
          <div
            className="services-menu"
            ref={servicesMenu}
            onMouseEnter={() => setServicesOpen(true)}
            onMouseLeave={() => setServicesOpen(false)}
            onBlur={(event) => {
              if (!event.currentTarget.contains(event.relatedTarget as Node | null)) setServicesOpen(false);
            }}
            onKeyDown={(event) => {
              if (event.key === "Escape") {
                setServicesOpen(false);
                servicesMenu.current?.querySelector("button")?.focus();
              }
            }}
          >
            <button
              type="button"
              className="services-trigger"
              aria-haspopup="menu"
              aria-expanded={servicesOpen}
              aria-controls="services-dropdown"
              aria-current={suffix.startsWith("/services/") ? "page" : undefined}
              onClick={() => setServicesOpen((open) => !open)}
              onKeyDown={(event) => {
                if (event.key === "ArrowDown") {
                  event.preventDefault();
                  setServicesOpen(true);
                  window.setTimeout(() => firstServiceLink.current?.focus(), 0);
                }
              }}
            >
              {servicesLabel}<span aria-hidden="true">⌄</span>
            </button>
            <div id="services-dropdown" className="services-dropdown" role="menu" hidden={!servicesOpen}>
              {serviceKeys.map((key, index) => {
                const copy = services[key].content[locale];
                return (
                  <Link
                    key={key}
                    ref={index === 0 ? firstServiceLink : undefined}
                    href={servicePath(locale, key)}
                    role="menuitem"
                    onClick={() => setServicesOpen(false)}
                  >
                    <strong>{copy.name}</strong>
                    <small>{copy.menuDescription}</small>
                  </Link>
                );
              })}
            </div>
          </div>
          {navItems.map(([key, slug]) => (
            <Link
              key={slug}
              href={key === "knowledge" ? libraryPath(locale) : `/${locale}/${slug}/`}
              aria-current={key === "knowledge" ? (suffix.startsWith(`/${librarySegment(locale)}`) ? "page" : undefined) : (suffix === `/${slug}` ? "page" : undefined)}
            >
              {t.nav[key]}
            </Link>
          ))}
        </nav>

        <div className="header-actions">
          <nav className="locale-switcher" aria-label={locale === "fr" ? "Langues" : locale === "ar" ? "اللغات" : "Languages"}>
            {(["fr", "en", "ar"] as const).map((option) => (
              <Link
                key={option}
                href={localizePath(pathname, option)}
                hrefLang={option}
                lang={option}
                aria-current={locale === option ? "page" : undefined}
              >
                {option === "ar" ? "العربية" : option.toUpperCase()}
              </Link>
            ))}
          </nav>
          <Link className="button button-small desktop-cta" href={`/${locale}/contact/`}>
            {headerCta}
          </Link>
          <details
            className="mobile-menu"
            ref={mobileMenu}
            onKeyDown={(event) => {
              if (event.key === "Escape" && mobileMenu.current?.open) {
                mobileMenu.current.open = false;
                mobileMenu.current.querySelector("summary")?.focus();
              }
            }}
          >
            <summary aria-label={menuLabel}>
              <span />
              <span />
            </summary>
            <nav aria-label={locale === "ar" ? "قائمة الهاتف" : "Mobile navigation"}>
              <Link
                href={`/${locale}/growth-system/`}
                aria-current={suffix === "/growth-system" ? "page" : undefined}
              >
                {t.nav.growthSystem}
              </Link>
              <details className="mobile-services">
                <summary>{servicesLabel}</summary>
                <div>
                  {serviceKeys.map((key) => (
                    <Link key={key} href={servicePath(locale, key)}>
                      {services[key].content[locale].name}
                    </Link>
                  ))}
                </div>
              </details>
              {navItems.map(([key, slug]) => (
                <Link
                  key={slug}
                  href={key === "knowledge" ? libraryPath(locale) : `/${locale}/${slug}/`}
                  aria-current={key === "knowledge" ? (suffix.startsWith(`/${librarySegment(locale)}`) ? "page" : undefined) : (suffix === `/${slug}` ? "page" : undefined)}
                >
                  {t.nav[key]}
                </Link>
              ))}
              <Link href={`/${locale}/contact/`}>{t.common.start}</Link>
            </nav>
          </details>
        </div>
      </div>
    </header>
  );
}