"use client";

import { useEffect, useRef, useState } from "react";
import Link from "next/link";
import type { UserRole } from "@/types/user";
import { FOCUS_RING_CLASSES, FOCUS_RING_TIGHT_CLASSES, cardClasses } from "@/components/ui/styles";
import { cn } from "@/lib/utils";

const DASHBOARD_HREF: Record<UserRole, string> = {
  peserta: "/dashboard",
  organizer: "/organizer",
  petugas: "/petugas",
  administrator: "/admin",
};

export function UserMenu({ name, role }: { name: string; role: UserRole }) {
  const [open, setOpen] = useState(false);
  const rootRef = useRef<HTMLDivElement>(null);

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

    function handlePointerDown(e: MouseEvent) {
      if (rootRef.current && !rootRef.current.contains(e.target as Node)) setOpen(false);
    }
    function handleKeyDown(e: KeyboardEvent) {
      if (e.key === "Escape") setOpen(false);
    }

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

  const initial = name.trim().charAt(0).toUpperCase() || "?";

  return (
    <div ref={rootRef} className="relative">
      <button
        type="button"
        onClick={() => setOpen((v) => !v)}
        aria-expanded={open}
        aria-haspopup="menu"
        aria-controls="user-menu"
        className={cn(
          "flex items-center gap-2 rounded-full py-1 pl-1 pr-2.5 text-sm font-medium transition-colors hover:bg-kolabora-neutral-dark/5",
          FOCUS_RING_CLASSES,
        )}
      >
        <span className="flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-kolabora-primary text-xs font-semibold text-kolabora-neutral-white">
          {initial}
        </span>
        <span className="hidden max-w-[10rem] truncate sm:inline">{name}</span>
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          strokeWidth="2"
          strokeLinecap="round"
          strokeLinejoin="round"
          aria-hidden="true"
          className={`shrink-0 transition-transform ${open ? "rotate-180" : ""}`}
        >
          <path d="M6 9l6 6 6-6" />
        </svg>
      </button>

      {open && (
        <div
          id="user-menu"
          role="menu"
          className={cn(
            "absolute right-0 top-full z-20 mt-2 w-52 origin-top-right bg-kolabora-neutral-white text-sm shadow-lg",
            cardClasses("p-1.5"),
          )}
        >
          <p className="truncate px-3 py-2 text-xs text-kolabora-neutral-dark/70">{name}</p>
          <Link
            href={DASHBOARD_HREF[role]}
            role="menuitem"
            onClick={() => setOpen(false)}
            className={cn(
              "block rounded-lg px-3 py-2 font-medium hover:bg-kolabora-neutral-dark/5",
              FOCUS_RING_TIGHT_CLASSES,
            )}
          >
            Dashboard
          </Link>
          <form action="/api/auth/logout" method="post">
            <button
              type="submit"
              role="menuitem"
              className={cn(
                "block w-full rounded-lg px-3 py-2 text-left font-medium text-red-600 hover:bg-red-50",
                FOCUS_RING_TIGHT_CLASSES,
              )}
            >
              Log out
            </button>
          </form>
        </div>
      )}
    </div>
  );
}