import React, { useState, useEffect } from 'react';
import { useTranslation } from 'react-i18next';
import { useSearchParams } from 'react-router-dom';
import { Button, Input, Card } from '../../ui';
import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
import { showToast } from '../../../utils/toast';
import { SubscriptionPricingCards } from '../../subscription/SubscriptionPricingCards';
import PaymentForm from './PaymentForm';
import { loadStripe } from '@stripe/stripe-js';
import { Elements } from '@stripe/react-stripe-js';
import { CheckCircle, Clock } from 'lucide-react';
import { usePilotDetection } from '../../../hooks/usePilotDetection';
import { subscriptionService } from '../../../api';

// Helper to get Stripe key from runtime config or build-time env
const getStripeKey = (): string => {
  // Try runtime config first (Kubernetes/Docker)
  if (typeof window !== 'undefined' && window.__RUNTIME_CONFIG__?.VITE_STRIPE_PUBLISHABLE_KEY) {
    return window.__RUNTIME_CONFIG__.VITE_STRIPE_PUBLISHABLE_KEY;
  }
  // Fallback to build-time env (local development)
  return import.meta.env.VITE_STRIPE_PUBLISHABLE_KEY || 'pk_test_51234567890123456789012345678901234567890123456789012345678901234567890123456789012345';
};

// Initialize Stripe with runtime or build-time key
const stripePromise = loadStripe(getStripeKey());

interface RegisterFormProps {
  onSuccess?: () => void;
  onLoginClick?: () => void;
  className?: string;
}

interface SimpleUserRegistration {
  full_name: string;
  email: string;
  password: string;
  confirmPassword: string;
  acceptTerms: boolean;
  marketingConsent: boolean;
  analyticsConsent: boolean;
}

// Define the steps for the registration process
type RegistrationStep = 'basic_info' | 'subscription' | 'payment';

export const RegisterForm: React.FC<RegisterFormProps> = ({
  onSuccess,
  onLoginClick,
  className
}) => {
  const { t } = useTranslation();
  const [formData, setFormData] = useState<SimpleUserRegistration>({
    full_name: '',
    email: '',
    password: '',
    confirmPassword: '',
    acceptTerms: false,
    marketingConsent: false,
    analyticsConsent: false
  });

  const [errors, setErrors] = useState<Partial<SimpleUserRegistration>>({});
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);

  const { register } = useAuthActions();
  const isLoading = useAuthLoading();
  const error = useAuthError();
  

  // Detect pilot program participation
  const { isPilot, couponCode, trialMonths } = usePilotDetection();

  // Read URL parameters for plan persistence
  const [searchParams] = useSearchParams();
  const preSelectedPlan = searchParams.get('plan') as string | null; // starter | professional | enterprise
  const urlPilotParam = searchParams.get('pilot') === 'true';

  // Multi-step form state
  const [currentStep, setCurrentStep] = useState<RegistrationStep>('basic_info');
  const [selectedPlan, setSelectedPlan] = useState<string>(preSelectedPlan || 'starter');
  const [useTrial, setUseTrial] = useState<boolean>(isPilot || urlPilotParam);  // Auto-enable trial for pilot customers
  const [bypassPayment, setBypassPayment] = useState<boolean>(false);
  const [selectedPlanMetadata, setSelectedPlanMetadata] = useState<any>(null);
  
  // Helper function to determine password match status
 const getPasswordMatchStatus = () => {
    if (!formData.confirmPassword) return 'empty';
    if (formData.password === formData.confirmPassword) return 'match';
    return 'mismatch';
  };

  const passwordMatchStatus = getPasswordMatchStatus();

  // Load plan metadata when plan changes
  useEffect(() => {
    const loadPlanMetadata = async () => {
      try {
        const plans = await subscriptionService.fetchAvailablePlans();
        const planData = plans.plans[selectedPlan as keyof typeof plans.plans];
        setSelectedPlanMetadata(planData);
      } catch (err) {
        console.error('Failed to load plan metadata:', err);
      }
    };
    loadPlanMetadata();
  }, [selectedPlan]);

  // SECURITY: Removed localStorage usage for registration progress
  // Registration form data (including passwords) should NEVER be stored in localStorage
  // due to XSS vulnerability risks. Form state is kept in memory only and submitted
  // directly to backend via secure API calls.

  // Clean up any old registration_progress data on mount (security fix)
  useEffect(() => {
    try {
      localStorage.removeItem('registration_progress');
      localStorage.removeItem('wizardState'); // Clean up wizard state too
    } catch (err) {
      console.error('Error cleaning up old localStorage data:', err);
    }
  }, []);

  const validateForm = (): boolean => {
    const newErrors: Partial<SimpleUserRegistration> = {};
    
    if (!formData.full_name.trim()) {
      newErrors.full_name = t('auth:validation.first_name_required', 'El nombre completo es requerido');
    } else if (formData.full_name.trim().length < 2) {
      newErrors.full_name = t('auth:validation.field_required', 'El nombre debe tener al menos 2 caracteres');
    }
    
    if (!formData.email.trim()) {
      newErrors.email = t('auth:validation.email_required', 'El email es requerido');
    } else if (!/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/.test(formData.email)) {
      newErrors.email = t('auth:validation.email_invalid', 'Por favor, ingrese un email válido');
    }
    
    if (!formData.password) {
      newErrors.password = t('auth:validation.password_required', 'La contraseña es requerida');
    } else {
      const passwordErrors = getPasswordErrors(formData.password);
      if (passwordErrors.length > 0) {
        newErrors.password = passwordErrors[0]; // Show first error
      }
    }
    
    if (!formData.confirmPassword) {
      newErrors.confirmPassword = t('auth:register.confirm_password', 'Confirma tu contraseña');
    } else if (formData.password !== formData.confirmPassword) {
      newErrors.confirmPassword = t('auth:validation.passwords_must_match', 'Las contraseñas no coinciden');
    }
    
    if (!formData.acceptTerms) {
      newErrors.acceptTerms = t('auth:validation.terms_required', 'Debes aceptar los términos y condiciones');
    }
    
    setErrors(newErrors);
    return Object.keys(newErrors).length === 0;
  };

  const handleNextStep = () => {
    if (currentStep === 'basic_info') {
      if (!validateForm()) {
        return;
      }
      // OPTION A: Skip subscription step if plan was pre-selected from pricing page
      if (preSelectedPlan) {
        setCurrentStep('payment');
      } else {
        setCurrentStep('subscription');
      }
    } else if (currentStep === 'subscription') {
      setCurrentStep('payment');
    }
  };

  const handlePreviousStep = () => {
    if (currentStep === 'payment' && preSelectedPlan) {
      // Go back to basic_info (skip subscription step)
      setCurrentStep('basic_info');
    } else if (currentStep === 'payment') {
      setCurrentStep('subscription');
    } else if (currentStep === 'subscription') {
      setCurrentStep('basic_info');
    }
  };

  const handleRegistrationSubmit = async (paymentMethodId?: string) => {
    try {
      const registrationData = {
        full_name: formData.full_name,
        email: formData.email,
        password: formData.password,
        tenant_name: 'Default Bakery', // Default value since we're not collecting it
        subscription_plan: selectedPlan,
        use_trial: useTrial,
        payment_method_id: paymentMethodId,
        // Include coupon code if pilot customer
        coupon_code: isPilot ? couponCode : undefined,
        // Include consent data
        terms_accepted: formData.acceptTerms,
        privacy_accepted: formData.acceptTerms,
        marketing_consent: formData.marketingConsent,
        analytics_consent: formData.analyticsConsent,
      };

      await register(registrationData);

      const successMessage = isPilot
        ? '¡Bienvenido al programa piloto! Tu cuenta ha sido creada con 3 meses gratis.'
        : '¡Bienvenido! Tu cuenta ha sido creada correctamente.';

      showToast.success(t('auth:register.registering', successMessage), {
        title: t('auth:alerts.success_create', 'Cuenta creada exitosamente')
      });
      onSuccess?.();
    } catch (err) {
      showToast.error(error || t('auth:register.register_button', 'No se pudo crear la cuenta. Verifica que el email no esté en uso.'), {
        title: t('auth:alerts.error_create', 'Error al crear la cuenta')
      });
    }
  };

  const handlePaymentSuccess = () => {
    handleRegistrationSubmit(); // In a real app, you would pass the payment method ID
  };

  const handlePaymentError = (errorMessage: string) => {
    showToast.error(errorMessage, {
      title: 'Error en el pago'
    });
  };

 const handleInputChange = (field: keyof SimpleUserRegistration) => (e: React.ChangeEvent<HTMLInputElement>) => {
    const value = e.target.type === 'checkbox' ? e.target.checked : e.target.value;
    setFormData(prev => ({ ...prev, [field]: value }));
    if (errors[field]) {
      setErrors(prev => ({ ...prev, [field]: undefined }));
    }
 };

  // Render step indicator
  const renderStepIndicator = () => {
    // Show 2 steps if plan is pre-selected, 3 steps otherwise
    const steps = preSelectedPlan
      ? [
          { key: 'basic_info', label: 'Información', number: 1, time: '2 min' },
          { key: 'payment', label: 'Pago', number: 2, time: '2 min' }
        ]
      : [
          { key: 'basic_info', label: 'Información', number: 1, time: '2 min' },
          { key: 'subscription', label: 'Plan', number: 2, time: '1 min' },
          { key: 'payment', label: 'Pago', number: 3, time: '2 min' }
        ];

    const getStepIndex = (step: RegistrationStep) => {
      return steps.findIndex(s => s.key === step);
    };

    const currentIndex = getStepIndex(currentStep);

    return (
      <div className="mb-6 sm:mb-8">
        <div className="flex justify-center items-center">
          {steps.map((step, index) => (
            <React.Fragment key={step.key}>
              <div className="flex flex-col items-center">
                <div className={`flex items-center justify-center w-8 h-8 sm:w-10 sm:h-10 rounded-full font-semibold text-sm transition-all duration-200 ${
                  index < currentIndex
                    ? 'bg-color-success text-white'
                    : index === currentIndex
                    ? 'bg-color-primary text-white ring-4 ring-color-primary/20'
                    : 'bg-bg-secondary text-text-secondary'
                }`}>
                  {index < currentIndex ? (
                    <CheckCircle className="w-5 h-5" />
                  ) : (
                    step.number
                  )}
                </div>
                <div className="flex flex-col items-center mt-1 sm:mt-2">
                  <span className={`text-[10px] sm:text-xs font-medium block ${
                    index <= currentIndex ? 'text-text-primary' : 'text-text-secondary'
                  }`}>
                    {step.label}
                  </span>
                  <span className={`text-[8px] sm:text-[10px] flex items-center gap-0.5 ${
                    index === currentIndex ? 'text-text-tertiary' : 'hidden sm:flex text-text-tertiary'
                  }`}>
                    <Clock className="w-2 h-2 sm:w-3 sm:h-3" />
                    {step.time}
                  </span>
                </div>
              </div>
              {index < steps.length - 1 && (
                <div className={`h-0.5 w-8 sm:w-16 mx-2 sm:mx-4 transition-all duration-200 ${
                  index < currentIndex ? 'bg-color-success' : 'bg-border-primary'
                }`} />
              )}
            </React.Fragment>
          ))}
        </div>
      </div>
    );
  };

  // Render current step
  const renderCurrentStep = () => {
    switch (currentStep) {
      case 'basic_info':
        return (
          <div className="space-y-4 sm:space-y-6">
            <div className="text-center mb-4 sm:mb-6">
              <h1 className="text-2xl sm:text-3xl font-bold text-text-primary mb-2">
                {t('auth:register.title', 'Crear Cuenta')}
              </h1>
              <p className="text-text-secondary text-sm sm:text-base">
                {t('auth:register.subtitle', 'Únete y comienza hoy mismo')}
              </p>
            </div>

            <form onSubmit={(e) => { e.preventDefault(); handleNextStep(); }} className="space-y-6">
              <Input
                label={t('auth:register.first_name', 'Nombre Completo')}
                placeholder="Juan Pérez García"
                value={formData.full_name}
                onChange={handleInputChange('full_name')}
                error={errors.full_name}
                disabled={isLoading}
                required
                autoComplete="name"
                leftIcon={
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                  </svg>
                }
              />
              
              <Input
                type="email"
                label={t('auth:register.email', 'Correo Electrónico')}
                placeholder="tu.email@ejemplo.com"
                value={formData.email}
                onChange={handleInputChange('email')}
                error={errors.email}
                disabled={isLoading}
                required
                autoComplete="email"
                leftIcon={
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M16 12a4 4 0 10-8 0 4 4 0 008 0zm0 0v1.5a2.5 0 005 0V12a9 9 0 10-9 9m4.5-1.206a8.959 8.959 0 01-4.5 1.207" />
                  </svg>
                }
              />
              
              <Input
                type={showPassword ? 'text' : 'password'}
                label="Contraseña"
                placeholder="Contraseña segura"
                value={formData.password}
                onChange={handleInputChange('password')}
                error={errors.password}
                disabled={isLoading}
                maxLength={128}
                autoComplete="new-password"
                required
                leftIcon={
                  <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                  </svg>
                }
                rightIcon={
                  <button
                    type="button"
                    onClick={() => setShowPassword(!showPassword)}
                    className="text-text-secondary hover:text-text-primary"
                    aria-label={showPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
                  >
                    {showPassword ? (
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
                      </svg>
                    ) : (
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                      </svg>
                    )}
                  </button>
                }
              />
              
              {/* Password Criteria - Show when user is typing */}
              {formData.password && (
                <PasswordCriteria 
                  password={formData.password}
                  className="mt-2"
                  showOnlyFailed={false}
                />
              )}
              
              <div className="relative">
                <Input
                  type={showConfirmPassword ? 'text' : 'password'}
                  label="Confirmar Contraseña"
                  placeholder="Repite tu contraseña"
                  value={formData.confirmPassword}
                  onChange={handleInputChange('confirmPassword')}
                  error={errors.confirmPassword}
                  disabled={isLoading}
                  maxLength={128}
                  autoComplete="new-password"
                  required
                  className={
                    passwordMatchStatus === 'match' && formData.confirmPassword
                      ? 'border-color-success focus:border-color-success ring-color-success' 
                      : passwordMatchStatus === 'mismatch' && formData.confirmPassword
                      ? 'border-color-error focus:border-color-error ring-color-error'
                      : ''
                  }
                  leftIcon={
                    passwordMatchStatus === 'match' && formData.confirmPassword ? (
                      <svg className="w-5 h-5 text-color-success" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    ) : passwordMatchStatus === 'mismatch' && formData.confirmPassword ? (
                      <svg className="w-5 h-5 text-color-error" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10 14l2-2m0 0l2-2m-2 2l-2-2m2 2l2 2m7-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                      </svg>
                    ) : (
                      <svg className="w-5 h-5 text-text-secondary" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 15v2m-6 0h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
                      </svg>
                    )
                  }
                rightIcon={
                  <button
                    type="button"
                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
                    className="text-text-secondary hover:text-text-primary"
                    aria-label={showConfirmPassword ? 'Ocultar contraseña' : 'Mostrar contraseña'}
                  >
                    {showConfirmPassword ? (
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.878 9.878L3 3m6.878 6.878L21 21" />
                      </svg>
                    ) : (
                      <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                        <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" />
                      </svg>
                    )}
                  </button>
                }
              />
                
                {/* Password Match Status Message */}
                {formData.confirmPassword && (
                  <div className="mt-2 transition-all duration-300 ease-in-out">
                    {passwordMatchStatus === 'match' ? (
                      <div className="flex items-center space-x-2 text-color-success animate-fade-in">
                        <div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-success/10 flex items-center justify-center">
                          <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clipRule="evenodd" />
                          </svg>
                        </div>
                        <span className="text-sm font-medium">¡Las contraseñas coinciden!</span>
                      </div>
                    ) : (
                      <div className="flex items-center space-x-2 text-color-error animate-fade-in">
                        <div className="flex-shrink-0 w-5 h-5 rounded-full bg-color-error/10 flex items-center justify-center">
                          <svg className="w-3 h-3" fill="currentColor" viewBox="0 0 20 20">
                            <path fillRule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clipRule="evenodd" />
                          </svg>
                        </div>
                        <span className="text-sm font-medium">Las contraseñas no coinciden</span>
                      </div>
                    )}
                  </div>
                )}
              </div>
              
              <div className="space-y-4 pt-4 border-t border-border-primary">
                <div className="flex items-start space-x-3">
                  <input
                    type="checkbox"
                    id="acceptTerms"
                    checked={formData.acceptTerms}
                    onChange={handleInputChange('acceptTerms')}
                    className="mt-1 h-4 w-4 rounded border-border-primary text-color-primary focus:ring-color-primary focus:ring-offset-0"
                    disabled={isLoading}
                  />
                  <label htmlFor="acceptTerms" className="text-sm text-text-secondary cursor-pointer">
                    Acepto los{' '}
                    <a href="/terms" target="_blank" rel="noopener noreferrer" className="text-color-primary hover:text-color-primary-dark underline">
                      términos y condiciones
                    </a>{' '}
                    y la{' '}
                    <a href="/privacy" target="_blank" rel="noopener noreferrer" className="text-color-primary hover:text-color-primary-dark underline">
                      política de privacidad
                    </a>{' '}
                    <span className="text-color-error">*</span>
                  </label>
                </div>
                {errors.acceptTerms && (
                  <p className="text-color-error text-sm ml-7">{errors.acceptTerms}</p>
                )}

                <div className="flex items-start space-x-3">
                  <input
                    type="checkbox"
                    id="marketingConsent"
                    checked={formData.marketingConsent}
                    onChange={handleInputChange('marketingConsent')}
                    className="mt-1 h-4 w-4 rounded border-border-primary text-color-primary focus:ring-color-primary focus:ring-offset-0"
                    disabled={isLoading}
                  />
                  <label htmlFor="marketingConsent" className="text-sm text-text-secondary cursor-pointer">
                    Deseo recibir comunicaciones de marketing y promociones
                  </label>
                </div>

                <div className="flex items-start space-x-3">
                  <input
                    type="checkbox"
                    id="analyticsConsent"
                    checked={formData.analyticsConsent}
                    onChange={handleInputChange('analyticsConsent')}
                    className="mt-1 h-4 w-4 rounded border-border-primary text-color-primary focus:ring-color-primary focus:ring-offset-0"
                    disabled={isLoading}
                  />
                  <label htmlFor="analyticsConsent" className="text-sm text-text-secondary cursor-pointer">
                    Acepto el uso de cookies analíticas para mejorar la experiencia
                  </label>
                </div>
              </div>

              <div className="flex justify-end pt-4">
                <Button
                  type="submit"
                  variant="primary"
                  size="lg"
                  disabled={isLoading || !validatePassword(formData.password) || !formData.acceptTerms || passwordMatchStatus !== 'match'}
                  className="w-full sm:w-48"
                >
                  Siguiente
                </Button>
              </div>
            </form>
          </div>
        );
      
      case 'subscription':
        return (
          <div className="space-y-6">
            <div className="text-center">
              <h1 className="text-2xl sm:text-3xl font-bold text-text-primary mb-2">
                {t('auth:subscription.select_plan', 'Selecciona tu plan')}
              </h1>
              <p className="text-text-secondary text-sm sm:text-base">
                {t('auth:subscription.choose_plan', 'Elige el plan que mejor se adapte a tu negocio')}
              </p>
            </div>

            <SubscriptionPricingCards
              mode="selection"
              selectedPlan={selectedPlan}
              onPlanSelect={setSelectedPlan}
              showPilotBanner={isPilot}
              pilotCouponCode={couponCode}
              pilotTrialMonths={trialMonths}
            />

            <div className="flex flex-col sm:flex-row justify-between gap-3 sm:gap-4 pt-2 border-t border-border-primary">
              <Button
                variant="outline"
                size="lg"
                onClick={handlePreviousStep}
                disabled={isLoading}
                className="w-full sm:w-48 order-2 sm:order-1"
              >
                Anterior
              </Button>
              <Button
                variant="primary"
                size="lg"
                onClick={handleNextStep}
                disabled={isLoading}
                className="w-full sm:w-48 order-1 sm:order-2"
              >
                Siguiente
              </Button>
            </div>
          </div>
        );
      
      case 'payment':
        return (
          <div className="space-y-4 sm:space-y-6">
            <div className="text-center mb-4 sm:mb-6">
              <h1 className="text-2xl sm:text-3xl font-bold text-text-primary mb-2">
                {t('auth:payment.payment_info', 'Información de Pago')}
              </h1>
              <p className="text-text-secondary text-xs sm:text-sm">
                {t('auth:payment.secure_payment', 'Tu información de pago está protegida con encriptación de extremo a extremo')}
              </p>
            </div>

            {/* Plan Summary Card */}
            {selectedPlanMetadata && (
              <Card className="p-6 bg-gradient-to-r from-blue-50 to-indigo-50 dark:from-blue-900/20 dark:to-indigo-900/20 border-2 border-blue-200 dark:border-blue-800">
                <h3 className="text-lg font-bold text-text-primary mb-4 flex items-center gap-2">
                  <CheckCircle className="w-5 h-5 text-color-primary" />
                  Resumen de tu Plan
                </h3>
                <div className="space-y-3">
                  <div className="flex justify-between items-center">
                    <span className="text-text-secondary">Plan seleccionado:</span>
                    <span className="font-bold text-color-primary text-lg">{selectedPlanMetadata.name}</span>
                  </div>
                  <div className="flex justify-between items-center">
                    <span className="text-text-secondary">Precio mensual:</span>
                    <span className="font-semibold text-text-primary">
                      {subscriptionService.formatPrice(selectedPlanMetadata.monthly_price)}/mes
                    </span>
                  </div>
                  {useTrial && (
                    <div className="flex justify-between items-center pt-3 border-t border-blue-200 dark:border-blue-800">
                      <span className="text-green-700 dark:text-green-400 font-medium">Período de prueba:</span>
                      <span className="font-bold text-green-700 dark:text-green-400">
                        {isPilot ? `${trialMonths} meses GRATIS` : '14 días gratis'}
                      </span>
                    </div>
                  )}
                  <div className="pt-3 border-t border-blue-200 dark:border-blue-800">
                    <div className="flex justify-between items-center text-sm">
                      <span className="text-text-tertiary">Total hoy:</span>
                      <span className="font-bold text-xl text-color-success">€0.00</span>
                    </div>
                    <p className="text-xs text-text-tertiary mt-2 text-center">
                      {useTrial
                        ? `Se te cobrará ${subscriptionService.formatPrice(selectedPlanMetadata.monthly_price)} después del período de prueba`
                        : 'Tarjeta requerida para validación'
                      }
                    </p>
                  </div>
                </div>
              </Card>
            )}

            <Elements stripe={stripePromise}>
              <PaymentForm
                userName={formData.full_name}
                userEmail={formData.email}
                onPaymentSuccess={handlePaymentSuccess}
                onPaymentError={handlePaymentError}
                bypassPayment={bypassPayment}
                onBypassToggle={() => setBypassPayment(!bypassPayment)}
              />
            </Elements>

            <div className="flex justify-start pt-4">
              <Button
                variant="outline"
                size="lg"
                onClick={handlePreviousStep}
                disabled={isLoading}
                className="w-full sm:w-48"
              >
                Anterior
              </Button>
            </div>
          </div>
        );
    }
  };

  return (
    <Card className={`p-4 sm:p-6 lg:p-8 w-full max-w-6xl ${className || ''}`} role="main">
      {renderStepIndicator()}
      {renderCurrentStep()}

      {error && currentStep !== 'payment' && (
        <div className="bg-color-error/10 border border-color-error/20 text-color-error px-4 py-3 rounded-lg text-sm flex items-start space-x-3 mt-4" role="alert">
          <svg className="w-5 h-5 mt-0.5 flex-shrink-0" fill="currentColor" viewBox="0 0 20 20">
            <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
          </svg>
          <span>{error}</span>
        </div>
      )}

      {/* Login Link - only show on first step */}
      {onLoginClick && currentStep === 'basic_info' && (
        <div className="mt-8 text-center border-t border-border-primary pt-6">
          <p className="text-text-secondary mb-4">
            ¿Ya tienes una cuenta?
          </p>
          <Button
            variant="ghost"
            onClick={onLoginClick}
            disabled={isLoading}
            className="text-color-primary hover:text-color-primary-dark"
          >
            Iniciar Sesión
          </Button>
        </div>
      )}
    </Card>
  );
};

export default RegisterForm;