import React from 'react';
import { AlertTriangle } from 'lucide-react';
import { Button } from '../ui/Button';
import { BaseModal } from '../ui/BaseModal';

interface ConfirmationModalProps {
    isOpen: boolean;
    onClose: () => void;
    onConfirm: () => void;
    title: string;
    message: React.ReactNode;
    errorMessage?: React.ReactNode;
    confirmLabel?: string;
    cancelLabel?: string;
    variant?: 'danger' | 'warning' | 'info';
    loading?: boolean;
    showCancel?: boolean;
    icon?: React.ReactNode;
    className?: string;
}

const VARIANT_CONFIG = {
    danger: {
        icon: AlertTriangle,
        iconClassName: 'text-red-600',
        iconBgClassName: 'bg-red-100',
        headerClassName: 'bg-red-50 border-b border-gray-100',
    },
    warning: {
        icon: AlertTriangle,
        iconClassName: 'text-yellow-600',
        iconBgClassName: 'bg-yellow-100',
        headerClassName: 'bg-yellow-50 border-b border-gray-100',
    },
    info: {
        icon: undefined,
        iconClassName: undefined,
        iconBgClassName: undefined,
        headerClassName: 'bg-white border-b border-gray-100',
    },
};

export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
    isOpen,
    onClose,
    onConfirm,
    title,
    message,
    errorMessage,
    confirmLabel = 'Confirm',
    cancelLabel = 'Cancel',
    variant = 'info',
    loading = false,
    showCancel = true,
    icon,
    className
}) => {
    const config = VARIANT_CONFIG[variant];

    return (
        <BaseModal
            isOpen={isOpen}
            onClose={loading ? () => {} : onClose}
            title={
                icon
                    ? <div className="flex items-center gap-3">{icon}<span>{title}</span></div>
                    : title
            }
            icon={!icon ? config.icon : undefined}
            iconClassName={config.iconClassName}
            iconBgClassName={config.iconBgClassName}
            headerClassName={config.headerClassName}
            maxWidth="md"
            overlayClassName={className}
            footer={
                <div className="flex justify-end gap-3">
                    {showCancel && (
                        <Button
                            variant="ghost"
                            onClick={onClose}
                            disabled={loading}
                        >
                            {cancelLabel}
                        </Button>
                    )}
                    <Button
                        variant={variant === 'danger' ? 'danger' : 'primary'}
                        onClick={onConfirm}
                        loading={loading}
                    >
                        {confirmLabel}
                    </Button>
                </div>
            }
        >
            <div className="p-6">
                <div className="text-gray-600">
                    {message}
                </div>
                {errorMessage ? (
                    <div className="mt-4 rounded-lg border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-700">
                        {errorMessage}
                    </div>
                ) : null}
            </div>
        </BaseModal>
    );
};