"use client";

import { useEffect, useRef, useState } from "react";
import { createPortal } from "react-dom";
import Link from "next/link";
import Logo from "@/components/Logo";
import SearchDialog from "@/components/SearchDialog";
import LanguageSelector from "@/components/LanguageSelector";
import { LOCALES, getLocalizedHref } from "@/i18n/links";
import { usePathname } from "next/navigation";
import { useTheme } from "next-themes";
import {
	ArrowRight,
	BookA,
	BookOpen,
	Box,
	ChevronDown,
	Cpu,
	Library,
	Menu,
	Moon,
	Scale,
	Search,
	SlidersHorizontal,
	Sparkles,
	Sun,
	X,
	AlertTriangle,
} from "lucide-react";

const MENUS_PT = [
	{
		id: "hardware",
		label: "Hardware",
		items: [
			{ href: "/series", label: "Séries ESP32", desc: "12 chips, pinagem e especificações", icon: Cpu },
			{ href: "/comparacao", label: "Comparador", desc: "Até quatro séries lado a lado", icon: Scale },
			{ href: "/catalogo", label: "Catálogo de placas", desc: "DevKits, pinos e onde comprar", icon: Box },
		],
	},
	{
		id: "tools",
		label: "Ferramentas",
		items: [
			{ href: "/seletor", label: "Seletor inteligente", desc: "O chip certo para o seu projeto", icon: SlidersHorizontal },
			{ href: "/diagnostico", label: "Diagnóstico", desc: "Brownout, bootloop, WDT e mais", icon: AlertTriangle },
			{ href: "/componentes", label: "Component Registry", desc: "Drivers e manifests idf_component.yml", icon: Search },
		],
	},
	{
		id: "library",
		label: "Biblioteca",
		items: [
			{ href: "/frameworks", label: "Frameworks e SDKs", desc: "ESP-IDF, Arduino, Rust e Matter", icon: BookOpen },
			{ href: "/glossario", label: "Glossário técnico", desc: "Os termos que aparecem nos datasheets", icon: BookA },
			{ href: "/sobre", label: "Sobre o projeto", desc: "Autoria, método e abertura", icon: Sparkles },
		],
	},
];

const MENUS_EN = [
	{
		id: "hardware",
		label: "Hardware",
		items: [
			{ href: "/series", label: "ESP32 Series", desc: "12 chips, pinouts and specifications", icon: Cpu },
			{ href: "/comparacao", label: "Comparator", desc: "Up to four series side by side", icon: Scale },
			{ href: "/catalogo", label: "Board Catalog", desc: "DevKits, pinouts and where to buy", icon: Box },
		],
	},
	{
		id: "tools",
		label: "Tools",
		items: [
			{ href: "/seletor", label: "Smart Selector", desc: "The right chip for your project", icon: SlidersHorizontal },
			{ href: "/diagnostico", label: "Diagnostics", desc: "Brownout, bootloop, WDT and more", icon: AlertTriangle },
			{ href: "/componentes", label: "Component Registry", desc: "Drivers and idf_component.yml manifests", icon: Search },
		],
	},
	{
		id: "library",
		label: "Library",
		items: [
			{ href: "/frameworks", label: "Frameworks & SDKs", desc: "ESP-IDF, Arduino, Rust and Matter", icon: BookOpen },
			{ href: "/glossario", label: "Technical Glossary", desc: "Terms appearing in datasheets", icon: BookA },
			{ href: "/sobre", label: "About the Project", desc: "Authorship, method and open source", icon: Sparkles },
		],
	},
];

const MENUS_ES = [
	{
		id: "hardware",
		label: "Hardware",
		items: [
			{ href: "/series", label: "Series ESP32", desc: "12 chips, patillaje y especificaciones", icon: Cpu },
			{ href: "/comparacao", label: "Comparador", desc: "Hasta cuatro series frente a frente", icon: Scale },
			{ href: "/catalogo", label: "Catálogo de placas", desc: "DevKits, pines y dónde comprar", icon: Box },
		],
	},
	{
		id: "tools",
		label: "Herramientas",
		items: [
			{ href: "/seletor", label: "Selector inteligente", desc: "El chip adecuado para su proyecto", icon: SlidersHorizontal },
			{ href: "/diagnostico", label: "Diagnóstico", desc: "Brownout, bootloop, WDT y más", icon: AlertTriangle },
			{ href: "/componentes", label: "Component Registry", desc: "Drivers y manifiestos idf_component.yml", icon: Search },
		],
	},
	{
		id: "library",
		label: "Biblioteca",
		items: [
			{ href: "/frameworks", label: "Frameworks y SDKs", desc: "ESP-IDF, Arduino, Rust y Matter", icon: BookOpen },
			{ href: "/glossario", label: "Glosario técnico", desc: "Términos que aparecen en las hojas de datos", icon: BookA },
			{ href: "/sobre", label: "Acerca del proyecto", desc: "Autoría, método y código abierto", icon: Sparkles },
		],
	},
];

const MENUS_FR = [
	{
		id: "hardware",
		label: "Matériel",
		items: [
			{ href: "/series", label: "Séries ESP32", desc: "12 puces, brochages et spécifications", icon: Cpu },
			{ href: "/comparacao", label: "Comparateur", desc: "Jusqu'à quatre séries côte à côte", icon: Scale },
			{ href: "/catalogo", label: "Catalogue de cartes", desc: "DevKits, broches et où acheter", icon: Box },
		],
	},
	{
		id: "tools",
		label: "Outils",
		items: [
			{ href: "/seletor", label: "Sélecteur intelligent", desc: "La puce idéale pour votre projet", icon: SlidersHorizontal },
			{ href: "/diagnostico", label: "Diagnostic", desc: "Brownout, bootloop, WDT et plus", icon: AlertTriangle },
			{ href: "/componentes", label: "Component Registry", desc: "Pilotes et manifestes idf_component.yml", icon: Search },
		],
	},
	{
		id: "library",
		label: "Bibliothèque",
		items: [
			{ href: "/frameworks", label: "Frameworks et SDKs", desc: "ESP-IDF, Arduino, Rust et Matter", icon: BookOpen },
			{ href: "/glossario", label: "Glossaire technique", desc: "Les termes des fiches techniques", icon: BookA },
			{ href: "/sobre", label: "À propos du projet", desc: "Auteur, méthode et open source", icon: Sparkles },
		],
	},
];

const MENUS_DE = [
	{
		id: "hardware",
		label: "Hardware",
		items: [
			{ href: "/series", label: "ESP32-Serien", desc: "12 Chips, Pinbelegungen und Spezifikationen", icon: Cpu },
			{ href: "/comparacao", label: "Vergleich", desc: "Bis zu vier Serien nebeneinander", icon: Scale },
			{ href: "/catalogo", label: "Board-Katalog", desc: "DevKits, Pins und Bezugsquellen", icon: Box },
		],
	},
	{
		id: "tools",
		label: "Werkzeuge",
		items: [
			{ href: "/seletor", label: "Intelligente Auswahl", desc: "Der richtige Chip für Ihr Projekt", icon: SlidersHorizontal },
			{ href: "/diagnostico", label: "Diagnose", desc: "Brownout, Bootloops, WDT und mehr", icon: AlertTriangle },
			{ href: "/componentes", label: "Component Registry", desc: "Treiber und idf_component.yml-Manifeste", icon: Search },
		],
	},
	{
		id: "library",
		label: "Bibliothek",
		items: [
			{ href: "/frameworks", label: "Frameworks & SDKs", desc: "ESP-IDF, Arduino, Rust und Matter", icon: BookOpen },
			{ href: "/glossario", label: "Technisches Glossar", desc: "Begriffe aus den Datenblättern", icon: BookA },
			{ href: "/sobre", label: "Über das Projekt", desc: "Autorschaft, Methode und Open Source", icon: Sparkles },
		],
	},
];

const MOBILE_LINKS_PT = [
	{ href: "/series", label: "Séries ESP32" },
	{ href: "/comparacao", label: "Comparador" },
	{ href: "/seletor", label: "Seletor inteligente" },
	{ href: "/diagnostico", label: "Diagnóstico" },
	{ href: "/frameworks", label: "Frameworks e SDKs" },
	{ href: "/componentes", label: "Component Registry" },
	{ href: "/glossario", label: "Glossário" },
	{ href: "/catalogo", label: "Catálogo de placas" },
	{ href: "/livro", label: "O livro" },
	{ href: "/sobre", label: "Sobre" },
];

const MOBILE_LINKS_EN = [
	{ href: "/series", label: "ESP32 Series" },
	{ href: "/comparacao", label: "Comparator" },
	{ href: "/seletor", label: "Smart Selector" },
	{ href: "/diagnostico", label: "Diagnostics" },
	{ href: "/frameworks", label: "Frameworks & SDKs" },
	{ href: "/componentes", label: "Component Registry" },
	{ href: "/glossario", label: "Glossary" },
	{ href: "/catalogo", label: "Board Catalog" },
	{ href: "/sobre", label: "About" },
];

const MOBILE_LINKS_ES = [
	{ href: "/series", label: "Series ESP32" },
	{ href: "/comparacao", label: "Comparador" },
	{ href: "/seletor", label: "Selector inteligente" },
	{ href: "/diagnostico", label: "Diagnóstico" },
	{ href: "/frameworks", label: "Frameworks y SDKs" },
	{ href: "/componentes", label: "Component Registry" },
	{ href: "/glossario", label: "Glosario" },
	{ href: "/catalogo", label: "Catálogo de placas" },
	{ href: "/sobre", label: "Acerca de" },
];

const MOBILE_LINKS_FR = [
	{ href: "/series", label: "Séries ESP32" },
	{ href: "/comparacao", label: "Comparateur" },
	{ href: "/seletor", label: "Sélecteur intelligent" },
	{ href: "/diagnostico", label: "Diagnostic" },
	{ href: "/frameworks", label: "Frameworks et SDKs" },
	{ href: "/componentes", label: "Component Registry" },
	{ href: "/glossario", label: "Glossaire" },
	{ href: "/catalogo", label: "Catalogue de cartes" },
	{ href: "/sobre", label: "À propos" },
];

const MOBILE_LINKS_DE = [
	{ href: "/series", label: "ESP32-Serien" },
	{ href: "/comparacao", label: "Vergleich" },
	{ href: "/seletor", label: "Intelligente Auswahl" },
	{ href: "/diagnostico", label: "Diagnose" },
	{ href: "/frameworks", label: "Frameworks & SDKs" },
	{ href: "/componentes", label: "Component Registry" },
	{ href: "/glossario", label: "Glossar" },
	{ href: "/catalogo", label: "Board-Katalog" },
	{ href: "/sobre", label: "Über uns" },
];

function isActivePath(pathname, href, currentLocale) {
	const localized = getLocalizedHref(`/${currentLocale}${href}`, currentLocale);
	if (href === "/" || localized === `/${currentLocale}/` || localized === `/${currentLocale}`) {
		return pathname === `/${currentLocale}` || pathname === `/${currentLocale}/`;
	}
	return pathname === localized || String(pathname).startsWith(`${localized}/`);
}

export default function Header() {
	const pathname = usePathname() || "";
	const [mounted, setMounted] = useState(false);
	const [openMenu, setOpenMenu] = useState(null);
	const [drawerOpen, setDrawerOpen] = useState(false);
	const navRef = useRef(null);
	const closeRef = useRef(null);
	const menuButtonRef = useRef(null);

	const currentLocale =
		LOCALES.find((l) => pathname === `/${l.code}` || pathname.startsWith(`/${l.code}/`))?.code || "pt";
	const isPt = currentLocale === "pt";
	const isEn = currentLocale === "en";
	const isEs = currentLocale === "es";
	const isFr = currentLocale === "fr";
	const isDe = currentLocale === "de";

	const getLinkHref = (href) => getLocalizedHref(`/${currentLocale}${href}`, currentLocale);

	useEffect(() => setMounted(true), []);

	useEffect(() => {
		setOpenMenu(null);
		setDrawerOpen(false);
	}, [pathname]);

	useEffect(() => {
		function onPointerDown(event) {
			if (navRef.current && !navRef.current.contains(event.target)) setOpenMenu(null);
		}
		function onKeyDown(event) {
			if (event.key === "Escape") {
				setOpenMenu(null);
				setDrawerOpen(false);
			}
		}
		document.addEventListener("mousedown", onPointerDown);
		document.addEventListener("keydown", onKeyDown);
		return () => {
			document.removeEventListener("mousedown", onPointerDown);
			document.removeEventListener("keydown", onKeyDown);
		};
	}, []);

	useEffect(() => {
		if (!drawerOpen) return;
		const previous = document.body.style.overflow;
		document.body.style.overflow = "hidden";
		closeRef.current?.focus();
		return () => {
			document.body.style.overflow = previous;
			menuButtonRef.current?.focus();
		};
	}, [drawerOpen]);

	const visibleMobileLinks = isPt
		? MOBILE_LINKS_PT
		: isEs
		? MOBILE_LINKS_ES
		: isFr
		? MOBILE_LINKS_FR
		: isDe
		? MOBILE_LINKS_DE
		: MOBILE_LINKS_EN;
	const MENUS = isPt ? MENUS_PT : isEs ? MENUS_ES : isFr ? MENUS_FR : isDe ? MENUS_DE : MENUS_EN;

	return (
		<header className="sticky top-0 z-50 pt-3 sm:pt-4">
			<div className="shell">
				<div className="nav-pill flex h-16 items-center justify-between gap-1.5 rounded-full px-2.5 sm:gap-3 sm:px-4">
					<Link
						href={getLinkHref("/")}
						className="flex min-h-11 shrink-0 items-center gap-2.5 rounded-full pl-1 pr-2"
						aria-label={
							isPt
								? "ESPDocs, página inicial"
								: isEs
								? "ESPDocs, página de inicio"
								: isFr
								? "ESPDocs, page d'accueil"
								: isDe
								? "ESPDocs, Startseite"
								: "ESPDocs, homepage"
						}
					>
						<Logo className="h-[30px] w-[30px]" />
						<span className="font-display text-[1.3rem] font-semibold max-[359px]:sr-only leading-none tracking-[-0.045em] text-ink">ESPDocs</span>
					</Link>

					<nav
						ref={navRef}
						className="hidden items-center gap-0.5 lg:flex"
						aria-label={
							isPt
								? "Navegação principal"
								: isEs
								? "Navegación principal"
								: isFr
								? "Navigation principale"
								: isDe
								? "Hauptnavigation"
								: "Main navigation"
						}
					>
						{MENUS.map((menu) => {
							const active = menu.items.some((item) => isActivePath(pathname, item.href, currentLocale));
							const expanded = openMenu === menu.id;
							return (
								<div key={menu.id} className="relative">
									<button
										type="button"
										className={`nav-link ${active ? "is-active" : ""}`}
										aria-expanded={expanded}
										aria-controls={`menu-${menu.id}`}
										onClick={() => setOpenMenu(expanded ? null : menu.id)}
									>
										{menu.label}
										<ChevronDown className={`h-3.5 w-3.5 transition-transform duration-200 ${expanded ? "rotate-180" : ""}`} aria-hidden="true" />
									</button>
									{expanded && (
										<div
											id={`menu-${menu.id}`}
											className="absolute left-0 top-full mt-3 w-[23rem] rounded-[1.5rem] border border-line bg-surface p-2 shadow-[0_24px_60px_-20px_rgba(15,23,42,0.35)] dark:shadow-[0_24px_60px_-20px_rgba(0,0,0,0.8)]"
										>
											{menu.items.map((item) => {
												const Icon = item.icon;
												const localizedHref = getLinkHref(item.href);
												return (
													<Link
														key={item.href}
														href={localizedHref}
														className="group flex items-start gap-3 rounded-2xl px-3 py-3 transition-colors hover:bg-surface-2"
														aria-current={isActivePath(pathname, item.href, currentLocale) ? "page" : undefined}
													>
														<span className="mt-0.5 grid h-9 w-9 shrink-0 place-items-center rounded-xl bg-accent-soft text-accent transition-colors group-hover:bg-surface">
															<Icon className="h-4 w-4" aria-hidden="true" />
														</span>
														<span className="min-w-0">
															<span className="block text-sm font-semibold text-ink">{item.label}</span>
															<span className="mt-0.5 block text-xs leading-relaxed text-muted">{item.desc}</span>
														</span>
													</Link>
												);
											})}
										</div>
									)}
								</div>
							);
						})}

						{isPt && (
							<Link href={getLinkHref("/livro")} className={`nav-link ${isActivePath(pathname, "/livro", currentLocale) ? "is-active" : ""}`} aria-current={isActivePath(pathname, "/livro", currentLocale) ? "page" : undefined}>
								Livro
							</Link>
						)}
						<Link href={getLinkHref("/sobre")} className={`nav-link ${isActivePath(pathname, "/sobre", currentLocale) ? "is-active" : ""}`} aria-current={isActivePath(pathname, "/sobre", currentLocale) ? "page" : undefined}>
							{isPt ? "Sobre" : isEs ? "Acerca de" : isFr ? "À propos" : isDe ? "Über uns" : "About"}
						</Link>
					</nav>

					<div className="flex items-center gap-1 sm:gap-1.5">
						<Link href={getLinkHref("/seletor")} className="btn btn-primary btn-sm hidden lg:inline-flex">
							<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
							{isPt ? "Selecionar chip" : isEs ? "Seleccionar chip" : isFr ? "Choisir une puce" : isDe ? "Chip auswählen" : "Select chip"}
						</Link>
						<SearchDialog />
						<LanguageSelector />
						<ThemeToggle isPt={isPt} isEs={isEs} isFr={isFr} isDe={isDe} />
						<button
							ref={menuButtonRef}
							type="button"
							className="grid h-11 w-11 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2 lg:hidden"
							aria-label={
								isPt
									? "Abrir menu de navegação"
									: isEs
									? "Abrir menú de navegación"
									: isFr
									? "Ouvrir le menu de navigation"
									: isDe
									? "Navigationsmenü öffnen"
									: "Open navigation menu"
							}
							aria-expanded={drawerOpen}
							onClick={() => setDrawerOpen(true)}
						>
							<Menu className="h-5 w-5" aria-hidden="true" />
						</button>
					</div>
				</div>
			</div>

			{mounted &&
				createPortal(
					<>
						<div
							className={`fixed inset-0 z-[100] bg-black/45 backdrop-blur-sm transition-opacity duration-200 ${
								drawerOpen ? "opacity-100" : "hidden"
							}`}
							onClick={() => setDrawerOpen(false)}
							aria-hidden="true"
						/>
						<div
							role="dialog"
							aria-modal="true"
							aria-label={
								isPt
									? "Menu de navegação"
									: isEs
									? "Menú de navegación"
									: isFr
									? "Menu de navigation"
									: isDe
									? "Navigationsmenü"
									: "Navigation menu"
							}
							aria-hidden={!drawerOpen}
							inert={!drawerOpen}
							className={`fixed inset-y-0 right-0 z-[101] flex w-[min(23rem,94vw)] flex-col rounded-l-[2rem] border-l border-line bg-canvas transition-transform duration-300 ${
								drawerOpen ? "translate-x-0" : "hidden"
							}`}
						>
							<div className="flex items-start justify-between px-5 py-5">
								<div>
									<p className="text-xs font-semibold text-muted">
										{isPt ? "Navegação" : isEs ? "Navegación" : isFr ? "Navigation" : isDe ? "Navigation" : "Navigation"}
									</p>
									<p className="mt-1 font-display text-2xl font-semibold tracking-[-0.04em] text-ink">
										{isPt ? "Para onde ir" : isEs ? "A dónde ir" : isFr ? "Où aller" : isDe ? "Wohin möchten Sie" : "Where to go"}
									</p>
								</div>
								<button
									ref={closeRef}
									type="button"
									onClick={() => setDrawerOpen(false)}
									className="grid h-10 w-10 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2"
									aria-label={isPt ? "Fechar menu" : isEs ? "Cerrar menú" : isFr ? "Fermer le menu" : isDe ? "Menü schließen" : "Close menu"}
								>
									<X className="h-5 w-5" aria-hidden="true" />
								</button>
							</div>

							{isPt && (
								<div className="px-4 pb-2">
									<Link
										href="/pt/livro"
										onClick={() => setDrawerOpen(false)}
										className="group grid grid-cols-[3.25rem_1fr_auto] items-center gap-3 rounded-2xl bg-[#0b0d10] p-3 text-[#f4f6f8] ring-1 ring-white/10"
									>
										{/* eslint-disable-next-line @next/next/no-img-element */}
										<img
											src="/livro/capa.jpg"
											alt=""
											aria-hidden="true"
											width={52}
											height={78}
											className="h-[78px] w-[52px] rounded-md object-cover shadow-lg"
										/>
										<span className="min-w-0">
											<span className="text-[0.6875rem] font-semibold text-[#75cdc1]">Livro novo</span>
											<span className="mt-1 block font-display text-lg font-semibold leading-tight">Microcontroladores ESP32</span>
											<span className="mt-1 block text-xs text-[#a6afbd]">Conectividade, eficiência e desempenho</span>
										</span>
										<ArrowRight className="h-4 w-4 shrink-0 text-[#75cdc1] transition-transform duration-300 group-hover:translate-x-1" aria-hidden="true" />
									</Link>
								</div>
							)}

							<nav
								className="flex-1 overflow-y-auto px-3 py-2"
								aria-label={isPt ? "Navegação móvel" : isEs ? "Navegación móvil" : isFr ? "Navigation mobile" : isDe ? "Mobile Navigation" : "Mobile navigation"}
							>
								{visibleMobileLinks.map((link) => (
									<Link
										key={link.href}
										href={getLinkHref(link.href)}
										onClick={() => setDrawerOpen(false)}
										className="group flex min-h-11 items-center justify-between gap-3 rounded-xl px-3 text-sm font-medium text-ink-soft transition-colors hover:bg-surface-2 hover:text-ink"
										aria-current={isActivePath(pathname, link.href, currentLocale) ? "page" : undefined}
									>
										{link.label}
										<ArrowRight className="h-4 w-4 text-faint transition-transform duration-300 group-hover:translate-x-0.5 group-hover:text-accent" aria-hidden="true" />
									</Link>
								))}
							</nav>

							<div className="p-4 pt-2">
								<Link href={getLinkHref("/seletor")} onClick={() => setDrawerOpen(false)} className="btn btn-primary w-full">
									<SlidersHorizontal className="h-4 w-4" aria-hidden="true" />
									{isPt ? "Selecionar meu chip" : isEs ? "Seleccionar mi chip" : isFr ? "Choisir ma puce" : isDe ? "Meinen Chip auswählen" : "Select my chip"}
								</Link>
							</div>
						</div>
					</>,
					document.body
				)}
		</header>
	);
}

function ThemeToggle({ isPt = true, isEs = false, isFr = false, isDe = false }) {
	const { resolvedTheme, setTheme } = useTheme();
	const [mounted, setMounted] = useState(false);

	useEffect(() => setMounted(true), []);

	if (!mounted) {
		return <span className="h-11 w-11 rounded-full border border-line bg-surface-2" aria-hidden="true" />;
	}

	const dark = resolvedTheme === "dark";

	return (
		<button
			type="button"
			onClick={() => setTheme(dark ? "light" : "dark")}
			className="grid h-11 w-11 place-items-center rounded-full border border-line text-ink transition-colors hover:bg-surface-2"
			aria-label={
				dark
					? isPt
						? "Ativar tema claro"
						: isEs
						? "Activar tema claro"
						: isFr
						? "Activer le thème clair"
						: isDe
						? "Helles Design aktivieren"
						: "Switch to light theme"
					: isPt
					? "Ativar tema escuro"
					: isEs
					? "Activar tema oscuro"
					: isFr
					? "Activer le thème sombre"
					: isDe
					? "Dunkles Design aktivieren"
					: "Switch to dark theme"
			}
			title={
				dark
					? isPt
						? "Tema claro"
						: isEs
						? "Tema claro"
						: isFr
						? "Thème clair"
						: isDe
						? "Helles Design"
						: "Light theme"
					: isPt
					? "Tema escuro"
					: isEs
					? "Tema oscuro"
					: isFr
					? "Thème sombre"
					: isDe
					? "Dunkles Design"
					: "Dark theme"
			}
		>
			{dark ? <Sun className="h-4 w-4" aria-hidden="true" /> : <Moon className="h-4 w-4" aria-hidden="true" />}
		</button>
	);
}