import React, { useState } from 'react';
import { Button, Input, Card } from '../../ui';
import { useAuth } from '../../../hooks/api/useAuth';
import { UserRegistration } from '../../../types/auth.types';
import { useToast } from '../../../hooks/ui/useToast';
import { isMockRegistration } from '../../../config/mock.config';

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

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

export const RegisterForm: React.FC<RegisterFormProps> = ({
  onSuccess,
  onLoginClick,
  className
}) => {
  const [formData, setFormData] = useState<SimpleUserRegistration>({
    full_name: '',
    email: '',
    password: '',
    confirmPassword: '',
    acceptTerms: false
  });
  
  const [errors, setErrors] = useState<Partial<SimpleUserRegistration>>({});
  const [showPassword, setShowPassword] = useState(false);
  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
  
  const { register, isLoading, error } = useAuth();
  const { success: showSuccessToast, error: showErrorToast } = useToast();

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

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    console.log('Form submitted, mock mode:', isMockRegistration());
    
    // FORCED MOCK MODE FOR TESTING - Always bypass for now
    const FORCE_MOCK = true;
    if (FORCE_MOCK || isMockRegistration()) {
      console.log('Mock registration triggered, showing toast and calling onSuccess');
      // Show immediate success notification
      try {
        showSuccessToast('¡Bienvenido! Tu cuenta ha sido creada correctamente.', {
          title: 'Cuenta creada exitosamente'
        });
        console.log('Toast shown, calling onSuccess callback');
      } catch (error) {
        console.error('Error showing toast:', error);
        // Fallback: show browser alert if toast fails
        alert('¡Cuenta creada exitosamente! Redirigiendo al onboarding...');
      }
      
      // Call success immediately (removing delay for easier testing)
      try {
        onSuccess?.();
        console.log('onSuccess called');
      } catch (error) {
        console.error('Error calling onSuccess:', error);
        // Fallback: direct redirect if callback fails
        window.location.href = '/app/onboarding/setup';
      }
      return;
    }
    
    if (!validateForm()) {
      return;
    }
    
    try {
      const registrationData: UserRegistration = {
        full_name: formData.full_name,
        email: formData.email,
        password: formData.password,
        tenant_name: 'Default Bakery', // Default value since we're not collecting it
        phone: '' // Optional field
      };
      
      const success = await register(registrationData);
      
      if (success) {
        showSuccessToast('¡Bienvenido! Tu cuenta ha sido creada correctamente.', {
          title: 'Cuenta creada exitosamente'
        });
        onSuccess?.();
      } else {
        showErrorToast(error || 'No se pudo crear la cuenta. Verifica que el email no esté en uso.', {
          title: 'Error al crear la cuenta'
        });
      }
    } catch (err) {
      showErrorToast('No se pudo conectar con el servidor. Verifica tu conexión a internet.', {
        title: 'Error de conexión'
      });
    }
  };

  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 }));
    }
  };

  return (
    <Card className={`p-8 w-full max-w-md ${className || ''}`} role="main">
      <div className="text-center mb-8">
        <h1 className="text-3xl font-bold text-text-primary mb-2">
          Crear Cuenta
        </h1>
        <p className="text-text-secondary text-lg">
          Únete y comienza hoy mismo
        </p>
      </div>

      <form onSubmit={handleSubmit} className="space-y-6">
        <Input
          label="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="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 2.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}
          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 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>
          }
        />
        
        <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}
          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="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
            </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>
          }
        />
        
        <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="#" className="text-color-primary hover:text-color-primary-dark underline">
                términos y condiciones
              </a>{' '}
              de uso
            </label>
          </div>
          {errors.acceptTerms && (
            <p className="text-color-error text-sm ml-7">{errors.acceptTerms}</p>
          )}
        </div>

        <Button
          type="submit"
          variant="primary"
          size="lg"
          isLoading={isLoading}
          loadingText="Creando cuenta..."
          disabled={isLoading}
          className="w-full"
          onClick={(e) => {
            console.log('Button clicked!');
            // Let form submit handle it naturally
          }}
        >
          Crear Cuenta
        </Button>

        {error && (
          <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" 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>
        )}
      </form>

      {/* Login Link */}
      {onLoginClick && (
        <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;