import { Link } from "@tanstack/react-router";
import { useEffect, useState } from "react";
import { Logo } from "@/components/logo";
import { menuItems, navItems, pathBlurb, patreonUrl } from "@/lib/content";
import { cn } from "@/lib/utils";

export function SiteHeader() {
  const [open, setOpen] = useState(false);
  const extrasStart = menuItems.findIndex((m) => !m.n);

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

  useEffect(() => {
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    window.addEventListener("keydown", onKey);
    return () => window.removeEventListener("keydown", onKey);
  }, []);

  return (
    <>
      <header className="header-scrim pointer-events-none fixed inset-x-0 top-0 z-50">
        <div className="pointer-events-auto flex h-[72px] items-center gap-6 px-5 sm:h-[88px] sm:px-8 lg:gap-8 lg:px-10">
          <Logo />
          <nav
            aria-label="Primary"
            className="hidden min-w-0 flex-1 items-center gap-4 overflow-hidden xl:flex 2xl:gap-6"
          >
            {navItems.map((item) => (
              <Link
                key={item.href}
                to={item.href}
                title={item.hint}
                className="group relative shrink-0 py-2 font-display text-nav font-bold uppercase tracking-nav text-fg/90 transition-opacity duration-[var(--motion-fast)] hover:opacity-100"
              >
                {item.label}
                <span className="absolute inset-x-0 -bottom-0.5 h-px origin-left scale-x-0 bg-fg transition-transform duration-[var(--motion-medium)] ease-[var(--ease-out)] group-hover:scale-x-100" />
              </Link>
            ))}
          </nav>
          <div className="ml-auto flex items-center gap-5">
            <a
              href={patreonUrl}
              className="hidden font-display text-nav font-bold uppercase tracking-nav text-fg/90 hover:opacity-80 sm:inline"
            >
              Donate
            </a>
            <button
              type="button"
              aria-label={open ? "Close menu" : "Open menu"}
              aria-expanded={open}
              onClick={() => setOpen((v) => !v)}
              className="relative grid size-11 place-items-center"
            >
              <span className="sr-only">{open ? "Close" : "Menu"}</span>
              <span
                className="absolute block h-px w-5 bg-fg"
                style={{
                  transform: open ? "rotate(45deg)" : "translateY(-6px)",
                  transition: "transform 150ms cubic-bezier(0.23, 1, 0.32, 1)",
                }}
              />
              <span
                className="absolute block h-px w-5 bg-fg"
                style={{
                  opacity: open ? 0 : 1,
                  transition: "opacity 150ms cubic-bezier(0.23, 1, 0.32, 1)",
                }}
              />
              <span
                className="absolute block h-px w-5 bg-fg"
                style={{
                  transform: open ? "rotate(-45deg)" : "translateY(6px)",
                  transition: "transform 150ms cubic-bezier(0.23, 1, 0.32, 1)",
                }}
              />
            </button>
          </div>
        </div>
      </header>

      <div
        className={cn(
          "fixed inset-0 z-40 bg-bg/70",
          open ? "opacity-100" : "pointer-events-none opacity-0",
        )}
        style={{ transition: "opacity 400ms cubic-bezier(0.22, 1, 0.36, 1)" }}
        onClick={() => setOpen(false)}
      />
      <aside
        className="fixed inset-y-0 right-0 z-50 flex w-[min(100%,24rem)] flex-col bg-bg px-10 pt-28 pb-12"
        style={{
          transform: open ? "translateX(0)" : "translateX(100%)",
          transition: "transform 400ms cubic-bezier(0.22, 1, 0.36, 1)",
          pointerEvents: open ? "auto" : "none",
        }}
        aria-hidden={!open}
        inert={!open}
      >
        <p className="mb-2 font-display text-xs uppercase tracking-wide text-dim">
          The path
        </p>
        <p className="mb-6 max-w-[16rem] text-sm leading-body text-muted">{pathBlurb}</p>
        <nav aria-label="Menu" className="flex flex-1 flex-col gap-1 overflow-y-auto">
          {menuItems.map((item, i) => (
            <Link
              key={`${item.href}-${item.label}`}
              to={item.href}
              onClick={() => setOpen(false)}
              className={cn(
                "flex items-baseline gap-4 font-display font-semibold uppercase tracking-wide text-fg transition-colors duration-[var(--motion-fast)] hover:text-muted",
                item.n ? "text-2xl" : "mt-1 text-lg text-muted",
                !item.n && extrasStart === i && "mt-6 border-t border-line pt-5",
              )}
              style={{
                opacity: open ? 1 : 0,
                transform: open ? "translateX(0)" : "translateX(12px)",
                transition: `opacity 400ms cubic-bezier(0.22, 1, 0.36, 1) ${80 + i * 30}ms, transform 400ms cubic-bezier(0.22, 1, 0.36, 1) ${80 + i * 30}ms`,
              }}
            >
              {item.n ? (
                <span className="w-8 shrink-0 font-display text-sm tracking-wide text-dim">
                  {item.n}
                </span>
              ) : null}
              <span className="flex min-w-0 flex-col">
                <span>{item.label}</span>
                {item.hint ? (
                  <span className="mt-0.5 font-sans text-[11px] font-normal normal-case tracking-normal text-dim">
                    {item.hint}
                  </span>
                ) : null}
              </span>
            </Link>
          ))}
        </nav>
        <a
          href={patreonUrl}
          className="mt-8 font-display text-xs uppercase tracking-wide text-fg"
        >
          Donate
        </a>
        <p className="mt-3 font-display text-xs uppercase tracking-wide text-dim">
          Los Angeles · Public benefit
        </p>
      </aside>
    </>
  );
}