'use client';

import { useMutation } from '@tanstack/react-query';
import { useState } from 'react';
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 { Link, useRouter } from '@/i18n/navigation';
import { useT } from '@/i18n/t';
import { authClient } from '@/lib/auth-client';

/**
 * Flow A3. One screen, no marketing interruptions: email, password, and straight on to
 * the six digit code.
 */
export function RegisterForm() {
  const t = useT();
  const router = useRouter();
  const [emailTaken, setEmailTaken] = useState(false);

  const register = useMutation({
    mutationFn: async (form: { email: string; password: string }) => {
      setEmailTaken(false);
      const { error } = await authClient.signUp.email({ ...form, name: form.email });
      if (error) {
        // better-auth reports an existing account with 422 USER_ALREADY_EXISTS.
        if (error.status === 422 || error.code === 'USER_ALREADY_EXISTS') setEmailTaken(true);
        throw new Error(error.code ?? 'sign_up_failed');
      }
      await authClient.emailOtp.sendVerificationOtp({ email: form.email, type: 'email-verification' });
      return form.email;
    },
    onSuccess: (email) => router.push(`/verificar?email=${encodeURIComponent(email)}`),
  });

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

      <form
        className="space-y-4"
        onSubmit={(event) => {
          event.preventDefault();
          const data = new FormData(event.currentTarget);
          register.mutate({
            email: String(data.get('email') ?? '').trim(),
            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={register.isError}
          />
        </div>

        <div className="space-y-1.5">
          <Label htmlFor="password">{t('auth.register.password')}</Label>
          <Input
            id="password"
            name="password"
            type="password"
            autoComplete="new-password"
            minLength={8}
            required
            aria-describedby="password-hint"
            aria-invalid={register.isError}
          />
          <p id="password-hint" className="text-sm text-[var(--text-muted)]">
            {t('auth.register.passwordHint')}
          </p>
        </div>

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

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

      <p className="text-sm text-[var(--text-muted)]">
        {t('auth.register.haveAccount')}{' '}
        <Link href="/login" className="font-medium text-accent-700 hover:underline">
          {t('auth.register.signIn')}
        </Link>
      </p>
    </Card>
  );
}