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-[#ff7b72] text-[#ff7b72] hover:bg-[#ff7b72] hover:text-[#ffffff]',
    icon: <AlertCircle className="h-6 w-6 text-[#ff7b72]" />,
  },
  warning: {
    confirmButton: 'border-[#e7bb62] text-[#e7bb62] hover:bg-[#e7bb62] hover:text-[#0a0a0a]',
    icon: <AlertTriangle className="h-6 w-6 text-[#e7bb62]" />,
  },
  info: {
    confirmButton: 'border-[#58a6ff] text-[#58a6ff] hover:bg-[#58a6ff] hover:text-[#0a0a0a]',
    icon: <Info className="h-6 w-6 text-[#58a6ff]" />,
  },
};

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 bg-black/60 p-4"
      onClick={handleCancel}
      role="dialog"
      aria-modal="true"
      aria-labelledby="confirm-dialog-title"
      aria-describedby="confirm-dialog-message"
    >
      <div
        className="w-full max-w-md rounded-lg border border-[#2a2a2a] bg-[#111111] p-6 shadow-2xl"
        onClick={(e) => e.stopPropagation()}
      >
        <div className="flex items-start gap-4">
          <div>{styles.icon}</div>
          <div className="flex-1">
            <h2 id="confirm-dialog-title" className="text-base font-mono font-semibold text-[#e0e0e0]">
              {title}
            </h2>
            <p id="confirm-dialog-message" className="mt-2 text-sm font-mono leading-6 text-[#888888]">
              {message}
            </p>

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

            <div className="mt-5 flex justify-end gap-2">
              <button
                type="button"
                onClick={handleCancel}
                className="rounded border border-[#2a2a2a] bg-[#151515] px-3 py-2 text-xs font-mono text-[#e0e0e0] transition-colors hover:border-[#58a6ff] hover:text-[#58a6ff]"
              >
                {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>
  );
};
