"use client";

import Link from "next/link";
import { usePathname, useRouter } from "next/navigation";
import { ChevronDown } from "lucide-react";
import { useEffect, useRef, useState } from "react";
import { useAuth } from "@/context/AuthContext";
import { accountNav, displayFirstName } from "@/lib/account-nav";

export function AccountMenu() {
  const { customer, logout } = useAuth();
  const pathname = usePathname();
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [leaving, setLeaving] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    setOpen(false);
  }, [pathname]);

  useEffect(() => {
    if (!open) return;
    const onPointer = (event: MouseEvent) => {
      if (!rootRef.current?.contains(event.target as Node)) setOpen(false);
    };
    const onKey = (event: KeyboardEvent) => {
      if (event.key === "Escape") setOpen(false);
    };
    document.addEventListener("mousedown", onPointer);
    document.addEventListener("keydown", onKey);
    return () => {
      document.removeEventListener("mousedown", onPointer);
      document.removeEventListener("keydown", onKey);
    };
  }, [open]);

  if (!customer) return null;

  const name = displayFirstName(customer);

  const closeSession = async () => {
    if (leaving) return;
    setLeaving(true);
    try {
      await logout();
      setOpen(false);
      router.push("/account");
      router.refresh();
    } finally {
      setLeaving(false);
    }
  };

  return (
    <div
      ref={rootRef}
      className="relative"
      onMouseEnter={() => setOpen(true)}
      onMouseLeave={() => {
        if (!leaving) setOpen(false);
      }}
    >
      <button
        type="button"
        className="flex items-center gap-1 text-[11px] tracking-[0.14em] uppercase text-ot-ink"
        aria-expanded={open}
        aria-haspopup="menu"
        onClick={() => setOpen((v) => !v)}
      >
        <span className="underline underline-offset-[5px] decoration-ot-ink/80">
          Hola, {name}
        </span>
        <ChevronDown
          size={13}
          strokeWidth={1.75}
          className={`transition-transform ${open ? "rotate-180" : ""}`}
        />
      </button>

      {open && (
        <div className="absolute left-1/2 top-full z-50 w-[220px] -translate-x-1/2 pt-3">
          <div
            role="menu"
            className="relative border border-black/15 bg-white shadow-[0_10px_30px_rgba(0,0,0,0.08)]"
          >
            <span
              aria-hidden
              className="pointer-events-none absolute -top-2 left-1/2 h-3.5 w-3.5 -translate-x-1/2 rotate-45 border-l border-t border-black/15 bg-white"
            />
            {accountNav.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                role="menuitem"
                className="block border-b border-black/10 px-5 py-3 text-[13px] text-ot-ink hover:bg-ot-cream"
                onClick={() => setOpen(false)}
              >
                {item.label}
              </Link>
            ))}
            <button
              type="button"
              role="menuitem"
              disabled={leaving}
              className="block w-full px-5 py-3 text-left text-[13px] text-ot-ink hover:bg-ot-cream disabled:opacity-50"
              onClick={closeSession}
            >
              {leaving ? "Cerrando sesión…" : "Cerrar sesión"}
            </button>
          </div>
        </div>
      )}
    </div>
  );
}