"use client";
import Link from "next/link";
import { usePathname } from "next/navigation";
import { useEffect, useState } from "react";
import { IconClose, IconMenu } from "@/components/Icons";

/** Admin navigation: vertical list on desktop; on mobile a compact button opening a drawer. */
export function AdminNav({
  items,
  mobileOnly = false,
}: {
  items: Array<[string, string]>;
  mobileOnly?: boolean;
}) {
  const pathname = usePathname();
  const [open, setOpen] = useState(false);
  // biome-ignore lint/correctness/useExhaustiveDependencies: close on navigation
  useEffect(() => setOpen(false), [pathname]);
  useEffect(() => {
    if (!open) return;
    const onKey = (e: KeyboardEvent) => e.key === "Escape" && setOpen(false);
    document.addEventListener("keydown", onKey);
    const prev = document.body.style.overflow;
    document.body.style.overflow = "hidden";
    return () => {
      document.removeEventListener("keydown", onKey);
      document.body.style.overflow = prev;
    };
  }, [open]);
  const isCurrent = (href: string) => (href === "/admin" ? pathname === "/admin" : pathname.startsWith(href));
  const list = (
    <nav aria-label="Admin" className="flex flex-col gap-0.5 px-2 pb-2">
      {items.map(([href, label]) => (
        <Link
          key={href}
          href={href}
          aria-current={isCurrent(href) ? "page" : undefined}
          className="nav-link flex min-h-10 items-center text-sm md:min-h-9"
        >
          {label}
        </Link>
      ))}
    </nav>
  );
  if (!mobileOnly) return list;
  return (
    <div className="md:hidden">
      <button
        type="button"
        className="btn-icon"
        aria-label={open ? "Close admin menu" : "Open admin menu"}
        aria-expanded={open}
        aria-controls="admin-drawer"
        onClick={() => setOpen((v) => !v)}
      >
        {open ? <IconClose /> : <IconMenu />}
      </button>
      {open && (
        <>
          <button
            type="button"
            className="drawer-backdrop"
            aria-label="Close admin menu"
            onClick={() => setOpen(false)}
          />
          <div
            id="admin-drawer"
            role="dialog"
            aria-modal="true"
            aria-label="Admin navigation"
            className="drawer-panel"
          >
            <div className="flex items-center justify-between px-2">
              <span className="eyebrow">Admin</span>
              <button
                type="button"
                className="btn-icon"
                aria-label="Close admin menu"
                onClick={() => setOpen(false)}
              >
                <IconClose />
              </button>
            </div>
            <div className="mt-3">{list}</div>
            <div className="mt-4 px-2">
              <Link href="/" className="text-xs">
                ← Public site
              </Link>
            </div>
          </div>
        </>
      )}
    </div>
  );
}