"use client";

import { useState } from "react";
import { useRouter } from "next/navigation";
import { Button, type ButtonVariant } from "@/components/ui/button";
import { useConfirmDialog } from "@/components/ui/confirm-dialog";
import { useToast } from "@/components/ui/toast";
import { clientFetch } from "@/lib/api/client";

const VARIANT_MAP: Record<"primary" | "danger" | "default", ButtonVariant> = {
  primary: "primary",
  danger: "danger",
  default: "secondary",
};

export function TrashActionButton({
  endpoint,
  type,
  id,
  label,
  variant = "default",
  confirmMessage,
  disabled = false,
}: {
  endpoint: string;
  type: string;
  id: number;
  label: string;
  variant?: "primary" | "danger" | "default";
  confirmMessage?: string;
  disabled?: boolean;
}) {
  const router = useRouter();
  const [isSubmitting, setIsSubmitting] = useState(false);
  const [error, setError] = useState<string | null>(null);
  const { confirm, dialog } = useConfirmDialog();
  const { toast } = useToast();

  async function handleClick() {
    if (confirmMessage && !(await confirm(confirmMessage, label))) return;

    setError(null);
    setIsSubmitting(true);
    const res = await clientFetch(endpoint, {
      method: "POST",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ type, id }),
    });
    setIsSubmitting(false);

    const body = await res.json().catch(() => null);
    if (!res.ok) {
      const message = body?.message ?? "Action failed.";
      setError(message);
      toast(message, "error");
      return;
    }
    toast(`${label} successful.`, "success");
    router.refresh();
  }

  return (
    <div className="flex flex-col items-start gap-1">
      {dialog}
      <Button
        type="button"
        variant={VARIANT_MAP[variant]}
        size="sm"
        onClick={handleClick}
        disabled={disabled}
        loading={isSubmitting}
      >
        {label}
      </Button>
      {error && <p className="text-xs text-red-600">{error}</p>}
    </div>
  );
}