"use client";

import { useState, useRef, useEffect } from "react";
import { useRouter } from "next/navigation";

const LOCKED = new Set([
  "registered", "name_approved", "name_reserved",
  "resignation_sent", "appointment_accepted", "cancelled",
  "Moved to step 2",
]);

const ACTIONS = [
  { label: "Name Reservation only",        status: "Name reservation only in Progress", variant: "blue" },
  { label: "Apply for name reservation",   status: "Name reservation in Progress",   variant: "blue" },
  { label: "Name Already Approved",        status: "Awaiting Client Approval",        variant: "green" },
  { label: "K-number",                     status: "K-number registration",           variant: "purple" },
];

export default function ActionsDropdown({ id, name, status }: { id: string; name: string; status: string }) {
  const router = useRouter();
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState<string | null>(null);
  const ref = useRef<HTMLDivElement>(null);

  // Close on outside click
  useEffect(() => {
    if (!open) return;
    function handler(e: MouseEvent) {
      if (ref.current && !ref.current.contains(e.target as Node)) setOpen(false);
    }
    document.addEventListener("mousedown", handler);
    return () => document.removeEventListener("mousedown", handler);
  }, [open]);

  if (LOCKED.has(status)) {
    return <span className="text-xs text-muted italic px-2">—</span>;
  }

  async function doAction(status: string) {
    if (!confirm(`Set status to "${status}"?`)) return;
    setLoading(status);
    await fetch("/api/register/update-status", {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ id, status }),
    });
    setLoading(null);
    setOpen(false);
    router.refresh();
  }

  return (
    <div className="relative" ref={ref}>
      <button
        onClick={() => setOpen(!open)}
        className="px-2.5 py-1 bg-surface border border-border rounded text-xs font-semibold text-fg hover:border-accent hover:text-accent transition-colors whitespace-nowrap"
      >
        Actions {open ? "▲" : "▼"}
      </button>

      {open && (
        <div className="absolute right-0 top-full mt-1 z-50 bg-surface border border-border rounded-lg shadow-xl w-56 overflow-hidden">
          <div className="px-3 py-2 border-b border-border bg-surface-warm">
            <p className="text-xs font-bold text-fg truncate">{name}</p>
            <p className="text-xs text-muted">{status}</p>
          </div>
          <div className="py-1">
            {ACTIONS.map((a) => (
              <button
                key={a.status}
                onClick={() => doAction(a.status)}
                disabled={loading === a.status}
                className="w-full text-left px-3 py-2 text-xs hover:bg-surface-warm transition-colors disabled:opacity-50"
              >
                {loading === a.status ? "…" : "→"} {a.label}
              </button>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}