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-kodo-text-main dark:text-kodo-text-main mb-1"
        >
          {label}
        </label>
      )}
      <input
        id={inputId}
        className={cn(
          'w-full px-4 py-2 border rounded-lg focus-visible:outline-none focus-visible:ring-0 transition-colors',
          'dark:bg-kodo-graphite dark:text-white dark:border-kodo-steel',
          error
            ? 'border-kodo-red focus-visible:border-kodo-red/80 dark:border-kodo-red'
            : 'border-kodo-steel focus-visible:border-kodo-cyan/60 dark:border-kodo-steel',
          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-kodo-red dark:text-kodo-red"
          role="alert"
        >
          {error}
        </p>
      )}
    </div>
  );
}