import { useEffect, useRef, useState } from "react";
import { Link, useRouterState } from "@tanstack/react-router";
import { ChevronDown, Globe, Leaf, Menu, X } from "lucide-react";
import { Button } from "@/components/ui/button";
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuLabel,
  DropdownMenuRadioGroup,
  DropdownMenuRadioItem,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu";
import { Sheet, SheetContent, SheetHeader, SheetTitle, SheetTrigger } from "@/components/ui/sheet";
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "@/components/ui/accordion";
import { NAV } from "@/data/site";
import { LANGUAGES, useLang, type Lang } from "@/lib/i18n";
import { SiteSearch } from "./SiteSearch";

function Logo() {
  return (
    <Link
      to="/"
      className="flex shrink-0 items-center rounded-lg p-0.5 sm:p-1 transition-transform hover:scale-[1.02] focus-visible:outline-none"
      aria-label="Seed Co - The African Seed Company"
    >
      <img
        src="/zw-seedco-logo.png"
        alt="Seed Co - The African Seed Company"
        className="h-10 sm:h-12 md:h-13 2xl:h-15 w-auto object-contain drop-shadow-xs"
      />
    </Link>
  );
}

function LanguagePicker({ className = "" }: { className?: string }) {
  const { lang, setLang, t } = useLang();
  return (
    <DropdownMenu>
      <DropdownMenuTrigger asChild>
        <Button
          variant="ghost"
          size="sm"
          aria-label={`${t("language")}: ${lang}`}
          className={`h-9 sm:h-10 gap-1.5 px-2.5 2xl:px-3 text-foreground hover:bg-white/50 hover:text-foreground dark:text-white dark:hover:bg-white/10 ${className}`}
        >
          <Globe aria-hidden="true" className="size-4" />
          <span className="text-xs font-semibold">{lang}</span>
          <ChevronDown aria-hidden="true" className="size-3 opacity-70" />
        </Button>
      </DropdownMenuTrigger>
      <DropdownMenuContent align="end" className="bg-white/90 backdrop-blur-xl border border-white/50 shadow-lift">
        <DropdownMenuLabel>{t("language")}</DropdownMenuLabel>
        <DropdownMenuRadioGroup value={lang} onValueChange={(v) => setLang(v as Lang)}>
          {LANGUAGES.map((l) => (
            <DropdownMenuRadioItem key={l.code} value={l.code}>
              {l.code} | {l.label}
            </DropdownMenuRadioItem>
          ))}
        </DropdownMenuRadioGroup>
      </DropdownMenuContent>
    </DropdownMenu>
  );
}

export function Header() {
  const { t } = useLang();
  const [openMenu, setOpenMenu] = useState<string | null>(null);
  const [mobileOpen, setMobileOpen] = useState(false);
  const closeTimeoutRef = useRef<ReturnType<typeof setTimeout> | null>(null);
  const headerRef = useRef<HTMLDivElement | null>(null);
  const pathname = useRouterState({ select: (s) => s.location.pathname });

  const handleMouseEnter = (label: string) => {
    if (closeTimeoutRef.current) {
      clearTimeout(closeTimeoutRef.current);
      closeTimeoutRef.current = null;
    }
    setOpenMenu(label);
  };

  const handleMouseLeave = () => {
    if (closeTimeoutRef.current) {
      clearTimeout(closeTimeoutRef.current);
    }
    closeTimeoutRef.current = setTimeout(() => {
      setOpenMenu(null);
    }, 220);
  };

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

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpenMenu(null);
    };
    const onClickOutside = (e: MouseEvent) => {
      if (headerRef.current && !headerRef.current.contains(e.target as Node)) {
        setOpenMenu(null);
      }
    };
    document.addEventListener("keydown", onKey);
    document.addEventListener("mousedown", onClickOutside);
    return () => {
      document.removeEventListener("keydown", onKey);
      document.removeEventListener("mousedown", onClickOutside);
      if (closeTimeoutRef.current) clearTimeout(closeTimeoutRef.current);
    };
  }, []);

  const isActive = (to: string) => (to === "/" ? pathname === "/" : pathname.startsWith(to));

  return (
    <header className="sticky top-0 z-50 transition-all">
      {/* utility strip */}
      <div className="hidden border-b border-black/10 bg-[#009F4F]/90 backdrop-blur-md text-white lg:block">
        <div className="mx-auto flex h-8 w-full max-w-[92rem] items-center justify-end gap-6 px-4 sm:px-6 lg:px-8 text-xs font-semibold text-white">
          <Link to="/countries" className="rounded transition-colors hover:text-white/80 hover:underline">
            Online shops
          </Link>
          <Link to="/investors" className="rounded transition-colors hover:text-white/80 hover:underline">
            Investors
          </Link>
          <Link to="/media" className="rounded transition-colors hover:text-white/80 hover:underline">
            Newsroom
          </Link>
        </div>
      </div>

      {/* Glass main navigation bar */}
      <div ref={headerRef} className="border-b border-white/30 bg-white/40 text-foreground shadow-[0_8px_32px_0_rgba(0,0,0,0.06)] backdrop-blur-2xl backdrop-saturate-150 transition-all dark:border-white/10 dark:bg-neutral-950/40 dark:text-white">
        <div className="relative mx-auto flex h-18 sm:h-20 lg:h-[5.25rem] 2xl:h-24 w-full max-w-[92rem] items-center justify-between gap-3 px-4 sm:px-6 lg:px-8 2xl:gap-6">
          <Logo />

          <nav aria-label="Main" className="mx-auto hidden xl:block">
            <ul className="flex items-center gap-1 2xl:gap-2">
              {NAV.map((item) => {
                const hasMenu = Boolean(item.groups);
                const open = openMenu === item.label;
                return (
                  <li
                    key={item.label}
                    onMouseEnter={() => hasMenu && handleMouseEnter(item.label)}
                    onMouseLeave={() => hasMenu && handleMouseLeave()}
                  >
                    {hasMenu ? (
                      <button
                        type="button"
                        aria-expanded={open}
                        aria-haspopup="true"
                        onFocus={() => handleMouseEnter(item.label)}
                        onClick={() => setOpenMenu(open ? null : item.label)}
                        className={`flex items-center gap-1.5 whitespace-nowrap rounded-lg px-2.5 py-2 text-[0.84rem] 2xl:px-3.5 2xl:py-2.5 2xl:text-[0.9375rem] font-medium transition-all hover:bg-white/60 hover:shadow-xs hover:text-foreground dark:hover:bg-white/10 ${
                          isActive(item.to) ? "font-bold text-primary bg-white/50 shadow-xs border border-white/40" : "text-foreground/85 dark:text-white/85"
                        }`}
                      >
                        {item.label}
                        <ChevronDown aria-hidden="true" className={`size-3.5 2xl:size-4 opacity-70 transition-transform ${open ? "rotate-180" : ""}`} />
                      </button>
                    ) : (
                      <Link
                        to={item.to}
                        className={`block whitespace-nowrap rounded-lg px-2.5 py-2 text-[0.84rem] 2xl:px-3.5 2xl:py-2.5 2xl:text-[0.9375rem] font-medium transition-all hover:bg-white/60 hover:shadow-xs hover:text-foreground dark:hover:bg-white/10 ${
                          isActive(item.to) ? "font-bold text-primary bg-white/50 shadow-xs border border-white/40" : "text-foreground/85 dark:text-white/85"
                        }`}
                      >
                        {item.label}
                      </Link>
                    )}

                    {hasMenu && open && (
                      <div
                        onMouseEnter={() => handleMouseEnter(item.label)}
                        onMouseLeave={handleMouseLeave}
                        className="absolute left-1/2 top-full z-50 w-[58rem] max-w-[calc(100vw-2rem)] -translate-x-1/2 pt-2 before:absolute before:-top-4 before:left-0 before:right-0 before:h-4 before:content-['']"
                      >
                        <div className="grid gap-6 rounded-2xl border border-black/10 bg-white p-7 text-popover-foreground shadow-[0_25px_70px_rgba(0,0,0,0.22)] dark:border-white/15 dark:bg-neutral-900 md:grid-cols-4">
                          {item.groups!.map((group) => (
                            <div key={group.heading}>
                              <p className="eyebrow text-[#FF1B2A]">{group.heading}</p>
                              <ul className="mt-3 space-y-2.5">
                                {group.links.map((link) => (
                                  <li key={link.label}>
                                    <Link
                                      to={link.to}
                                      className="block rounded-md px-2 py-1.5 -mx-2 transition-colors hover:bg-black/5 dark:hover:bg-white/5"
                                    >
                                      <span className="block text-sm font-semibold">{link.label}</span>
                                      {link.blurb && (
                                        <span className="mt-0.5 block text-xs leading-snug text-muted-foreground">
                                          {link.blurb}
                                        </span>
                                      )}
                                    </Link>
                                  </li>
                                ))}
                              </ul>
                            </div>
                          ))}
                          {item.feature && (
                            <div
                              className={`relative flex flex-col justify-between overflow-hidden rounded-xl bg-gradient-to-br from-[#008f47] via-[#009F4F] to-[#007338] p-5 text-white shadow-md ${
                                item.groups!.length === 2 ? "md:col-span-2" : item.groups!.length === 1 ? "md:col-span-3" : ""
                              }`}
                            >
                              {/* Ambient illumination */}
                              <div aria-hidden="true" className="pointer-events-none absolute -right-8 -top-8 size-32 rounded-full bg-white/15 blur-xl" />

                              <div className="relative z-10 flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4 h-full">
                                <div className="flex-1 flex flex-col justify-between h-full">
                                  <div>
                                    <p className="font-display text-base font-bold text-white leading-snug">{item.feature.title}</p>
                                    <p className="mt-1.5 text-xs leading-relaxed text-white/90">{item.feature.body}</p>
                                  </div>
                                  <Link
                                    to={item.feature.to}
                                    className="mt-4 inline-block text-xs font-bold text-white underline underline-offset-4 hover:text-white/80"
                                  >
                                    {item.feature.cta} →
                                  </Link>
                                </div>

                                {item.feature.image && (
                                  <div className="shrink-0 flex items-center justify-center self-center sm:self-auto">
                                    <img
                                      src={item.feature.image}
                                      alt="Seed Co Emblem"
                                      aria-hidden="true"
                                      className="h-24 sm:h-28 w-auto object-contain drop-shadow-md brightness-100"
                                    />
                                  </div>
                                )}
                              </div>
                            </div>
                          )}
                        </div>
                      </div>
                    )}
                  </li>
                );
              })}
            </ul>
          </nav>

          <div className="flex shrink-0 items-center gap-1.5 sm:gap-2">
            <SiteSearch />
            <div className="hidden sm:block">
              <LanguagePicker />
            </div>
            <Button asChild variant="harvest" size="sm" className="hidden sm:inline-flex h-10 2xl:h-11 px-4 2xl:px-6 text-xs 2xl:text-sm font-bold shadow-md hover:shadow-lg transition-all whitespace-nowrap">
              <Link to="/contact">{t("contact")}</Link>
            </Button>

            <Sheet open={mobileOpen} onOpenChange={setMobileOpen}>
              <SheetTrigger asChild>
                <Button
                  variant="ghost"
                  size="icon"
                  aria-label={t("menu")}
                  className="xl:hidden h-10 w-10 sm:h-11 sm:w-11 text-foreground hover:bg-white/50 hover:text-foreground dark:text-white dark:hover:bg-white/10"
                >
                  {mobileOpen ? <X aria-hidden="true" /> : <Menu aria-hidden="true" />}
                </Button>
              </SheetTrigger>
              <SheetContent side="right" className="w-[min(22rem,90vw)] overflow-y-auto">
                <SheetHeader className="text-left pb-4 border-b">
                  <SheetTitle className="text-base font-bold">Seed Co Group</SheetTitle>
                </SheetHeader>

                <div className="mt-4 flex items-center justify-between px-1 sm:hidden">
                  <span className="text-xs font-semibold uppercase tracking-wider text-muted-foreground">{t("language")}</span>
                  <LanguagePicker />
                </div>

                <nav aria-label="Mobile" className="mt-4 px-1 pb-10">
                  <Accordion type="multiple">
                    {NAV.map((item) =>
                      item.groups ? (
                        <AccordionItem key={item.label} value={item.label}>
                          <AccordionTrigger className="text-sm font-semibold py-3">{item.label}</AccordionTrigger>
                          <AccordionContent>
                            <ul className="space-y-1 pl-1">
                              <li>
                                <Link to={item.to} className="block rounded px-2 py-1.5 text-sm font-medium text-primary">
                                  {item.label} overview
                                </Link>
                              </li>
                              {item.groups.flatMap((g) => g.links).map((link) => (
                                <li key={`${item.label}-${link.label}`}>
                                  <Link to={link.to} className="block rounded px-2 py-1.5 text-sm text-muted-foreground hover:text-foreground">
                                    {link.label}
                                  </Link>
                                </li>
                              ))}
                            </ul>
                          </AccordionContent>
                        </AccordionItem>
                      ) : (
                        <div key={item.label} className="border-b">
                          <Link to={item.to} className="block py-3 text-sm font-semibold">
                            {item.label}
                          </Link>
                        </div>
                      ),
                    )}
                  </Accordion>
                  <Button asChild variant="harvest" className="mt-6 w-full shadow-md font-bold">
                    <Link to="/contact">{t("contact")}</Link>
                  </Button>
                </nav>
              </SheetContent>
            </Sheet>
          </div>
        </div>
      </div>
    </header>
  );
}