'use client';

import { useActionState } from 'react';
import { resendCodeAction, verifyEmailAction } from '@/lib/auth/actions';
import { idle } from '@/lib/auth/state';
import { CodeInput, Cooldown, FormMessage, SubmitButton } from '@/components/account/form';

export function VerifyForm() {
  const [state, action] = useActionState(verifyEmailAction, idle);
  const [resend, resendAction] = useActionState(resendCodeAction, idle);
  const cooldown = typeof resend.data?.retryAfter === 'number' ? resend.data.retryAfter : resend.ok ? 45 : 0;
  return (
    <div className="mt-6 space-y-4">
      <form action={action} className="space-y-4" noValidate>
        <FormMessage state={state} />
        <CodeInput name="code" error={state.fieldErrors?.code} label="Verification code" />
        <SubmitButton className="w-full" pendingText="Checking…">
          Confirm
        </SubmitButton>
      </form>
      <form action={resendAction} className="text-center">
        <FormMessage state={resend} className="mb-3 text-left" />
        <Cooldown seconds={cooldown}>
          {(ready, left) => (
            <SubmitButton variant="ghost" className="h-8 text-xs" disabled={!ready}>
              {ready ? 'Send a new code' : `Send a new code in ${left}s`}
            </SubmitButton>
          )}
        </Cooldown>
      </form>
    </div>
  );
}