"use client";

import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Loader2 } from "lucide-react";

import { useDeleteClient } from "@/hooks/clients/use-clients-queries";
import type { Client } from "@/types/clients";

interface DeleteClientDialogProps {
  open: boolean;
  onOpenChange: (open: boolean) => void;
  client: Client | null;
}

export function DeleteClientDialog({ open, onOpenChange, client }: DeleteClientDialogProps) {
  const deleteClientMutation = useDeleteClient();

  const handleDelete = async () => {
    if (!client) return;

    try {
      await deleteClientMutation.mutateAsync(client.id);
      onOpenChange(false);
    } catch (error) {
      // L'erreur est gérée par le hook (toast)
      console.error("Erreur lors de la suppression:", error);
    }
  };

  const clientName = client?.full_name || "ce client";
  const clientNumber = client?.client_number || "";

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle>Supprimer le client</AlertDialogTitle>
          <AlertDialogDescription className="space-y-2">
            <p>
              Êtes-vous sûr de vouloir supprimer <strong>{clientName}</strong>
              {clientNumber && ` (${clientNumber})`} ?
            </p>
            <p className="text-destructive">Cette action est irréversible et supprimera définitivement :</p>
            <ul className="text-muted-foreground list-inside list-disc text-sm">
              <li>Les informations du client</li>
              <li>L'historique des activités</li>
              <li>Les documents associés</li>
              <li>Les contacts de référence</li>
            </ul>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={deleteClientMutation.isPending}>Annuler</AlertDialogCancel>
          <AlertDialogAction
            onClick={handleDelete}
            disabled={deleteClientMutation.isPending}
            className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
          >
            {deleteClientMutation.isPending && <Loader2 className="mr-2 h-4 w-4 animate-spin" />}
            Supprimer définitivement
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}