import React from 'react';
import {
  AlertDialog,
  AlertDialogAction,
  AlertDialogCancel,
  AlertDialogContent,
  AlertDialogDescription,
  AlertDialogFooter,
  AlertDialogHeader,
  AlertDialogTitle,
} from './ui/alert-dialog';
import { AlertTriangle, Info, CheckCircle } from 'lucide-react';

/**
 * Reusable confirmation dialog component following the design system
 *
 * @param {boolean} open - Controls dialog visibility
 * @param {function} onOpenChange - Callback when dialog open state changes
 * @param {function} onConfirm - Callback when user confirms
 * @param {string} title - Dialog title
 * @param {string} description - Dialog description/message
 * @param {string} confirmText - Confirm button text (default: "Confirm")
 * @param {string} cancelText - Cancel button text (default: "Cancel")
 * @param {string} variant - Visual variant: 'warning', 'danger', 'info', 'success' (default: 'warning')
 * @param {boolean} loading - Show loading state on confirm button
 */
const ConfirmationDialog = ({
  open,
  onOpenChange,
  onConfirm,
  title,
  description,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  variant = 'warning',
  loading = false,
}) => {
  const variants = {
    warning: {
      icon: AlertTriangle,
      iconColor: 'text-[#ff9e77]',
      confirmButtonClass: 'bg-[#ff9e77] text-white hover:bg-[#e88d66] rounded-full px-6',
    },
    danger: {
      icon: AlertTriangle,
      iconColor: 'text-red-600',
      confirmButtonClass: 'bg-red-600 text-white hover:bg-red-700 rounded-full px-6',
    },
    info: {
      icon: Info,
      iconColor: 'text-[#664fa3]',
      confirmButtonClass: 'bg-[#664fa3] text-white hover:bg-[#553d8a] rounded-full px-6',
    },
    success: {
      icon: CheckCircle,
      iconColor: 'text-[#81B29A]',
      confirmButtonClass: 'bg-[#81B29A] text-white hover:bg-[#6fa188] rounded-full px-6',
    },
  };

  const config = variants[variant] || variants.warning;
  const Icon = config.icon;

  return (
    <AlertDialog open={open} onOpenChange={onOpenChange}>
      <AlertDialogContent className="bg-white rounded-2xl border border-[#ddd8eb] p-0 overflow-hidden max-w-md">
        <AlertDialogHeader className="p-6 pb-4">
          <div className="flex items-start gap-4">
            <div className={`p-3 rounded-full bg-[#F8F7FB] ${config.iconColor}`}>
              <Icon className="h-6 w-6" />
            </div>
            <div className="flex-1">
              <AlertDialogTitle
                className="text-xl font-semibold text-[#422268] mb-2"
                style={{ fontFamily: "'Inter', sans-serif" }}
              >
                {title}
              </AlertDialogTitle>
              <AlertDialogDescription
                className="text-[#664fa3] text-sm leading-relaxed"
                style={{ fontFamily: "'Nunito Sans', sans-serif" }}
              >
                {description}
              </AlertDialogDescription>
            </div>
          </div>
        </AlertDialogHeader>
        <AlertDialogFooter className="p-6 pt-4 bg-[#F8F7FB] flex-row gap-3 justify-end">
          <AlertDialogCancel
            className="border-2 border-[#ddd8eb] text-[#664fa3] hover:bg-white rounded-full px-6"
            disabled={loading}
          >
            {cancelText}
          </AlertDialogCancel>
          <AlertDialogAction
            onClick={(e) => {
              e.preventDefault();
              onConfirm();
            }}
            className={config.confirmButtonClass}
            disabled={loading}
          >
            {loading ? 'Processing...' : confirmText}
          </AlertDialogAction>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  );
};

export default ConfirmationDialog;