"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import type { NavLink } from "@/lib/types";

export default function NavItem({ item }: { item: NavLink }) {
  const [open, setOpen] = useState(false);
  const ref = useRef<HTMLDivElement>(null);

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

  if (!item.children) {
    return (
      <Link
        href={item.href}
        className="text-sm font-medium tracking-wide text-neutral-700 hover:text-accent-500 py-2"
      >
        {item.label}
      </Link>
    );
  }

  return (
    <div
      ref={ref}
      className="relative"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => setOpen(false)}
    >
      <div className="flex items-center gap-0.5">
        <Link
          href={item.href}
          className="text-sm font-medium tracking-wide text-neutral-700 hover:text-accent-500 py-2"
        >
          {item.label}
        </Link>
        <button
          type="button"
          aria-expanded={open}
          aria-label={`${open ? "Close" : "Open"} ${item.label} submenu`}
          onClick={() => setOpen((v) => !v)}
          className="p-1.5 -ml-0.5 text-neutral-400 hover:text-accent-500"
        >
          <svg
            width="10"
            height="10"
            viewBox="0 0 10 10"
            fill="none"
            className={`transition-transform ${open ? "rotate-180" : ""}`}
          >
            <path
              d="M1 3l4 4 4-4"
              stroke="currentColor"
              strokeWidth="1.5"
              strokeLinecap="round"
              strokeLinejoin="round"
            />
          </svg>
        </button>
      </div>
      {open ? (
        <div className="absolute left-0 top-full min-w-[280px] bg-white border border-neutral-200 rounded-lg shadow-lg py-2">
          {item.children.map((child) => (
            <Link
              key={child.href}
              href={child.href}
              onClick={() => setOpen(false)}
              className="block px-4 py-2 text-sm text-neutral-600 hover:bg-neutral-100 hover:text-neutral-900"
            >
              {child.label}
            </Link>
          ))}
        </div>
      ) : null}
    </div>
  );
}