import { AlertTriangle, Ban } from 'lucide-react';
import { Button } from '@/components/ui/button';
import { Dialog, DialogContent, DialogTitle } from '@/components/ui/dialog';
import { Spinner } from '@/components/ui/spinner';

type Props = {
    open: boolean;
    onClose: () => void;
    onConfirm?: () => void;
    title: string;
    description?: string;
    confirmLabel?: string;
    loading?: boolean;
    blockedReason?: string;
};

export function DeleteConfirmModal({ open, onClose, onConfirm, title, description, confirmLabel = 'Hapus', loading, blockedReason }: Props) {
    const isBlocked = !!blockedReason;

    return (
        <Dialog open={open} onOpenChange={(v) => { if (!v && !loading) onClose(); }}>
            <DialogContent className="max-w-sm">
                <div className="flex flex-col items-center gap-4 text-center">
                    <div className={`flex h-14 w-14 items-center justify-center rounded-full ${isBlocked ? 'bg-amber-100 dark:bg-amber-900/30' : 'bg-red-100 dark:bg-red-900/30'}`}>
                        {isBlocked
                            ? <Ban className="h-7 w-7 text-amber-500" />
                            : <AlertTriangle className="h-7 w-7 text-red-500" />
                        }
                    </div>
                    <DialogTitle className="text-base">{title}</DialogTitle>
                    {(blockedReason || description) && (
                        <p className="text-sm text-muted-foreground">{blockedReason ?? description}</p>
                    )}
                    <div className="flex w-full gap-2">
                        {isBlocked ? (
                            <Button variant="outline" className="w-full" onClick={onClose}>
                                Tutup
                            </Button>
                        ) : (
                            <>
                                <Button variant="outline" className="flex-1" onClick={onClose} disabled={loading}>
                                    Batal
                                </Button>
                                <Button
                                    className="flex-1 bg-red-500 hover:bg-red-600 text-white"
                                    onClick={onConfirm}
                                    disabled={loading}
                                >
                                    {loading && <Spinner />}
                                    {confirmLabel}
                                </Button>
                            </>
                        )}
                    </div>
                </div>
            </DialogContent>
        </Dialog>
    );
}