veza/apps/web/src/features/auth/components/AuthInput.tsx

import React, { useId } from 'react';
import { cn } from '@/lib/utils';

interface AuthInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
  error?: string;
  label?: string;
}

export function AuthInput({
  error,
  label,
  className,
  id,
  ...props
}: AuthInputProps) {
  // CRITIQUE FIX #5: Utiliser useId() de React pour générer un ID stable
  // qui ne change pas entre les renders, contrairement à Math.random()
  const generatedId = useId();
  const inputId = id || generatedId;

  return (
    <div className="w-full">
      {label && (
        <label
          htmlFor={inputId}
          className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-1"
        >
          {label}
        </label>
      )}
      <input
        id={inputId}
        className={cn(
          'w-full px-4 py-2 border rounded-lg focus:outline-none focus:ring-2 transition-colors',
          'dark:bg-gray-800 dark:text-white dark:border-gray-600',
          error
            ? 'border-red-500 focus:ring-red-500 dark:border-red-500'
            : 'border-gray-300 focus:ring-blue-500 dark:border-gray-600',
          className,
        )}
        aria-invalid={error ? 'true' : 'false'}
        aria-describedby={error ? `${inputId}-error` : undefined}
        aria-required={props.required ? 'true' : undefined}
        {...props}
        // CRITIQUE FIX #4: Définir autoComplete APRÈS le spread pour éviter qu'il soit écrasé
        // Préférer props.autoComplete s'il est défini, sinon utiliser une valeur par défaut basée sur le type
        autoComplete={props.autoComplete !== undefined 
          ? props.autoComplete 
          : (props.type === 'email' ? 'email' 
            : props.type === 'password' ? 'current-password' 
            : undefined)}
        // CRITIQUE FIX #6: S'assurer que l'attribut HTML5 required est présent si props.required est true
        // Le spread {...props} devrait déjà inclure required, mais on le définit explicitement pour être sûr
        required={props.required}
      />
      {error && (
        <p
          id={`${inputId}-error`}
          className="mt-1 text-sm text-red-600 dark:text-red-400"
          role="alert"
        >
          {error}
        </p>
      )}
    </div>
  );
}