'use client';

import { useActionState, useState } from 'react';
import { mfaUseEmailAction, mfaVerifyAction, resendCodeAction } from '@/lib/auth/actions';
import { idle } from '@/lib/auth/state';
import { Checkbox, CodeInput, Cooldown, Field, FormMessage, SubmitButton, TextInput } from '@/components/account/form';

type Method = 'totp' | 'email_code' | 'recovery';

export function MfaForm({ stage }: { stage: 'totp' | 'email_code' }) {
  const [state, action] = useActionState(mfaVerifyAction, idle);
  const [emailState, emailAction] = useActionState(mfaUseEmailAction, idle);
  const [resend, resendAction] = useActionState(resendCodeAction, idle);
  const [method, setMethod] = useState<Method>(emailState.ok ? 'email_code' : stage);
  const effective: Method = emailState.ok && method === 'totp' ? 'email_code' : method;
  const cooldown = typeof resend.data?.retryAfter === 'number' ? resend.data.retryAfter : resend.ok || emailState.ok ? 45 : 0;
  return (
    <div className="mt-6 space-y-4">
      <form action={action} className="space-y-4" noValidate>
        <input type="hidden" name="method" value={effective} />
        <FormMessage state={state} />
        <FormMessage state={emailState} />
        {effective === 'recovery' ? (
          <Field label="Recovery code" name="code" hint="One of the 10 codes you saved when enabling the authenticator.">
            <TextInput name="code" autoComplete="off" placeholder="ABCDE-FGHJK" className="mono-num uppercase" required autoFocus />
          </Field>
        ) : (
          <CodeInput name="code" label={effective === 'totp' ? 'Authenticator code' : 'E-mailed code'} />
        )}
        <Checkbox name="trust" label="Trust this device for 30 days" description="Skip the second step on this browser." />
        <SubmitButton className="w-full" pendingText="Verifying…">
          Verify
        </SubmitButton>
      </form>
      <div className="flex flex-wrap items-center justify-center gap-x-4 gap-y-2 text-xs">
        {stage === 'totp' && effective !== 'email_code' ? (
          <form action={emailAction}>
            <SubmitButton variant="ghost" className="h-8 text-xs">
              E-mail me a code instead
            </SubmitButton>
          </form>
        ) : null}
        {effective === 'email_code' ? (
          <form action={resendAction}>
            <FormMessage state={resend} className="mb-2" />
            <Cooldown seconds={cooldown}>
              {(ready, left) => (
                <SubmitButton variant="ghost" className="h-8 text-xs" disabled={!ready}>
                  {ready ? 'Send a new code' : `New code in ${left}s`}
                </SubmitButton>
              )}
            </Cooldown>
          </form>
        ) : null}
        {stage === 'totp' ? (
          <button type="button" className="text-muted hover:text-fg" onClick={() => setMethod(effective === 'recovery' ? 'totp' : 'recovery')}>
            {effective === 'recovery' ? 'Use authenticator code' : 'Use a recovery code'}
          </button>
        ) : null}
      </div>
    </div>
  );
}