'use client';

import { useMutation } from '@tanstack/react-query';
import { useRouter } from '@/i18n/navigation';
import { useT } from '@/i18n/t';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { authClient } from '@/lib/auth-client';

export function LoginForm() {
  const t = useT();
  const router = useRouter();

  const signIn = useMutation({
    mutationFn: async (form: { email: string; password: string }) => {
      const { error } = await authClient.signIn.email(form);
      if (error) throw new Error(error.message ?? 'sign_in_failed');
    },
    onSuccess: () => router.push('/inicio'),
  });

  return (
    <Card className="space-y-6">
      <h1 className="text-2xl font-semibold tracking-tight text-balance">{t('auth.login.title')}</h1>

      <form
        className="space-y-4"
        onSubmit={(event) => {
          event.preventDefault();
          const data = new FormData(event.currentTarget);
          signIn.mutate({
            email: String(data.get('email') ?? ''),
            password: String(data.get('password') ?? ''),
          });
        }}
      >
        <div className="space-y-1.5">
          <Label htmlFor="email">{t('auth.register.email')}</Label>
          <Input
            id="email"
            name="email"
            type="email"
            autoComplete="email"
            required
            aria-invalid={signIn.isError}
          />
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="password">{t('auth.login.password')}</Label>
          <Input
            id="password"
            name="password"
            type="password"
            autoComplete="current-password"
            required
            aria-invalid={signIn.isError}
          />
        </div>

        {signIn.isError ? (
          <p role="alert" className="text-sm text-overdue">
            {t('auth.login.failed')}
          </p>
        ) : null}

        <Button type="submit" size="lg" block disabled={signIn.isPending}>
          {signIn.isPending ? t('common.loading') : t('auth.login.submit')}
        </Button>
      </form>
    </Card>
  );
}