import React, { useState, useCallback, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { X, ChevronLeft, ChevronRight, AlertCircle, CheckCircle } from 'lucide-react';

export interface WizardStep {
  id: string;
  title: string;
  description?: string;
  component: React.ComponentType<WizardStepProps>;
  isOptional?: boolean;
  validate?: () => Promise<boolean> | boolean;
}

export interface WizardStepProps {
  onNext: () => void;
  onBack: () => void;
  onComplete: () => void;
  isFirstStep: boolean;
  isLastStep: boolean;
  currentStepIndex: number;
  totalSteps: number;
  goToStep: (index: number) => void;
  // New architecture: dataRef and onDataChange passed from UnifiedAddWizard
  dataRef?: React.MutableRefObject<any>;
  onDataChange?: (data: any) => void;
}

interface WizardModalProps {
  isOpen: boolean;
  onClose: () => void;
  onComplete: (data?: any) => void;
  title: string;
  steps: WizardStep[];
  icon?: React.ReactNode;
  size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl';
  // New architecture: optional dataRef and onDataChange for wizards that use them
  dataRef?: React.MutableRefObject<any>;
  onDataChange?: (data: any) => void;
}

export const WizardModal: React.FC<WizardModalProps> = ({
  isOpen,
  onClose,
  onComplete,
  title,
  steps,
  icon,
  size = 'xl',
  dataRef,
  onDataChange
}) => {
  const { t } = useTranslation('wizards');
  const [currentStepIndex, setCurrentStepIndex] = useState(0);
  const [isValidating, setIsValidating] = useState(false);
  const [validationError, setValidationError] = useState<string | null>(null);
  const [validationSuccess, setValidationSuccess] = useState(false);

  const currentStep = steps[currentStepIndex];

  // Helper to translate step title - if it looks like a translation key (contains dots), translate it
  const translateStepTitle = (stepTitle: string): string => {
    if (stepTitle.includes('.')) {
      const translated = t(stepTitle);
      // If translation returns the key itself, return just the last part as fallback
      if (translated === stepTitle) {
        return stepTitle.split('.').pop() || stepTitle;
      }
      return translated;
    }
    return stepTitle;
  };
  const isFirstStep = currentStepIndex === 0;
  const isLastStep = currentStepIndex === steps.length - 1;

  const sizeClasses = {
    sm: 'max-w-md',
    md: 'max-w-2xl',
    lg: 'max-w-4xl',
    xl: 'max-w-5xl',
    '2xl': 'max-w-7xl'
  };

  const handleClose = useCallback(() => {
    setCurrentStepIndex(0);
    setValidationError(null);
    setValidationSuccess(false);
    onClose();
  }, [onClose]);

  const handleComplete = useCallback(() => {
    onComplete();
    handleClose();
  }, [onComplete, handleClose]);

  const goToStep = useCallback((index: number) => {
    if (index >= 0 && index < steps.length) {
      setCurrentStepIndex(index);
    }
  }, [steps.length]);

  const handleBack = useCallback(() => {
    setValidationError(null);
    setValidationSuccess(false);
    setCurrentStepIndex(prev => Math.max(prev - 1, 0));
  }, []);

  const handleNext = useCallback(async () => {
    // Access current step inside callback to avoid re-creating function on every render
    const step = steps[currentStepIndex];
    const lastStep = currentStepIndex === steps.length - 1;

    // Clear previous validation messages
    setValidationError(null);
    setValidationSuccess(false);

    // Validate current step if validator exists
    if (step.validate) {
      setIsValidating(true);
      try {
        const isValid = await step.validate();
        if (!isValid) {
          setValidationError('Por favor, completa todos los campos requeridos correctamente.');
          setIsValidating(false);
          return;
        }
        // Show brief success indicator
        setValidationSuccess(true);
        setTimeout(() => setValidationSuccess(false), 1000);
      } catch (error) {
        console.error('Validation error:', error);
        setValidationError(error instanceof Error ? error.message : 'Error de validación. Por favor, verifica los campos.');
        setIsValidating(false);
        return;
      }
      setIsValidating(false);
    }

    if (lastStep) {
      handleComplete();
    } else {
      setCurrentStepIndex(prev => Math.min(prev + 1, steps.length - 1));
    }
  }, [steps, currentStepIndex, handleComplete]);

  // Keyboard navigation
  useEffect(() => {
    if (!isOpen) return;

    const handleKeyDown = (e: KeyboardEvent) => {
      // Don't handle keyboard events if user is typing in an input/textarea
      const target = e.target as HTMLElement;
      if (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.tagName === 'SELECT') {
        return;
      }

      switch (e.key) {
        case 'Escape':
          handleClose();
          break;
        case 'ArrowLeft':
          if (!isFirstStep && !isValidating) {
            e.preventDefault();
            handleBack();
          }
          break;
        case 'ArrowRight':
        case 'Enter':
          if (!isValidating) {
            e.preventDefault();
            handleNext();
          }
          break;
      }
    };

    window.addEventListener('keydown', handleKeyDown);
    return () => window.removeEventListener('keydown', handleKeyDown);
  }, [isOpen, isFirstStep, isValidating, handleClose, handleBack, handleNext]);

  if (!isOpen) return null;

  const StepComponent = currentStep.component;
  const progressPercentage = ((currentStepIndex + 1) / steps.length) * 100;

  return (
    <>
      {/* Backdrop */}
      <div
        className="fixed inset-0 bg-black/60 backdrop-blur-sm z-50 animate-fadeIn"
        onClick={handleClose}
      />

      {/* Modal */}
      <div className="fixed inset-0 z-50 flex items-center justify-center p-4 pointer-events-none">
        <div
          className={`bg-[var(--bg-primary)] rounded-xl shadow-2xl ${sizeClasses[size]} w-full max-h-[90vh] flex flex-col overflow-hidden pointer-events-auto animate-slideUp`}
          onClick={(e) => e.stopPropagation()}
        >
          {/* Header */}
          <div className="flex-shrink-0 z-10 bg-[var(--bg-primary)] border-b border-[var(--border-secondary)] shadow-sm">
            {/* Title Bar */}
            <div className="flex items-center justify-between p-4 sm:p-6 pb-3 sm:pb-4">
              <div className="flex items-center gap-3 min-w-0 flex-1">
                {icon && (
                  <div className="w-10 h-10 sm:w-12 sm:h-12 flex-shrink-0 rounded-xl bg-gradient-to-br from-[var(--color-primary)]/10 to-[var(--color-primary)]/5 flex items-center justify-center text-[var(--color-primary)] shadow-sm">
                    {icon}
                  </div>
                )}
                <div className="min-w-0 flex-1">
                  <h2 className="text-lg sm:text-xl font-bold text-[var(--text-primary)] truncate">
                    {title}
                  </h2>
                  <p className="text-xs sm:text-sm text-[var(--text-secondary)] mt-0.5 truncate">
                    {currentStep.description || `Paso ${currentStepIndex + 1} de ${steps.length}`}
                  </p>
                </div>
              </div>
              <button
                onClick={handleClose}
                className="p-2 flex-shrink-0 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-secondary)] rounded-lg transition-all hover:scale-110 active:scale-95"
                aria-label="Cerrar"
              >
                <X className="w-5 h-5" />
              </button>
            </div>

            {/* Enhanced Progress Bar */}
            <div className="px-4 sm:px-6 pb-4">
              <div className="flex items-center gap-1.5 sm:gap-2 mb-2.5">
                {steps.map((step, index) => {
                  const isCompleted = index < currentStepIndex;
                  const isCurrent = index === currentStepIndex;
                  const isUpcoming = index > currentStepIndex;

                  return (
                    <div
                      key={step.id}
                      className="flex-1 group relative"
                    >
                      <button
                        onClick={() => isCompleted && goToStep(index)}
                        disabled={!isCompleted}
                        className={`w-full h-2.5 rounded-full transition-all duration-300 relative overflow-hidden ${
                          isCompleted
                            ? 'bg-[var(--color-success)] cursor-pointer hover:bg-[var(--color-success)]/80 hover:h-3'
                            : isCurrent
                            ? 'bg-[var(--color-primary)] shadow-md'
                            : 'bg-[var(--bg-tertiary)] cursor-not-allowed'
                        }`}
                        aria-label={`${translateStepTitle(step.title)} - ${isCompleted ? 'Completado' : isCurrent ? 'En progreso' : 'Pendiente'}`}
                      >
                        {isCurrent && (
                          <div className="absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent animate-shimmer" />
                        )}
                      </button>

                      {/* Tooltip on hover */}
                      <div className="absolute left-1/2 -translate-x-1/2 bottom-full mb-2 px-2 py-1 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded shadow-lg text-xs whitespace-nowrap opacity-0 group-hover:opacity-100 transition-opacity pointer-events-none z-20">
                        {translateStepTitle(step.title)}
                        <div className="absolute top-full left-1/2 -translate-x-1/2 -mt-px border-4 border-transparent border-t-[var(--border-secondary)]" />
                      </div>
                    </div>
                  );
                })}
              </div>
              <div className="flex items-center justify-between text-xs sm:text-sm">
                <div className="flex items-center gap-2 min-w-0 flex-1">
                  <span className="font-semibold text-[var(--text-primary)] truncate">{translateStepTitle(currentStep.title)}</span>
                  {currentStep.isOptional && (
                    <span className="px-2 py-0.5 text-xs bg-[var(--bg-secondary)] text-[var(--text-tertiary)] rounded-full flex-shrink-0">
                      Opcional
                    </span>
                  )}
                </div>
                <span className="text-[var(--text-tertiary)] font-medium ml-2 flex-shrink-0">
                  {currentStepIndex + 1} / {steps.length}
                </span>
              </div>
            </div>
          </div>

          {/* Step Content */}
          <div className="flex-1 min-h-0 p-4 sm:p-6 overflow-y-auto">
            {/* Validation Messages */}
            {validationError && (
              <div className="mb-4 p-3 sm:p-4 bg-red-50 border border-red-200 rounded-lg flex items-start gap-3 animate-slideDown">
                <AlertCircle className="w-5 h-5 text-red-600 flex-shrink-0 mt-0.5" />
                <div className="flex-1 min-w-0">
                  <p className="text-sm font-medium text-red-800">{validationError}</p>
                </div>
                <button
                  onClick={() => setValidationError(null)}
                  className="flex-shrink-0 text-red-400 hover:text-red-600 transition-colors"
                >
                  <X className="w-4 h-4" />
                </button>
              </div>
            )}

            {validationSuccess && (
              <div className="mb-4 p-3 sm:p-4 bg-green-50 border border-green-200 rounded-lg flex items-center gap-3 animate-slideDown">
                <CheckCircle className="w-5 h-5 text-green-600 flex-shrink-0" />
                <p className="text-sm font-medium text-green-800">¡Validación exitosa!</p>
              </div>
            )}

            <StepComponent
              onNext={handleNext}
              onBack={handleBack}
              onComplete={handleComplete}
              isFirstStep={isFirstStep}
              isLastStep={isLastStep}
              currentStepIndex={currentStepIndex}
              totalSteps={steps.length}
              goToStep={goToStep}
              dataRef={dataRef}
              onDataChange={onDataChange}
            />
          </div>

          {/* Footer Navigation */}
          <div className="flex-shrink-0 border-t border-[var(--border-secondary)] bg-[var(--bg-secondary)]/80 backdrop-blur-md px-4 sm:px-6 py-3 sm:py-4 shadow-lg">
            {/* Keyboard Shortcuts Hint */}
            <div className="hidden md:flex items-center justify-center gap-4 text-xs text-[var(--text-tertiary)] mb-2 pb-2 border-b border-[var(--border-secondary)]/50">
              <span className="flex items-center gap-1.5">
                <kbd className="px-1.5 py-0.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-[10px] font-mono">ESC</kbd>
                Cerrar
              </span>
              {!isFirstStep && (
                <span className="flex items-center gap-1.5">
                  <kbd className="px-1.5 py-0.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-[10px] font-mono">←</kbd>
                  Atrás
                </span>
              )}
              <span className="flex items-center gap-1.5">
                <kbd className="px-1.5 py-0.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-[10px] font-mono">→</kbd>
                <kbd className="px-1.5 py-0.5 bg-[var(--bg-primary)] border border-[var(--border-secondary)] rounded text-[10px] font-mono">ENTER</kbd>
                {isLastStep ? 'Completar' : 'Siguiente'}
              </span>
            </div>

            <div className="flex items-center justify-between gap-2 sm:gap-3">
              {/* Back Button */}
              {!isFirstStep ? (
                <button
                  onClick={handleBack}
                  disabled={isValidating}
                  className="px-3 sm:px-4 py-2.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] rounded-lg transition-all font-medium disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center gap-1.5 sm:gap-2 active:scale-95"
                >
                  <ChevronLeft className="w-4 h-4" />
                  <span className="hidden sm:inline">Atrás</span>
                </button>
              ) : (
                <div />
              )}

              {/* Skip Button (for optional steps) */}
              {currentStep.isOptional && !isLastStep && (
                <button
                  onClick={() => setCurrentStepIndex(prev => prev + 1)}
                  disabled={isValidating}
                  className="px-3 sm:px-4 py-2.5 text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-primary)] rounded-lg transition-all font-medium disabled:opacity-50 text-sm active:scale-95"
                >
                  Saltar
                </button>
              )}

              {/* Spacer */}
              <div className="flex-1" />

              {/* Next/Complete Button */}
              <button
                onClick={handleNext}
                disabled={isValidating}
                className="px-4 sm:px-6 py-2.5 bg-[var(--color-primary)] text-white rounded-lg hover:bg-[var(--color-primary-dark)] disabled:opacity-50 disabled:cursor-not-allowed transition-all font-semibold inline-flex items-center gap-2 min-w-[100px] sm:min-w-[140px] justify-center shadow-md hover:shadow-lg active:scale-95"
              >
                {isValidating ? (
                  <>
                    <div className="w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin" />
                    <span className="hidden sm:inline">Validando...</span>
                  </>
                ) : isLastStep ? (
                  <>
                    Completar
                    <ChevronRight className="w-4 h-4" />
                  </>
                ) : (
                  <>
                    <span className="hidden sm:inline">Siguiente</span>
                    <span className="sm:hidden">Sig.</span>
                    <ChevronRight className="w-4 h-4" />
                  </>
                )}
              </button>
            </div>
          </div>
        </div>
      </div>

      {/* Animation Styles */}
      <style>{`
        @keyframes fadeIn {
          from { opacity: 0; }
          to { opacity: 1; }
        }
        @keyframes slideUp {
          from {
            opacity: 0;
            transform: translateY(20px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        @keyframes shimmer {
          0% {
            transform: translateX(-100%);
          }
          100% {
            transform: translateX(100%);
          }
        }
        @keyframes slideDown {
          from {
            opacity: 0;
            transform: translateY(-10px);
          }
          to {
            opacity: 1;
            transform: translateY(0);
          }
        }
        .animate-fadeIn {
          animation: fadeIn 0.2s ease-out;
        }
        .animate-slideUp {
          animation: slideUp 0.3s ease-out;
        }
        .animate-slideDown {
          animation: slideDown 0.3s ease-out;
        }
        .animate-shimmer {
          animation: shimmer 2s infinite;
        }
      `}</style>
    </>
  );
};
