"use client";

import { useRouter } from "next/navigation";
import { useState, useTransition } from "react";
import { deleteCategoryAction } from "@/lib/admin-actions";

/** Category delete with usage-guard feedback (no native alert boxes). */
export function DeleteCategoryButton({
  id,
  name,
}: {
  id: number;
  name: string;
}) {
  const router = useRouter();
  const [pending, startTransition] = useTransition();
  const [confirming, setConfirming] = useState(false);
  const [error, setError] = useState("");

  if (!confirming) {
    return (
      <button
        type="button"
        onClick={() => {
          setConfirming(true);
          setError("");
        }}
        className="rounded-lg border border-slate-700 px-3 py-1.5 text-xs font-semibold text-slate-300 hover:border-red-500/50 hover:text-red-300"
      >
        Delete
      </button>
    );
  }

  return (
    <span className="inline-flex flex-col items-end gap-1">
      <span className="inline-flex gap-2">
        <button
          type="button"
          disabled={pending}
          onClick={() =>
            startTransition(async () => {
              const message = await deleteCategoryAction(id);
              if (message) {
                setError(message);
                setConfirming(false);
              } else {
                router.refresh();
              }
            })
          }
          className="rounded-lg border border-red-500/50 bg-red-600/15 px-3 py-1.5 text-xs font-semibold text-red-300 hover:bg-red-600/25 disabled:opacity-50"
        >
          {pending ? "Deleting…" : `Confirm delete “${name}”?`}
        </button>
        <button
          type="button"
          disabled={pending}
          onClick={() => setConfirming(false)}
          className="rounded-lg border border-slate-700 px-3 py-1.5 text-xs font-semibold text-slate-300"
        >
          Cancel
        </button>
      </span>
      {error ? (
        <span role="alert" className="max-w-64 text-right text-xs text-red-400">
          {error}
        </span>
      ) : null}
    </span>
  );
}