veza/apps/web/src/features/auth/components/register-page/RegisterPageForm.tsx

import { Link } from 'react-router-dom';
import { Button } from '@/components/ui/button';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Checkbox } from '@/components/ui/checkbox';
import { Loader2 } from 'lucide-react';
import { PasswordStrengthIndicator } from '../PasswordStrengthIndicator';
import type { RegisterFormData } from '../../types';
import type { FormErrors } from './useRegisterPage';

interface RegisterPageFormProps {
  formData: RegisterFormData;
  errors: FormErrors;
  acceptedTerms: boolean;
  onAcceptedTermsChange: (checked: boolean) => void;
  onErrorsChange: (updater: (prev: FormErrors) => FormErrors) => void;
  loading: boolean;
  error: Error | null;
  usernameAvailable: boolean | null;
  checkingUsername: boolean;
  onFieldChange: (field: keyof RegisterFormData, value: string) => void;
  onFieldBlur: (field: keyof RegisterFormData) => void;
  onSubmit: (e: React.FormEvent) => void;
}

export function RegisterPageForm({
  formData,
  errors,
  acceptedTerms,
  onAcceptedTermsChange,
  onErrorsChange,
  loading,
  error,
  usernameAvailable,
  checkingUsername,
  onFieldChange,
  onFieldBlur,
  onSubmit,
}: RegisterPageFormProps) {
  return (
    <form
      onSubmit={onSubmit}
      className="space-y-4"
      aria-label="Formulaire d'inscription"
    >
      {error && (
        <div
          className="bg-destructive/10 border border-destructive text-destructive px-4 py-4 rounded-lg"
          role="alert"
          aria-live="assertive"
        >
          {error.message}
        </div>
      )}
      <div className="space-y-2">
        <Label htmlFor="register-username">Nom d'utilisateur *</Label>
        <Input
          id="register-username"
          type="text"
          value={formData.username}
          onChange={(e) => onFieldChange('username', e.target.value)}
          onBlur={() => onFieldBlur('username')}
          required
          autoComplete="username"
          aria-invalid={errors.username ? 'true' : 'false'}
        />
        {errors.username && (
          <p className="mt-1 text-sm text-destructive" role="alert">
            {errors.username}
          </p>
        )}
        {formData.username.length >= 3 && (
          <div className="mt-1" aria-live="polite" aria-atomic="true">
            {checkingUsername ? (
              <p className="text-xs text-muted-foreground" role="status">
                <span className="sr-only">Vérification en cours</span>
                <span aria-hidden>Vérification en cours...</span>
              </p>
            ) : usernameAvailable === true ? (
              <p className="text-xs text-success" role="status">
                <span className="sr-only">Disponible:</span>
                <span aria-hidden>✓</span> Ce nom d'utilisateur est disponible
              </p>
            ) : usernameAvailable === false ? (
              <p className="text-xs text-destructive" role="alert">
                <span className="sr-only">Indisponible:</span>
                <span aria-hidden>✗</span> Ce nom d'utilisateur est déjà pris
              </p>
            ) : null}
          </div>
        )}
      </div>
      <div className="space-y-2">
        <Label htmlFor="register-email">Email *</Label>
        <Input
          id="register-email"
          type="email"
          value={formData.email}
          onChange={(e) => onFieldChange('email', e.target.value)}
          onBlur={() => onFieldBlur('email')}
          required
          autoComplete="email"
          aria-invalid={errors.email ? 'true' : 'false'}
        />
        {errors.email && (
          <p className="mt-1 text-sm text-destructive" role="alert">
            {errors.email}
          </p>
        )}
      </div>
      <div className="space-y-2">
        <Label htmlFor="register-password">Mot de passe *</Label>
        <Input
          id="register-password"
          type="password"
          value={formData.password}
          onChange={(e) => onFieldChange('password', e.target.value)}
          onBlur={() => onFieldBlur('password')}
          required
          autoComplete="new-password"
          aria-invalid={errors.password ? 'true' : 'false'}
        />
        {errors.password && (
          <p className="mt-1 text-sm text-destructive" role="alert">
            {errors.password}
          </p>
        )}
        <PasswordStrengthIndicator password={formData.password} />
      </div>
      <div className="space-y-2">
        <Label htmlFor="register-password_confirm">Confirmer le mot de passe *</Label>
        <Input
          id="register-password_confirm"
          type="password"
          value={formData.password_confirm}
          onChange={(e) => onFieldChange('password_confirm', e.target.value)}
          onBlur={() => onFieldBlur('password_confirm')}
          required
          autoComplete="new-password"
          aria-invalid={errors.password_confirm ? 'true' : 'false'}
        />
        {errors.password_confirm && (
          <p className="mt-1 text-sm text-destructive" role="alert">
            {errors.password_confirm}
          </p>
        )}
      </div>
      <div className="flex items-start">
        <Checkbox
          id="register-terms"
          checked={acceptedTerms}
          onCheckedChange={(checked) => {
            onAcceptedTermsChange(checked as boolean);
            if (errors.terms) onErrorsChange((prev) => ({ ...prev, terms: undefined }));
          }}
          required
          aria-invalid={errors.terms ? 'true' : 'false'}
          aria-describedby={errors.terms ? 'terms-error' : 'terms-description'}
        />
        <label htmlFor="register-terms" className="ml-2 block text-sm text-foreground">
          J'accepte les{' '}
          <Link
            to="/terms"
            className="text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded"
            aria-label="Lire les conditions d'utilisation"
          >
            conditions d'utilisation
          </Link>{' '}
          et la{' '}
          <Link
            to="/privacy"
            className="text-primary hover:underline focus:outline-none focus-visible:ring-2 focus-visible:ring-primary rounded"
            aria-label="Lire la politique de confidentialité"
          >
            politique de confidentialité
          </Link>
        </label>
      </div>
      <p id="terms-description" className="sr-only">
        Vous devez accepter les conditions d'utilisation et la politique de confidentialité pour créer un compte
      </p>
      {errors.terms && (
        <p id="terms-error" className="text-sm text-destructive" role="alert">
          {errors.terms}
        </p>
      )}
      <Button type="submit" disabled={loading} className="w-full">
        {loading ? (
          <>
            <Loader2 className="w-4 h-4 mr-2 animate-spin" />
            Inscription en cours...
          </>
        ) : (
          "S'inscrire"
        )}
      </Button>
    </form>
  );
}