'use client';

import { cn } from '@/lib/utils';
import * as DialogPrimitive from '@radix-ui/react-dialog';
import { AlertTriangle } from 'lucide-react';
import * as React from 'react';

interface ConfirmDialogProps {
    open: boolean;
    onOpenChange: (open: boolean) => void;
    title: string;
    description: React.ReactNode;
    confirmLabel?: string;
    cancelLabel?: string;
    loading?: boolean;
    onConfirm: () => void | Promise<void>;
}

export function ConfirmDialog({
    open,
    onOpenChange,
    title,
    description,
    confirmLabel = 'Confirm',
    cancelLabel = 'Cancel',
    loading = false,
    onConfirm,
}: ConfirmDialogProps) {
    const handleConfirm = async () => {
        await onConfirm();
    };

    return (
        <DialogPrimitive.Root open={open} onOpenChange={onOpenChange}>
            <DialogPrimitive.Portal>
                <DialogPrimitive.Overlay
                    className={cn(
                        'fixed inset-0 z-50 bg-black/60 backdrop-blur-sm',
                        'data-[state=open]:animate-in data-[state=open]:fade-in-0',
                        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
                    )}
                />
                <DialogPrimitive.Content
                    className={cn(
                        'fixed top-1/2 left-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2',
                        'border-border bg-background rounded-xl border p-6 shadow-xl',
                        'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%]',
                        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
                    )}
                >
                    {/* Icon + title */}
                    <div className="flex items-start gap-4">
                        <span className="flex h-10 w-10 shrink-0 items-center justify-center rounded-full bg-red-500/10">
                            <AlertTriangle className="h-5 w-5 text-red-500" />
                        </span>
                        <div className="min-w-0">
                            <DialogPrimitive.Title className="text-foreground text-sm font-semibold">
                                {title}
                            </DialogPrimitive.Title>
                            <DialogPrimitive.Description asChild>
                                <div className="text-muted-foreground mt-1.5 text-sm">
                                    {description}
                                </div>
                            </DialogPrimitive.Description>
                        </div>
                    </div>

                    {/* Actions */}
                    <div className="mt-6 flex justify-end gap-3">
                        <DialogPrimitive.Close
                            disabled={loading}
                            className={cn(
                                'border-border text-muted-foreground rounded-lg border px-4 py-2 text-sm font-medium',
                                'hover:bg-muted/40 transition-colors disabled:opacity-50',
                            )}
                        >
                            {cancelLabel}
                        </DialogPrimitive.Close>
                        <button
                            type="button"
                            disabled={loading}
                            onClick={handleConfirm}
                            className={cn(
                                'rounded-lg bg-red-600 px-4 py-2 text-sm font-semibold text-white',
                                'transition-colors hover:bg-red-700 disabled:opacity-60',
                            )}
                        >
                            {loading ? 'Deleting…' : confirmLabel}
                        </button>
                    </div>
                </DialogPrimitive.Content>
            </DialogPrimitive.Portal>
        </DialogPrimitive.Root>
    );
}