import React from 'react';
import { createPortal } from 'react-dom';
import { AlertTriangle, X, Loader2 } from 'lucide-react';

export type ConfirmationVariant = 'danger' | 'warning' | 'info';

interface ConfirmationModalProps {
  isOpen: boolean;
  title: string;
  message: string;
  confirmText?: string;
  cancelText?: string;
  variant?: ConfirmationVariant;
  isLoading?: boolean;
  onConfirm: () => void;
  onCancel: () => void;
}

const VARIANT_STYLE: Record<ConfirmationVariant, {
  icon: string;
  iconBg: string;
  button: string;
}> = {
  danger: {
    icon: 'text-rose-600 dark:text-rose-400',
    iconBg: 'bg-rose-50 dark:bg-rose-950/40 border-rose-100 dark:border-rose-800/60',
    button: 'bg-rose-600 hover:bg-rose-700 text-white shadow-lg shadow-rose-900/20',
  },
  warning: {
    icon: 'text-amber-600 dark:text-amber-400',
    iconBg: 'bg-amber-50 dark:bg-amber-950/40 border-amber-100 dark:border-amber-800/60',
    button: 'bg-amber-600 hover:bg-amber-700 text-white shadow-lg shadow-amber-900/20',
  },
  info: {
    icon: 'text-blue-600 dark:text-blue-400',
    iconBg: 'bg-blue-50 dark:bg-blue-950/40 border-blue-100 dark:border-blue-800/60',
    button: 'bg-blue-600 hover:bg-blue-700 text-white shadow-lg shadow-blue-900/20',
  },
};

export const ConfirmationModal: React.FC<ConfirmationModalProps> = ({
  isOpen,
  title,
  message,
  confirmText = 'Confirm',
  cancelText = 'Cancel',
  variant = 'danger',
  isLoading = false,
  onConfirm,
  onCancel,
}) => {
  if (!isOpen) return null;

  const style = VARIANT_STYLE[variant];

  return createPortal(
    <div
      className="fixed inset-0 z-[200] flex items-center justify-center p-4 bg-[#002147]/60 backdrop-blur-sm animate-in fade-in duration-200"
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirmation-title"
      aria-describedby="confirmation-message"
      onClick={(e) => {
        if (e.target === e.currentTarget && !isLoading) onCancel();
      }}
    >
      <div className="bg-card border border-border rounded-[2.5rem] shadow-2xl max-w-md w-full overflow-hidden animate-in zoom-in-95 duration-200 relative">
        {/* Background Watermark Icon */}
        <div className="absolute right-[-20px] top-[-20px] opacity-[0.03] rotate-12 pointer-events-none text-foreground select-none">
          <AlertTriangle size={180} />
        </div>

        {/* Header Block */}
        <div className="px-8 py-6 bg-muted/50 border-b border-border flex justify-between items-center relative z-10">
          <div className="flex items-center gap-3.5 min-w-0">
            <div className={`shrink-0 w-11 h-11 rounded-2xl border flex items-center justify-center shadow-sm ${style.iconBg}`}>
              <AlertTriangle size={22} className={style.icon} aria-hidden="true" />
            </div>
            <div className="min-w-0">
              <h2 id="confirmation-title" className="text-xl font-black text-foreground tracking-tight font-heading truncate">
                {title}
              </h2>
              <p className="text-xs font-bold text-muted-foreground uppercase tracking-widest mt-0.5">Confirmation Action</p>
            </div>
          </div>
          <button
            type="button"
            onClick={onCancel}
            disabled={isLoading}
            aria-label="Close"
            className="relative z-10 w-10 h-10 flex-shrink-0 flex items-center justify-center rounded-xl bg-card border border-border text-muted-foreground hover:text-rose-500 hover:border-rose-500/20 hover:bg-rose-50/5 transition-all disabled:opacity-30"
          >
            <X size={20} aria-hidden="true" />
          </button>
        </div>

        {/* Content Body */}
        <div className="p-8 space-y-6 relative z-10">
          <p id="confirmation-message" className="text-sm text-text-muted leading-relaxed">
            {message}
          </p>

          <div className="flex flex-col-reverse sm:flex-row sm:justify-end gap-3 pt-2">
            <button
              type="button"
              onClick={onCancel}
              disabled={isLoading}
              className="px-5 py-3 rounded-xl border border-border bg-muted hover:bg-muted/80 text-text text-xs font-bold uppercase tracking-widest transition-all disabled:opacity-50"
            >
              {cancelText}
            </button>
            <button
              type="button"
              onClick={onConfirm}
              disabled={isLoading}
              className={`px-6 py-3 rounded-xl text-xs font-black uppercase tracking-widest transition-all active:scale-[0.98] disabled:opacity-60 flex items-center justify-center gap-2 ${style.button}`}
            >
              {isLoading && <Loader2 size={14} className="animate-spin" aria-hidden="true" />}
              {confirmText}
            </button>
          </div>
        </div>
      </div>
    </div>,
    document.body
  );
};

export default ConfirmationModal;
