bakery-ia/frontend/src/components/domain/auth/RegisterForm.tsx

import React, { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button, Input, Card } from '../../ui';
import { PasswordCriteria, validatePassword, getPasswordErrors } from '../../ui/PasswordCriteria';
import { useAuthActions, useAuthLoading, useAuthError } from '../../../stores/auth.store';
import { useToast } from '../../../hooks/ui/useToast';

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 { t } = useTranslation();
  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 } = useAuthActions();
  const isLoading = useAuthLoading();
  const error = useAuthError();
  const { success: showSuccessToast, error: showErrorToast } = useToast();

  // 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();

  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 handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault();
    
    if (!validateForm()) {
      return;
    }
    
    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
      };
      
      await register(registrationData);
      
      showSuccessToast(t('auth:register.registering', '¡Bienvenido! Tu cuenta ha sido creada correctamente.'), {
        title: t('auth:alerts.success_create', 'Cuenta creada exitosamente')
      });
      onSuccess?.();
    } catch (err) {
      showErrorToast(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 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">
          {t('auth:register.title', 'Crear Cuenta')}
        </h1>
        <p className="text-text-secondary text-lg">
          {t('auth:register.subtitle', 'Únete y comienza hoy mismo')}
        </p>
      </div>

      <form onSubmit={handleSubmit} 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 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}
          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 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="#" 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 || !validatePassword(formData.password) || !formData.acceptTerms || passwordMatchStatus !== 'match'}
          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;