"use client";

import { useRouter } from "next/navigation";
import { useState } from "react";
import { Button } from "@/components/ui/button";
import { ConfirmDialogTrigger } from "@/components/admin/ConfirmDialog";
import { toast } from "@/components/admin/Toast";
import { apiDelete } from "@/lib/client-api";

export function TemplateDeleteControl({
  templateId,
  templateName,
}: {
  templateId: string;
  templateName: string;
}) {
  const router = useRouter();
  const [pending, setPending] = useState(false);

  const onConfirm = async () => {
    try {
      setPending(true);
      await apiDelete(`/api/admin/templates/${templateId}`);
      toast("Template deleted.", "success");
      router.push("/admin/templates");
      router.refresh();
    } catch (err) {
      toast(err instanceof Error ? err.message : "Delete failed.", "error");
    } finally {
      setPending(false);
    }
  };

  return (
    <ConfirmDialogTrigger
      title="Delete template?"
      description={`"${templateName}" will be permanently deleted. This cannot be undone.`}
      confirmLabel="Delete"
      tone="danger"
      onConfirm={onConfirm}
      trigger={(open) => (
        <Button variant="danger" size="sm" onClick={open} disabled={pending}>
          Delete template
        </Button>
      )}
    />
  );
}