"use client";

import { useState } from "react";
import { Loader2 } from "lucide-react";
import { Button } from "@/components/ui/button";
import { ConfirmDialog } from "@/components/ui/confirm-dialog";
import { StatusToast } from "@/components/ui/status-toast";
import { useLocale } from "@/components/providers/locale-provider";

export function ListDeleteButton({
  apiUrl,
  title,
  description,
  successMessage,
  onDeleted,
}: {
  apiUrl: string;
  title: string;
  description: string;
  successMessage: string;
  onDeleted: () => void;
}) {
  const { locale } = useLocale();
  const isAr = locale === "ar";
  const [open, setOpen] = useState(false);
  const [loading, setLoading] = useState(false);
  const [toast, setToast] = useState<{ message: string; variant: "success" | "error" } | null>(
    null
  );

  async function confirmDelete() {
    if (loading) return;
    setLoading(true);
    try {
      const res = await fetch(apiUrl, { method: "DELETE" });
      const json = await res.json().catch(() => ({}));
      if (!res.ok) {
        setToast({
          message: (json as { error?: string }).error ?? (isAr ? "فشل الحذف" : "Delete failed"),
          variant: "error",
        });
        return;
      }
      setToast({ message: successMessage, variant: "success" });
      setOpen(false);
      onDeleted();
    } finally {
      setLoading(false);
    }
  }

  return (
    <>
      <StatusToast
        message={toast?.message ?? null}
        variant={toast?.variant}
        onDismiss={() => setToast(null)}
      />
      <Button
        type="button"
        variant="destructive"
        size="sm"
        disabled={loading}
        onClick={(e) => {
          e.stopPropagation();
          setOpen(true);
        }}
      >
        {loading ? <Loader2 className="h-4 w-4 animate-spin" /> : null}
        {isAr ? "حذف" : "Delete"}
      </Button>
      <ConfirmDialog
        open={open}
        title={title}
        description={description}
        confirmLabel={isAr ? "حذف" : "Delete"}
        destructive
        loading={loading}
        onCancel={() => setOpen(false)}
        onConfirm={() => void confirmDelete()}
      />
    </>
  );
}