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

import { useForm } from 'react-hook-form';
import { zodResolver } from '@hookform/resolvers/zod';
import { z } from 'zod';
import { useNavigate } from 'react-router-dom';
import { useAuthStore } from '../store/authStore';
import { formatErrorMessage } from '@/utils/apiErrorHandler';
import type { LoginRequest } from '@/services/api/auth';
import type { ApiError } from '@/types/api';
import { Input, Button } from '@veza/design-system';
import { logger } from '@/utils/logger';

const loginSchema = z.object({
  email: z.string().email('Email invalide'),
  password: z.string().min(1, 'Le mot de passe est requis'),
  remember_me: z.boolean().optional(),
});

type LoginFormData = z.infer<typeof loginSchema>;

/**
 * LoginForm with Kōdō Design System
 * MIGRATED: Now using Kōdō Input and Button components
 */
export const LoginForm = () => {
  const navigate = useNavigate();
  const { login: loginStore, isLoading, error } = useAuthStore();

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<LoginFormData>({
    resolver: zodResolver(loginSchema),
    defaultValues: {
      email: '',
      password: '',
      remember_me: false,
    },
  });

  const onSubmit = async (data: LoginFormData) => {
    try {
      const loginRequest: LoginRequest = {
        email: data.email,
        password: data.password,
        remember_me: data.remember_me || false,
      };
      await loginStore(loginRequest);
      // Redirection après succès
      navigate('/dashboard');
    } catch (err) {
      // L'erreur est déjà gérée par le store
      logger.error('Login error', {
          error: err instanceof Error ? err.message : String(err),
          stack: err instanceof Error ? err.stack : undefined,
      });
    }
  };

  return (
    <form
      onSubmit={handleSubmit(onSubmit)}
      className="space-y-6"
    >
      <h2 className="text-2xl font-heading font-bold text-center text-white">
        Connexion
      </h2>

      {error && (
        <div
          className="bg-kodo-red/10 border border-kodo-red/50 text-kodo-red px-4 py-3 rounded-lg"
          role="alert"
        >
          <span className="block sm:inline text-sm">
            {formatErrorMessage(error as ApiError)}
          </span>
        </div>
      )}

      <div>
        <Input
          label="Email"
          type="email"
          autoComplete="email"
          required
          {...register('email')}
          placeholder="votre@email.com"
          aria-describedby={errors.email ? 'email-error' : undefined}
          aria-invalid={errors.email ? 'true' : 'false'}
        />
        {errors.email && (
          <p id="email-error" className="text-kodo-red text-xs mt-1" role="alert">
            {errors.email.message}
          </p>
        )}
      </div>

      <div>
        <Input
          label="Mot de passe"
          type="password"
          autoComplete="current-password"
          required
          {...register('password')}
          placeholder="••••••••"
          aria-describedby={errors.password ? 'password-error' : undefined}
          aria-invalid={errors.password ? 'true' : 'false'}
        />
        {errors.password && (
          <p id="password-error" className="text-kodo-red text-xs mt-1" role="alert">
            {errors.password.message}
          </p>
        )}
      </div>

      <div className="flex items-center">
        <input
          type="checkbox"
          {...register('remember_me')}
          id="remember_me"
          className="h-4 w-4 text-kodo-cyan focus:ring-kodo-cyan border-kodo-steel rounded bg-kodo-graphite"
        />
        <label
          htmlFor="remember_me"
          className="ml-2 block text-sm text-kodo-secondary"
        >
          Se souvenir de moi
        </label>
      </div>

      <Button
        type="submit"
        disabled={isLoading}
        variant="primary"
        className="w-full"
      >
        {isLoading ? 'Connexion...' : 'Se connecter'}
      </Button>
    </form>
  );
};