import React, { useState } from 'react';
import {
  AlertDialog,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from "@/components/ui/alert-dialog";
import { Loader2, Trash2, AlertTriangle } from 'lucide-react';
import { Button } from '@/components/ui/button';

export default function DeleteAssociationDialog({ open, onOpenChange, association, onDelete }) {
  const [isDeleting, setIsDeleting] = useState(false);

  const handleDelete = async (e) => {
    e.preventDefault();
    if (!association) return;
    
    setIsDeleting(true);
    try {
      await onDelete(association.id);
      onOpenChange(false);
    } catch (error) {
      // Error handling in parent
    } finally {
      setIsDeleting(false);
    }
  };

  if (!association) return null;

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent>
        <AlertDialogHeader>
          <AlertDialogTitle className="flex items-center gap-2 text-destructive">
            <Trash2 className="h-5 w-5" />
            Delete Association
          </AlertDialogTitle>
          <AlertDialogDescription className="space-y-4">
            <div className="p-3 bg-destructive/10 border border-destructive/20 rounded-md text-sm flex gap-3">
               <AlertTriangle className="h-5 w-5 shrink-0" />
               <p>
                 You are about to delete <strong>{association.name}</strong>. This action is permanent and cannot be undone.
               </p>
            </div>
            <p className="text-muted-foreground text-sm">
              Deleting this association will remove the client record from the system. Linked data such as requests, documents, and settings may also be deleted or orphaned depending on database constraints.
            </p>
          </AlertDialogDescription>
        </AlertDialogHeader>
        <AlertDialogFooter>
          <AlertDialogCancel disabled={isDeleting}>Cancel</AlertDialogCancel>
          <Button 
            variant="destructive" 
            onClick={handleDelete}
            disabled={isDeleting}
          >
            {isDeleting ? (
              <>
                <Loader2 className="mr-2 h-4 w-4 animate-spin" />
                Deleting...
              </>
            ) : (
              'Delete Association'
            )}
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
}
