"use client";

import { useEffect, useState } from "react";
import { ChevronDown, Languages, Menu, Sparkles, X } from "lucide-react";
import Link from "next/link";

type MarketingLink = readonly [id: string, label: string];

export function MarketingBrand() {
  return <Link className="pf-brand" href="/" aria-label="NEXORA AI"><span><Sparkles /></span><b>NEXORA <i>AI</i></b></Link>;
}

export function MarketingHeader({
  isAr,
  navLinks,
  languageHref,
  menuId,
  createHrefOverride,
  createLabelOverride,
}: {
  isAr: boolean;
  navLinks: readonly MarketingLink[];
  languageHref: string;
  menuId: string;
  createHrefOverride?: string;
  createLabelOverride?: string;
}) {
  const [menuOpen, setMenuOpen] = useState(false);
  const [createLabel, setCreateLabel] = useState(createLabelOverride ?? (isAr ? "أنشئ وكيلك" : "Create your agent"));
  const createHref = createHrefOverride ?? (isAr ? "/create-agent" : "/en/create-agent");

  useEffect(() => {
    if (createLabelOverride) return;
    let active = true;
    fetch("/api/onboarding/entry", { cache: "no-store" }).then((response) => response.json() as Promise<{labelAr:string;labelEn:string}>).then((entry) => {
      if (active) setCreateLabel(isAr ? entry.labelAr : entry.labelEn);
    }).catch(() => undefined);
    return () => { active = false; };
  }, [createLabelOverride, isAr]);

  useEffect(() => {
    if (!menuOpen) return;
    const previousOverflow = document.body.style.overflow;
    const closeOnEscape = (event: KeyboardEvent) => {
      if (event.key === "Escape") setMenuOpen(false);
    };
    document.body.style.overflow = "hidden";
    window.addEventListener("keydown", closeOnEscape);
    return () => {
      document.body.style.overflow = previousOverflow;
      window.removeEventListener("keydown", closeOnEscape);
    };
  }, [menuOpen]);

  return <header className="pf-header">
    <div className="pf-container pf-header-inner">
      <MarketingBrand />
      <nav className="pf-desktop-nav" aria-label={isAr ? "تنقل الصفحة" : "Page navigation"}>{navLinks.map(([id, label]) => <a key={id} href={`#${id}`}>{label}</a>)}</nav>
      <div className="pf-header-actions">
        <a className="pf-lang" href={languageHref}><Languages />{isAr ? "EN" : "العربية"}</a>
        <a className="pf-login" href="/dashboard">{isAr ? "تسجيل الدخول" : "Sign in"}</a>
        <a className="pf-button primary" href={createHref}>{createLabel}</a>
        <button className="pf-menu-button" type="button" onClick={() => setMenuOpen(true)} aria-expanded={menuOpen} aria-controls={menuId} aria-label={isAr ? "فتح القائمة" : "Open menu"}><Menu /></button>
      </div>
    </div>
    {menuOpen && <div className="pf-mobile-backdrop" onClick={() => setMenuOpen(false)}>
      <nav id={menuId} className="pf-mobile-nav" dir={isAr ? "rtl" : "ltr"} onClick={(event) => event.stopPropagation()} aria-label={isAr ? "قائمة الجوال" : "Mobile menu"}>
        <div><MarketingBrand /><button type="button" onClick={() => setMenuOpen(false)} aria-label={isAr ? "إغلاق القائمة" : "Close menu"}><X /></button></div>
        {navLinks.map(([id, label]) => <a key={id} href={`#${id}`} onClick={() => setMenuOpen(false)}>{label}<ChevronDown /></a>)}
        <a className="pf-lang mobile" href={languageHref}><Languages />{isAr ? "English" : "العربية"}</a>
        <a className="pf-button primary mobile-cta" href={createHref}>{createLabel}</a>
      </nav>
    </div>}
  </header>;
}

export function MarketingFooter({ isAr, navLinks }: { isAr: boolean; navLinks: readonly MarketingLink[] }) {
  return <footer className="pf-footer"><div className="pf-container"><MarketingBrand /><p>{isAr ? "منصة مستقلة للموظفين والوكلاء الرقميين لجميع القطاعات." : "An independent digital employees and AI agents platform for every industry."}</p><nav aria-label={isAr ? "روابط التذييل" : "Footer links"}>{navLinks.map(([id, label]) => <a href={`#${id}`} key={id}>{label}</a>)}</nav><small>© 2026 NEXORA AI</small></div></footer>;
}