"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { type ReactNode, useEffect, useRef, useState } from "react";
import { IconArrow, IconClose, IconMenu } from "./Icons";

/** Client shell for the header: scroll shadow, current-page marking and the accessible mobile drawer. */
export function HeaderChrome({
  links,
  children,
}: {
  links: Array<{ href: string; label: string }>;
  children: ReactNode;
}) {
  const [scrolled, setScrolled] = useState(false);
  const [open, setOpen] = useState(false);
  const pathname = usePathname();
  const panel = useRef<HTMLDivElement>(null);
  const opener = useRef<HTMLButtonElement>(null);

  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 4);
    onScroll();
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  // biome-ignore lint/correctness/useExhaustiveDependencies: close the drawer on navigation
  useEffect(() => {
    setOpen(false);
  }, [pathname]);
  useEffect(() => {
    if (!open) return;
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    const first = panel.current?.querySelector<HTMLElement>("a,button");
    first?.focus();
    const onKey = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
      if (e.key === "Tab" && panel.current) {
        const f = [
          ...panel.current.querySelectorAll<HTMLElement>("a,button,input,[tabindex]:not([tabindex='-1'])"),
        ];
        if (f.length === 0) return;
        const a = f[0]!;
        const b = f[f.length - 1]!;
        if (e.shiftKey && document.activeElement === a) {
          e.preventDefault();
          b.focus();
        } else if (!e.shiftKey && document.activeElement === b) {
          e.preventDefault();
          a.focus();
        }
      }
    };
    document.addEventListener("keydown", onKey);
    return () => {
      document.body.style.overflow = prev;
      document.removeEventListener("keydown", onKey);
      opener.current?.focus();
    };
  }, [open]);

  return (
    <header className="site-header" data-scrolled={scrolled}>
      <div className="relative">
        {children}
        <button
          ref={opener}
          type="button"
          className="btn-icon absolute right-[max(1rem,env(safe-area-inset-right))] top-1/2 -translate-y-1/2 lg:hidden"
          style={{ right: "calc(max(1rem, env(safe-area-inset-right)) + 5.5rem)" }}
          aria-label={open ? "Close menu" : "Open menu"}
          aria-expanded={open}
          aria-controls="mobile-nav"
          onClick={() => setOpen((v) => !v)}
        >
          {open ? <IconClose /> : <IconMenu />}
        </button>
      </div>
      {open && (
        <>
          <button
            type="button"
            className="drawer-backdrop lg:hidden"
            aria-label="Close menu"
            onClick={() => setOpen(false)}
          />
          <div
            ref={panel}
            id="mobile-nav"
            role="dialog"
            aria-modal="true"
            aria-label="Site navigation"
            className="drawer-panel lg:hidden"
          >
            <div className="flex items-center justify-between">
              <span className="eyebrow">Navigate</span>
              <button
                type="button"
                className="btn-icon"
                aria-label="Close menu"
                onClick={() => setOpen(false)}
              >
                <IconClose />
              </button>
            </div>
            <form action="/research" method="get" role="search" className="mt-4">
              <label htmlFor="drawer-q" className="sr-only">
                Search the library
              </label>
              <input
                id="drawer-q"
                name="q"
                type="search"
                placeholder="Search papers, keywords, IDs"
                className="input"
              />
            </form>
            <nav aria-label="Primary mobile" className="mt-4 flex flex-col">
              {links.map((l) => (
                <Link
                  key={l.href}
                  href={l.href}
                  aria-current={pathname === l.href ? "page" : undefined}
                  className="flex items-center justify-between border-b py-3.5 text-base no-underline hairline"
                >
                  <span>{l.label}</span>
                  <IconArrow size={16} className="subtle" />
                </Link>
              ))}
            </nav>
            <p className="subtle mt-6 text-xs leading-relaxed">
              AI-generated working papers; not formally peer reviewed. Research computed on MacLustr.
            </p>
          </div>
        </>
      )}
    </header>
  );
}