"use client";

import Link from "next/link";
import { useEffect, useRef, useState } from "react";

// One nav entry that opens into several. Click (or Enter/Space) to expand,
// Escape or a click elsewhere to close; the items are real links, so the
// keyboard reaches every one of them and the URLs are unchanged.
//
// Native <details> would do most of this with no JS, but it cannot close on an
// outside click and it renders its own marker; this is small enough to own.
export default function NavGroup({
  label,
  items,
  active,
  on,
}: {
  label: string;
  items: { href: string; label: string }[];
  active: string;
  on: boolean;
}) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

  useEffect(() => {
    if (!open) return;
    const away = (e: MouseEvent) => {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    };
    const key = (e: KeyboardEvent) => {
      if (e.key === "Escape") setOpen(false);
    };
    document.addEventListener("mousedown", away);
    document.addEventListener("keydown", key);
    return () => {
      document.removeEventListener("mousedown", away);
      document.removeEventListener("keydown", key);
    };
  }, [open]);

  return (
    <div ref={ref} className="relative" data-nav-group={label}>
      <button
        type="button"
        aria-haspopup="menu"
        aria-expanded={open}
        aria-current={on ? "page" : undefined}
        onClick={() => setOpen((v) => !v)}
        className={`rounded px-2.5 py-1 text-sm ${
          on
            ? "bg-[var(--color-panel-2)] text-[var(--color-sel)]"
            : "text-[var(--color-dim)] hover:text-[var(--color-text)]"
        }`}
      >
        {label} <span aria-hidden="true">▸</span>
      </button>
      {open && (
        <div
          role="menu"
          className="absolute left-0 top-full z-20 mt-1 flex min-w-32 flex-col rounded border border-[var(--color-line)] bg-[var(--color-panel)] p-1 shadow-lg"
        >
          {items.map((it) => {
            const lit = it.label === active;
            return (
              <Link
                key={it.href}
                href={it.href}
                role="menuitem"
                aria-current={lit ? "page" : undefined}
                onClick={() => setOpen(false)}
                className={`rounded px-2.5 py-1 text-sm ${
                  lit
                    ? "bg-[var(--color-panel-2)] text-[var(--color-sel)]"
                    : "text-[var(--color-dim)] hover:text-[var(--color-text)]"
                }`}
              >
                {it.label}
              </Link>
            );
          })}
        </div>
      )}
    </div>
  );
}