import { useEffect, useState } from "react";
import { Link, useRouterState } from "@tanstack/react-router";
import { Menu, X } from "lucide-react";
import { Logo } from "@/components/site/logo";
import { FIRM, NAV } from "@/lib/content";
import { cn } from "@/lib/utils";

export function Header() {
  const pathname = useRouterState({ select: (s) => s.location.pathname });
  const isHome = pathname === "/";
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);

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

  useEffect(() => {
    setOpen(false);
  }, [pathname]);

  useEffect(() => {
    document.body.style.overflow = open ? "hidden" : "";
    return () => {
      document.body.style.overflow = "";
    };
  }, [open]);

  const solid = !isHome || scrolled || open;

  return (
    <>
      <header
        className={cn(
          "fixed inset-x-0 top-0 z-40 border-b",
          "transition-[background-color,border-color,box-shadow] duration-250 ease-[cubic-bezier(0.22,1,0.36,1)]",
          solid
            ? "border-line bg-ink/95 shadow-[0_1px_0_0_rgba(243,239,230,0.04)]"
            : "border-transparent bg-transparent",
        )}
      >
        <div className="site-wrap flex h-16 items-center justify-between md:h-[4.5rem]">
          <Logo tone="light" />
          <nav className="hidden items-center gap-8 md:flex" aria-label="Primary">
            {NAV.map((item) => {
              const active =
                pathname === item.to || pathname.startsWith(`${item.to}/`);
              return (
                <Link
                  key={item.to}
                  to={item.to}
                  className={cn(
                    "relative py-2 text-[0.78rem] font-semibold tracking-[0.18em] uppercase no-underline",
                    "transition-colors duration-150 ease-out",
                    active ? "text-fg" : "text-muted hover:text-fg",
                  )}
                >
                  {item.label}
                  <span
                    className={cn(
                      "absolute inset-x-0 -bottom-0.5 h-px bg-steel transition-opacity duration-150",
                      active ? "opacity-100" : "opacity-0",
                    )}
                  />
                </Link>
              );
            })}
            <Link
              to="/contact"
              className="inline-flex min-h-11 items-center bg-fg px-4 text-[0.72rem] font-semibold tracking-[0.16em] text-ink uppercase no-underline transition-[background-color,scale] duration-150 ease-out hover:bg-paper-deep active:scale-[0.96]"
            >
              Enquire
            </Link>
          </nav>
          <button
            type="button"
            className="inline-flex size-11 items-center justify-center text-fg md:hidden"
            aria-label={open ? "Close menu" : "Open menu"}
            aria-expanded={open}
            onClick={() => setOpen((v) => !v)}
          >
            {open ? <X className="size-5" strokeWidth={1.5} /> : <Menu className="size-5" strokeWidth={1.5} />}
          </button>
        </div>
      </header>

      <div
        className={cn(
          "fixed inset-0 z-30 bg-ink md:hidden",
          "transition-opacity duration-250 ease-[cubic-bezier(0.22,1,0.36,1)]",
          open ? "pointer-events-auto opacity-100" : "pointer-events-none opacity-0",
        )}
        aria-hidden={!open}
      >
        <nav
          className="flex h-full flex-col justify-between px-6 pb-10 pt-24"
          aria-label="Mobile"
        >
          <ul className="flex flex-col gap-1">
            {NAV.map((item) => (
              <li key={item.to}>
                <Link
                  to={item.to}
                  className="block py-3 font-display text-4xl font-medium text-fg no-underline"
                >
                  {item.label}
                </Link>
              </li>
            ))}
          </ul>
          <p className="label-kicker text-subtle">
            {FIRM.legal} · Singapore
          </p>
        </nav>
      </div>
    </>
  );
}
