'use client';

import { useMutation } from '@tanstack/react-query';
import { useSearchParams } from 'next/navigation';
import { useRef, useState } from 'react';
import { Button } from '@/components/ui/button';
import { Card } from '@/components/ui/card';
import { Label } from '@/components/ui/label';
import { useRouter } from '@/i18n/navigation';
import { useT } from '@/i18n/t';
import { authClient } from '@/lib/auth-client';
import { cn } from '@/lib/utils';

const LENGTH = 6;

/** Flow A3: six boxes that advance as you type, and accept a pasted code whole. */
export function VerifyForm() {
  const t = useT();
  const router = useRouter();
  const email = useSearchParams().get('email') ?? '';
  const [digits, setDigits] = useState<string[]>(() => Array.from({ length: LENGTH }, () => ''));
  const [resent, setResent] = useState(false);
  const inputs = useRef<(HTMLInputElement | null)[]>([]);

  const verify = useMutation({
    mutationFn: async (otp: string) => {
      const { error } = await authClient.emailOtp.verifyEmail({ email, otp });
      if (error) throw new Error(error.code ?? 'verify_failed');
    },
    onSuccess: () => router.push('/consentimiento'),
  });

  const resend = useMutation({
    mutationFn: async () => {
      setResent(false);
      const { error } = await authClient.emailOtp.sendVerificationOtp({
        email,
        type: 'email-verification',
      });
      if (error) throw new Error(error.code ?? 'resend_failed');
    },
    onSuccess: () => setResent(true),
  });

  /**
   * Takes one typed digit or a whole pasted code and spreads it across the boxes from
   * `index` on. Deliberately computed outside the state updater: React invokes updaters
   * twice in development to check they are pure, which would fire the focus move and the
   * verify request twice.
   */
  function place(index: number, raw: string) {
    const characters = raw.replace(/\D/g, '').split('');
    if (characters.length === 0) return;

    const next = [...digits];
    for (let offset = 0; offset < characters.length && index + offset < LENGTH; offset++) {
      next[index + offset] = characters[offset] as string;
    }
    setDigits(next);

    inputs.current[Math.min(index + characters.length, LENGTH - 1)]?.focus();

    const code = next.join('');
    if (code.length === LENGTH && !next.includes('')) verify.mutate(code);
  }

  return (
    <Card className="space-y-6">
      <div className="space-y-2">
        <h1 className="text-2xl font-semibold tracking-tight text-balance">{t('auth.otp.title')}</h1>
        <p className="text-sm text-[var(--text-muted)] text-pretty">
          {t('auth.otp.body', { email })}
        </p>
      </div>

      <form
        className="space-y-4"
        onSubmit={(event) => {
          event.preventDefault();
          const code = digits.join('');
          if (code.length === LENGTH) verify.mutate(code);
        }}
      >
        <Label htmlFor="otp-0">{t('auth.otp.label')}</Label>
        <div className="flex gap-2" role="group" aria-label={t('auth.otp.label')}>
          {digits.map((digit, index) => (
            <input
              key={index}
              ref={(element) => {
                inputs.current[index] = element;
              }}
              id={`otp-${index}`}
              inputMode="numeric"
              autoComplete={index === 0 ? 'one-time-code' : 'off'}
              maxLength={LENGTH}
              value={digit}
              aria-label={`${index + 1}`}
              aria-invalid={verify.isError}
              onChange={(event) => place(index, event.target.value)}
              onKeyDown={(event) => {
                if (event.key === 'Backspace' && digit === '' && index > 0) {
                  inputs.current[index - 1]?.focus();
                }
              }}
              className={cn(
                'tnum h-14 w-full rounded-2xl border bg-[var(--surface-raised)] text-center text-xl',
                'focus-visible:border-accent-500 focus-visible:outline-2 focus-visible:outline-accent-500/40',
                verify.isError && 'border-overdue',
              )}
            />
          ))}
        </div>

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

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

      <div className="space-y-2">
        <Button
          type="button"
          variant="ghost"
          block
          disabled={resend.isPending}
          onClick={() => resend.mutate()}
        >
          {t('auth.otp.resend')}
        </Button>
        <p className="text-center text-xs text-[var(--text-muted)]">{t('auth.otp.devHint')}</p>
      </div>
    </Card>
  );
}