import React, { useId, useState } from 'react';
import { cn } from '@/lib/utils';
import { Eye, EyeOff } from 'lucide-react';

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

export function AuthInput({
  error,
  label,
  className,
  id,
  showPasswordToggle,
  type,
  ...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;
  const [showPassword, setShowPassword] = useState(false);
  const inputType = type === 'password' && showPassword ? 'text' : type;
  const hasToggle = type === 'password' && showPasswordToggle;

  return (
    <div className="w-full">
      {label && (
        <label
          htmlFor={inputId}
          className="block text-sm font-medium text-foreground mb-1"
        >
          {label}
        </label>
      )}
      <div className="relative">
        <input
          id={inputId}
          type={inputType}
          className={cn(
            'w-full px-4 py-3 border rounded-xl focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30 transition-all duration-[var(--sumi-duration-slow)] ease-[var(--sumi-ease-out)]',
            // Focus glow — subtle but visible
            'focus-visible:shadow-[var(--sumi-shadow-glow)]',
            'bg-[var(--sumi-surface-subtle)] border-[var(--sumi-border-default)] text-foreground placeholder:text-muted-foreground/60',
            'hover:border-[var(--sumi-border-strong)] hover:bg-[var(--sumi-surface-card)]',
            error
              ? 'border-destructive focus-visible:border-destructive'
              : 'focus-visible:border-primary',
            hasToggle ? 'pr-10' : '',
            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
              : type === 'email'
                ? 'email'
                : 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}
        />
        {/* Password visibility toggle */}
        {hasToggle && (
          <button
            type="button"
            onClick={() => setShowPassword(!showPassword)}
            className="absolute right-3 top-1/2 -translate-y-1/2 text-muted-foreground hover:text-foreground transition-opacity transition-colors duration-[var(--duration-fast)]"
            aria-label={showPassword ? 'Hide password' : 'Show password'}
            tabIndex={-1}
          >
            {showPassword ? <EyeOff className="h-4 w-4" /> : <Eye className="h-4 w-4" />}
          </button>
        )}
      </div>
      {error && (
        <p
          id={`${inputId}-error`}
          className="mt-1 text-sm text-destructive animate-shake"
          role="alert"
        >
          {error}
        </p>
      )}
    </div>
  );
}