import React, { useEffect, useRef, useState } from 'react';
import { AlertTriangle, Info, AlertCircle } from 'lucide-react';

export interface ConfirmDialogProps {
  isOpen: boolean;
  title: string;
  message: string;
  confirmLabel?: string;
  cancelLabel?: string;
  variant?: 'danger' | 'warning' | 'info';
  onConfirm: () => void;
  onCancel: () => void;
  showDontAskAgain?: boolean;
  onDontAskAgainChange?: (checked: boolean) => void;
}

const variantStyles = {
  danger: {
    confirmButton: 'border-negative text-negative hover:bg-negative hover:text-term-bg',
    icon: <AlertCircle className="h-6 w-6 text-negative" />,
  },
  warning: {
    confirmButton: 'border-warning text-warning hover:bg-warning hover:text-term-bg',
    icon: <AlertTriangle className="h-6 w-6 text-warning" />,
  },
  info: {
    confirmButton: 'border-info text-info hover:bg-info hover:text-term-bg',
    icon: <Info className="h-6 w-6 text-info" />,
  },
};

export const ConfirmDialog: React.FC<ConfirmDialogProps> = ({
  isOpen,
  title,
  message,
  confirmLabel = 'Confirm',
  cancelLabel = 'Cancel',
  variant = 'danger',
  onConfirm,
  onCancel,
  showDontAskAgain,
  onDontAskAgainChange,
}) => {
  const confirmButtonRef = useRef<HTMLButtonElement>(null);
  const [dontAskAgain, setDontAskAgain] = useState(false);

  useEffect(() => {
    if (isOpen && confirmButtonRef.current) {
      confirmButtonRef.current.focus();
    }
  }, [isOpen]);

  useEffect(() => {
    const handleEscape = (e: KeyboardEvent) => {
      if (e.key === 'Escape' && isOpen) {
        onCancel();
      }
    };

    document.addEventListener('keydown', handleEscape);
    return () => document.removeEventListener('keydown', handleEscape);
  }, [isOpen, onCancel]);

  if (!isOpen) return null;

  const styles = variantStyles[variant];

  const handleConfirm = () => {
    onConfirm();
    setDontAskAgain(false);
  };

  const handleCancel = () => {
    onCancel();
    setDontAskAgain(false);
  };

  const handleDontAskAgainChange = (checked: boolean) => {
    setDontAskAgain(checked);
    onDontAskAgainChange?.(checked);
  };

  return (
    <div
      className="fixed inset-0 z-50 flex items-center justify-center overflow-y-auto bg-black/60 p-4"
      onClick={handleCancel}
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirm-dialog-title"
      aria-describedby="confirm-dialog-message"
    >
      <div
        className="relative w-full max-w-lg rounded-lg border border-term-border bg-term-surface p-6 shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-start gap-4">
          <div className="shrink-0">{styles.icon}</div>
          <div className="min-w-0 flex-1">
            <h2 id="confirm-dialog-title" className="text-base font-mono font-semibold text-term-text">
              {title}
            </h2>
            <p id="confirm-dialog-message" className="mt-2 whitespace-pre-line break-words text-sm font-mono leading-6 text-term-text-muted">
              {message}
            </p>

            {showDontAskAgain && onDontAskAgainChange && (
              <label className="mt-4 flex items-center gap-2 text-xs font-mono text-term-text-muted">
                <input
                  type="checkbox"
                  checked={dontAskAgain}
                  onChange={(e) => handleDontAskAgainChange(e.target.checked)}
                  className="rounded border-term-border bg-term-surface text-info focus:ring-2 focus:ring-info focus:ring-offset-2 focus:ring-offset-term-surface"
                />
                Don't ask again
              </label>
            )}

            <div className="mt-5 flex justify-end gap-2">
              <button
                type="button"
                onClick={handleCancel}
                className="rounded border border-term-border bg-term-highlight px-3 py-2 text-xs font-mono text-term-text transition-colors hover:border-info hover:text-info"
              >
                {cancelLabel}
              </button>
              <button
                ref={confirmButtonRef}
                type="button"
                onClick={handleConfirm}
                className={`rounded border px-3 py-2 text-xs font-mono transition-colors ${styles.confirmButton}`}
              >
                {confirmLabel}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};
