import React, { forwardRef, useEffect, useCallback } from 'react';
import { clsx } from 'clsx';
import { Modal, Button } from '../../ui';
import type { ModalProps, ButtonProps } from '../../ui';

export interface ConfirmDialogProps {
  /** Mostrar el diálogo */
  isOpen: boolean;
  /** Función al cerrar el diálogo */
  onClose: () => void;
  /** Función al confirmar */
  onConfirm: () => void | Promise<void>;
  /** Título del diálogo */
  title?: string;
  /** Mensaje del diálogo */
  message?: string;
  /** Nivel de peligro */
  variant?: 'info' | 'warning' | 'danger';
  /** Texto del botón de confirmación */
  confirmText?: string;
  /** Texto del botón de cancelación */
  cancelText?: string;
  /** Icono personalizado */
  icon?: React.ReactNode;
  /** Mostrar loading en el botón de confirmación */
  isLoading?: boolean;
  /** Deshabilitar la confirmación */
  isDisabled?: boolean;
  /** Auto-cerrar después de la confirmación */
  autoCloseOnConfirm?: boolean;
  /** Habilitar atajos de teclado (Enter/Escape) */
  enableKeyboardShortcuts?: boolean;
  /** Foco automático en el botón de confirmación */
  autoFocusConfirm?: boolean;
  /** Requerir confirmación doble para acciones peligrosas */
  requireDoubleConfirm?: boolean;
  /** Texto de confirmación doble */
  doubleConfirmText?: string;
  /** Contenido adicional personalizado */
  children?: React.ReactNode;
  /** Clase CSS adicional */
  className?: string;
  /** Función llamada al cancelar */
  onCancel?: () => void;
}

// Iconos por defecto para cada variante
const DefaultIcons = {
  info: (
    <svg className="w-6 h-6 text-color-info" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
    </svg>
  ),
  warning: (
    <svg className="w-6 h-6 text-color-warning" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
    </svg>
  ),
  danger: (
    <svg className="w-6 h-6 text-color-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L3.732 16.5c-.77.833.192 2.5 1.732 2.5z" />
    </svg>
  ),
};

// Mensajes por defecto
const DefaultMessages = {
  info: {
    title: 'Confirmar acción',
    message: '¿Está seguro de que desea continuar?',
    confirmText: 'Continuar',
  },
  warning: {
    title: 'Advertencia',
    message: 'Esta acción puede tener consecuencias. ¿Desea continuar?',
    confirmText: 'Sí, continuar',
  },
  danger: {
    title: 'Acción peligrosa',
    message: 'Esta acción no se puede deshacer. ¿Está absolutamente seguro?',
    confirmText: 'Sí, eliminar',
  },
};

const ConfirmDialog = forwardRef<HTMLDivElement, ConfirmDialogProps>(({
  isOpen,
  onClose,
  onConfirm,
  title,
  message,
  variant = 'info',
  confirmText,
  cancelText = 'Cancelar',
  icon,
  isLoading = false,
  isDisabled = false,
  autoCloseOnConfirm = true,
  enableKeyboardShortcuts = true,
  autoFocusConfirm = false,
  requireDoubleConfirm = false,
  doubleConfirmText = 'ELIMINAR',
  children,
  className,
  onCancel,
  ...props
}, ref) => {
  const [doubleConfirmValue, setDoubleConfirmValue] = React.useState('');
  const [isDoubleConfirmValid, setIsDoubleConfirmValid] = React.useState(false);
  const confirmButtonRef = React.useRef<HTMLButtonElement>(null);

  const defaultMessage = DefaultMessages[variant] || DefaultMessages.info;
  const displayTitle = title || defaultMessage.title;
  const displayMessage = message || defaultMessage.message;
  const displayConfirmText = confirmText || defaultMessage.confirmText;
  const displayIcon = icon || DefaultIcons[variant];

  // Validar confirmación doble
  React.useEffect(() => {
    if (requireDoubleConfirm) {
      setIsDoubleConfirmValid(doubleConfirmValue.toUpperCase() === doubleConfirmText.toUpperCase());
    }
  }, [doubleConfirmValue, doubleConfirmText, requireDoubleConfirm]);

  // Auto-foco en el botón de confirmación
  React.useEffect(() => {
    if (isOpen && autoFocusConfirm && confirmButtonRef.current) {
      const timer = setTimeout(() => {
        confirmButtonRef.current?.focus();
      }, 100);
      return () => clearTimeout(timer);
    }
  }, [isOpen, autoFocusConfirm]);

  // Reset del estado cuando se cierra
  React.useEffect(() => {
    if (!isOpen) {
      setDoubleConfirmValue('');
      setIsDoubleConfirmValid(false);
    }
  }, [isOpen]);

  // Manejar atajos de teclado
  const handleKeyDown = useCallback((event: KeyboardEvent) => {
    if (!isOpen || !enableKeyboardShortcuts) return;

    if (event.key === 'Escape') {
      event.preventDefault();
      handleCancel();
    } else if (event.key === 'Enter' && (event.metaKey || event.ctrlKey)) {
      event.preventDefault();
      if (!isDisabled && !isLoading && (!requireDoubleConfirm || isDoubleConfirmValid)) {
        handleConfirm();
      }
    }
  }, [isOpen, enableKeyboardShortcuts, isDisabled, isLoading, requireDoubleConfirm, isDoubleConfirmValid]);

  useEffect(() => {
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [handleKeyDown]);

  const handleConfirm = async () => {
    try {
      await onConfirm();
      if (autoCloseOnConfirm) {
        onClose();
      }
    } catch (error) {
      console.error('Error en confirmación:', error);
    }
  };

  const handleCancel = () => {
    if (onCancel) {
      onCancel();
    }
    onClose();
  };

  const getConfirmButtonVariant = (): ButtonProps['variant'] => {
    switch (variant) {
      case 'danger':
        return 'danger';
      case 'warning':
        return 'warning';
      default:
        return 'primary';
    }
  };

  const isConfirmDisabled = isDisabled || isLoading || (requireDoubleConfirm && !isDoubleConfirmValid);

  return (
    <Modal
      isOpen={isOpen}
      onClose={onClose}
      size="sm"
      className={className}
      {...props}
    >
      <div ref={ref} className="p-6">
        {/* Header con icono y título */}
        <div className="flex items-start gap-4 mb-4">
          {displayIcon && (
            <div className="flex-shrink-0">
              {displayIcon}
            </div>
          )}
          
          <div className="flex-1">
            {displayTitle && (
              <h3 className="text-lg font-semibold text-text-primary mb-2">
                {displayTitle}
              </h3>
            )}
            
            {displayMessage && (
              <p className="text-text-secondary leading-relaxed">
                {displayMessage}
              </p>
            )}
          </div>
        </div>

        {/* Contenido adicional */}
        {children && (
          <div className="mb-6">
            {children}
          </div>
        )}

        {/* Confirmación doble */}
        {requireDoubleConfirm && (
          <div className="mb-6">
            <label className="block text-sm font-medium text-text-primary mb-2">
              Para confirmar, escriba <span className="font-mono bg-bg-tertiary px-1 rounded">{doubleConfirmText}</span>:
            </label>
            <input
              type="text"
              value={doubleConfirmValue}
              onChange={(e) => setDoubleConfirmValue(e.target.value)}
              className={clsx(
                'w-full px-3 py-2 border rounded-md focus:outline-none focus:ring-2 transition-colors',
                isDoubleConfirmValid
                  ? 'border-color-success focus:ring-color-success/20'
                  : 'border-border-secondary focus:ring-color-primary/20'
              )}
              placeholder={`Escriba ${doubleConfirmText}`}
              autoComplete="off"
              spellCheck={false}
            />
          </div>
        )}

        {/* Botones de acción */}
        <div className="flex flex-col-reverse sm:flex-row gap-3 sm:justify-end">
          <Button
            variant="outline"
            onClick={handleCancel}
            disabled={isLoading}
            className="w-full sm:w-auto"
          >
            {cancelText}
          </Button>
          
          <Button
            ref={confirmButtonRef}
            variant={getConfirmButtonVariant()}
            onClick={handleConfirm}
            disabled={isConfirmDisabled}
            isLoading={isLoading}
            className="w-full sm:w-auto"
            loadingText="Procesando..."
          >
            {displayConfirmText}
          </Button>
        </div>

        {/* Ayuda de atajos de teclado */}
        {enableKeyboardShortcuts && (
          <div className="mt-4 pt-4 border-t border-border-primary">
            <p className="text-xs text-text-tertiary text-center">
              Presione <kbd className="px-1 bg-bg-tertiary rounded font-mono">Escape</kbd> para cancelar
              {!isConfirmDisabled && (
                <> o <kbd className="px-1 bg-bg-tertiary rounded font-mono">Ctrl+Enter</kbd> para confirmar</>
              )}
            </p>
          </div>
        )}
      </div>
    </Modal>
  );
});

ConfirmDialog.displayName = 'ConfirmDialog';

export default ConfirmDialog;