"use client";

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

type Props = {
  label: string;
  href: string;
  children: ReactNode;
};

export function NavDropdown({ label, href, children }: Props) {
  const [open, setOpen] = useState(false);
  const containerRef = useRef<HTMLDivElement>(null);
  const triggerRef = useRef<HTMLAnchorElement>(null);

  useEffect(() => {
    if (!open) {
      return;
    }

    function onKeyDown(event: KeyboardEvent) {
      if (event.key === "Escape") {
        setOpen(false);
        triggerRef.current?.focus();
      }
    }

    function onClickOutside(event: globalThis.MouseEvent) {
      if (containerRef.current && !containerRef.current.contains(event.target as Node)) {
        setOpen(false);
      }
    }

    document.addEventListener("keydown", onKeyDown);
    document.addEventListener("mousedown", onClickOutside);
    return () => {
      document.removeEventListener("keydown", onKeyDown);
      document.removeEventListener("mousedown", onClickOutside);
    };
  }, [open]);

  const handleTriggerClick = (event: MouseEvent<HTMLAnchorElement>) => {
    // event.detail is 0 for keyboard-activated clicks (Enter on a link) and >=1 for
    // real pointer clicks. Mouse users already see the panel on hover, so let their
    // click navigate as before; keyboard users get the panel opened first instead.
    if (!open && event.detail === 0) {
      event.preventDefault();
      setOpen(true);
    }
  };

  return (
    <div
      ref={containerRef}
      className="group relative"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <Link
        ref={triggerRef}
        href={href}
        aria-haspopup="true"
        aria-expanded={open}
        onClick={handleTriggerClick}
        className="inline-flex items-center gap-1 rounded-full px-4 py-2 transition-all duration-200 hover:-translate-y-[1px] hover:bg-[var(--surface-2)] hover:text-[var(--foreground)]"
      >
        <span>{label}</span>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" className="h-3.5 w-3.5" aria-hidden="true">
          <path strokeLinecap="round" strokeLinejoin="round" d="m6 9 6 6 6-6" />
        </svg>
      </Link>

      <div
        role="menu"
        aria-label={label}
        className={`absolute left-0 top-full z-50 w-64 pt-2 transition duration-150 ${
          open
            ? "pointer-events-auto opacity-100"
            : "pointer-events-none opacity-0 group-hover:pointer-events-auto group-hover:opacity-100 group-focus-within:pointer-events-auto group-focus-within:opacity-100"
        }`}
      >
        <div className="translate-y-1 rounded-2xl border border-[#ffdede] bg-white p-2 shadow-[0_20px_40px_rgba(49,18,18,0.14)] transition duration-150 group-hover:translate-y-0 group-focus-within:translate-y-0">
          {children}
        </div>
      </div>
    </div>
  );
}