'use client';
import { ChevronDown } from 'lucide-react';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import { useEffect, useId, useRef, useState } from 'react';
import { t } from '@/i18n';
import { cn } from '@/lib/cn';

interface Item {
  href: string;
  label: string;
  group: 'explore' | 'reference';
}

/** "More ▾" disclosure in the desktop header: two columns (Explore · Reference), keyboard + outside-click closing. */
export function MoreMenu({ items }: { items: Item[] }) {
  const [open, setOpen] = useState(false);
  const id = useId();
  const ref = useRef<HTMLDivElement>(null);
  const pathname = usePathname();
  const active = items.some((it) => pathname === it.href || pathname.startsWith(`${it.href}/`));

  useEffect(() => {
    setOpen(false);
  }, [pathname]);
  useEffect(() => {
    if (!open) return;
    const onDoc = (e: PointerEvent) => {
      if (!ref.current?.contains(e.target as Node)) setOpen(false);
    };
    const onKey = (e: KeyboardEvent) => {
      if (e.key === 'Escape') setOpen(false);
    };
    document.addEventListener('pointerdown', onDoc);
    document.addEventListener('keydown', onKey);
    return () => {
      document.removeEventListener('pointerdown', onDoc);
      document.removeEventListener('keydown', onKey);
    };
  }, [open]);

  const groups: Array<{ key: Item['group']; label: string }> = [
    { key: 'explore', label: t('site.footer.explore') },
    { key: 'reference', label: t('site.footer.reference') },
  ];
  return (
    <div ref={ref} className="relative">
      <button type="button" onClick={() => setOpen((o) => !o)} aria-expanded={open} aria-controls={id} aria-haspopup="menu" className={cn('inline-flex h-9 items-center gap-1 rounded-sm px-2.5 text-sm', active ? 'font-medium text-ink' : 'text-ink-2 hover:bg-surface-2 hover:text-ink')}>
        {t('nav.more')}
        <ChevronDown size={14} aria-hidden className={cn('transition-transform', open && 'rotate-180')} />
      </button>
      {open ? (
        <div id={id} role="menu" aria-label={t('nav.moreMenu')} className="animate-fade absolute left-0 top-full z-40 mt-1 grid w-[26rem] grid-cols-2 gap-x-6 rounded-sm border border-rule bg-surface p-3 shadow-pop">
          {groups.map((g) => (
            <div key={g.key}>
              <div className="eyebrow mb-1 px-2">{g.label}</div>
              <ul>
                {items
                  .filter((it) => it.group === g.key)
                  .map((it) => {
                    const cur = pathname === it.href || pathname.startsWith(`${it.href}/`);
                    return (
                      <li key={it.href}>
                        <Link href={it.href} role="menuitem" aria-current={cur ? 'page' : undefined} className={cn('flex h-9 items-center rounded-sm px-2 text-sm', cur ? 'font-medium text-ink' : 'text-ink-2 hover:bg-surface-2 hover:text-ink')}>
                          {it.label}
                        </Link>
                      </li>
                    );
                  })}
              </ul>
            </div>
          ))}
        </div>
      ) : null}
    </div>
  );
}