"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import { ArrowRight, Menu } from "lucide-react";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/ui/navigation-menu";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { LogoFull } from "@/components/logo";
import { ThemeToggle } from "@/components/theme-toggle";
import { Icon } from "@/lib/icons";
import { industriesMenu, solutionsMenu, primaryCta, primaryNav } from "@/content/nav";
import { cn } from "@/lib/utils";

function IndustriesMegaPanel() {
  return (
    <div className="w-[min(94vw,37.5rem)] flex flex-col">
      <div className="grid grid-cols-2 gap-2 p-4">
        {industriesMenu.map((item) => (
          <NavigationMenuLink asChild key={item.href}>
            <Link
              href={item.href}
              className="group flex items-start gap-3 rounded-xl border border-transparent p-2.5 transition-all duration-200 hover:border-border hover:bg-muted"
            >
              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-[#4FDAF1]/10 text-[#67B7E7] transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
                {item.icon ? <Icon name={item.icon} className="size-4" /> : null}
              </span>
              <span className="flex flex-col min-w-0">
                <span className="text-[13px] font-semibold text-foreground">
                  {item.label}
                </span>
                <span className="mt-0.5 text-xs leading-snug text-muted-foreground">
                  {item.description}
                </span>
              </span>
            </Link>
          </NavigationMenuLink>
        ))}
      </div>
      <div className="flex items-center justify-between rounded-b-2xl border-t border-border bg-muted/50 px-5 py-2.5 text-xs text-muted-foreground">
        <span>The same agents, tuned to your vertical.</span>
        <NavigationMenuLink asChild>
          <Link
            href="/industries"
            className="ml-3 flex shrink-0 items-center gap-1 font-semibold text-foreground hover:underline"
          >
            <span>All industries</span>
            <ArrowRight className="size-3" />
          </Link>
        </NavigationMenuLink>
      </div>
    </div>
  );
}

function SolutionsMegaPanel() {
  return (
    <div className="w-[min(94vw,26rem)] flex flex-col">
      <div className="flex flex-col gap-1.5 p-4">
        {solutionsMenu.map((item) => (
          <NavigationMenuLink asChild key={item.href}>
            <Link
              href={item.href}
              className="group flex items-start gap-3 rounded-xl border border-transparent p-2.5 transition-all duration-200 hover:border-border hover:bg-muted"
            >
              <span className="flex size-9 shrink-0 items-center justify-center rounded-lg bg-[#4FDAF1]/10 text-[#67B7E7] transition-colors group-hover:bg-primary group-hover:text-primary-foreground">
                {item.icon ? <Icon name={item.icon} className="size-4" /> : null}
              </span>
              <span className="flex flex-col min-w-0">
                <span className="text-[13px] font-semibold text-foreground">
                  {item.label}
                </span>
                <span className="mt-0.5 text-xs leading-snug text-muted-foreground">
                  {item.description}
                </span>
              </span>
            </Link>
          </NavigationMenuLink>
        ))}
      </div>
      <div className="flex items-center justify-between rounded-b-2xl border-t border-border bg-muted/50 px-5 py-2.5 text-xs text-muted-foreground">
        <span>Voice, WhatsApp, web — done for you.</span>
        <NavigationMenuLink asChild>
          <Link
            href="/#solutions"
            className="ml-3 flex shrink-0 items-center gap-1 font-semibold text-foreground hover:underline"
          >
            <span>All solutions</span>
            <ArrowRight className="size-3" />
          </Link>
        </NavigationMenuLink>
      </div>
    </div>
  );
}

function MobileMenu() {
  const [open, setOpen] = useState(false);

  return (
    <Sheet open={open} onOpenChange={setOpen}>
      <SheetTrigger asChild>
        <Button
          variant="ghost"
          size="icon"
          className="size-11 lg:hidden"
          aria-label="Open menu"
        >
          <Menu className="size-5" strokeWidth={1.5} />
        </Button>
      </SheetTrigger>
      <SheetContent side="right" className="w-full max-w-sm overflow-y-auto">
        <SheetHeader>
          <SheetTitle className="text-left">
            <LogoFull />
          </SheetTitle>
        </SheetHeader>
        <nav className="flex flex-col gap-6 px-4 pb-8 pt-4" aria-label="Mobile">
          <div className="flex flex-col gap-1">
            <p className="mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Solutions
            </p>
            {solutionsMenu.map((item) => (
              <SheetClose asChild key={item.href}>
                <Link
                  href={item.href}
                  className="flex items-center gap-2.5 py-1.5 text-sm font-medium text-foreground"
                >
                  <span className="flex size-7 items-center justify-center rounded-lg bg-[#4FDAF1]/10 text-[#67B7E7]">
                    {item.icon ? <Icon name={item.icon} className="size-4" /> : null}
                  </span>
                  <span>{item.label}</span>
                </Link>
              </SheetClose>
            ))}
            <SheetClose asChild>
              <Link href="/#solutions" className="py-1.5 text-sm font-semibold text-foreground">
                All solutions →
              </Link>
            </SheetClose>
          </div>

          <div className="flex flex-col gap-1 border-t border-border pt-4">
            <SheetClose asChild>
              <Link href="/blog" className="py-2 text-sm font-medium text-foreground">
                Blog
              </Link>
            </SheetClose>
            <SheetClose asChild>
              <Link href="/about" className="py-2 text-sm font-medium text-foreground">
                About
              </Link>
            </SheetClose>
            <SheetClose asChild>
              <Link href="/contact" className="py-2 text-sm font-medium text-foreground">
                Contact
              </Link>
            </SheetClose>
          </div>

          <div className="flex flex-col gap-1 border-t border-border pt-4">
            <p className="mb-1 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
              Industries
            </p>
            {industriesMenu.map((item) => (
              <SheetClose asChild key={item.href}>
                <Link
                  href={item.href}
                  className="flex items-center gap-2.5 py-1.5 text-sm font-medium text-foreground"
                >
                  <span className="flex size-7 items-center justify-center rounded-lg bg-[#4FDAF1]/10 text-[#67B7E7]">
                    {item.icon ? <Icon name={item.icon} className="size-4" /> : null}
                  </span>
                  <span>{item.label}</span>
                </Link>
              </SheetClose>
            ))}
            <SheetClose asChild>
              <Link href="/industries" className="py-1.5 text-sm font-semibold text-foreground">
                All industries →
              </Link>
            </SheetClose>
          </div>

          <div className="flex flex-col gap-3 border-t border-border pt-4">
            <div className="flex items-center justify-between">
              <span className="text-sm font-medium text-foreground">Theme</span>
              <ThemeToggle />
            </div>
            <SheetClose asChild>
              <Button asChild variant="brand" size="pill" className="w-full">
                <Link href={primaryCta.href}>{primaryCta.label}</Link>
              </Button>
            </SheetClose>
          </div>
        </nav>
      </SheetContent>
    </Sheet>
  );
}

export function GlobalHeader() {
  const [scrolled, setScrolled] = useState(false);
  const headerRef = useRef<HTMLElement>(null);
  const navRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 25);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

  // Dynamically measure rendered header height and sync --header-offset
  useEffect(() => {
    const el = navRef.current || headerRef.current;
    if (!el) return;

    const updateOffset = () => {
      const activeEl = navRef.current || headerRef.current;
      if (!activeEl) return;
      const rect = activeEl.getBoundingClientRect();
      const bottom = Math.round(rect.bottom > 0 ? rect.bottom : rect.height);
      document.documentElement.style.setProperty("--header-offset", `${Math.max(60, bottom)}px`);
    };

    updateOffset();
    const ro = new ResizeObserver(updateOffset);
    ro.observe(el);
    if (headerRef.current && headerRef.current !== el) {
      ro.observe(headerRef.current);
    }
    window.addEventListener("resize", updateOffset, { passive: true });

    return () => {
      ro.disconnect();
      window.removeEventListener("resize", updateOffset);
    };
  }, [scrolled]);

  return (
    <header
      ref={headerRef}
      data-global-header
      className={cn(
        "fixed inset-x-0 z-50 transition-all duration-500",
        scrolled
          ? "top-3.5 flex justify-center px-4 pointer-events-none"
          : "top-0 w-full border-b border-transparent bg-transparent",
      )}
    >
      <div
        ref={navRef}
        data-header-nav
        className={cn(
          "flex items-center justify-between transition-all duration-500",
          scrolled
            ? "pointer-events-auto w-full max-w-3xl rounded-full border border-border bg-background/85 px-4 py-2 shadow-lg backdrop-blur-xl supports-[backdrop-filter]:bg-background/80"
            : "mx-auto w-full max-w-6xl bg-transparent px-5 py-4 md:px-8",
        )}
      >
        <Link
          href="/"
          aria-label="Quto AI — home"
          className="shrink-0 transition-opacity hover:opacity-90"
        >
          <LogoFull />
        </Link>

        <div
          className={cn(
            "transition-all duration-300",
            scrolled ? "hidden" : "hidden lg:flex",
          )}
        >
          <NavigationMenu viewport={false}>
            <NavigationMenuList className="gap-1">
              {primaryNav.map((item) =>
                item.menu ? (
                  <NavigationMenuItem key={item.label}>
                    <NavigationMenuTrigger className="bg-transparent hover:bg-muted data-[state=open]:bg-muted">
                      {item.label}
                    </NavigationMenuTrigger>
                    <NavigationMenuContent className="left-1/2 -translate-x-1/2 rounded-2xl border border-border bg-background/95 p-0 shadow-2xl backdrop-blur-2xl">
                      {item.menu === "industries" ? <IndustriesMegaPanel /> : <SolutionsMegaPanel />}
                    </NavigationMenuContent>
                  </NavigationMenuItem>
                ) : (
                  <NavigationMenuItem key={item.label}>
                    <NavigationMenuLink
                      asChild
                      className={cn(
                        navigationMenuTriggerStyle(),
                        "bg-transparent hover:bg-muted",
                      )}
                    >
                      <Link href={item.href}>{item.label}</Link>
                    </NavigationMenuLink>
                  </NavigationMenuItem>
                ),
              )}
            </NavigationMenuList>
          </NavigationMenu>
        </div>

        <div className="flex items-center gap-2 sm:gap-2.5">
          <ThemeToggle className="hidden sm:inline-flex" />
          <Button
            asChild
            variant="brand"
            size="pill-sm"
            className={cn(
              "shadow-sm transition-all hover:scale-105 active:scale-95",
              scrolled && "scale-95 px-3.5 py-1 text-xs",
            )}
          >
            <Link href={primaryCta.href}>{primaryCta.label}</Link>
          </Button>
          <MobileMenu />
        </div>
      </div>
    </header>
  );
}