/**
 * VendorUpgrade — CodeStep.
 *
 * OTP code-verify step of the vendor-upgrade phone sub-flow. Confirming the
 * code (via the shell's usePhoneVerification → /api/auth/attach-phone) binds
 * the phone to the account; on success the shell flips `flowStep` to `'form'`.
 * Presentational: receives form, submit, back handler from the shell.
 */

'use client';

import type { UseFormReturn } from 'react-hook-form';
import { Button } from '@/components/ui/primitives/Button';
import { Input } from '@/components/ui/primitives/Input';
import { FormField } from '@/components/ui/primitives/FormField';
import { useT } from '@/lib/i18n/react';

export interface CodeStepValues {
  code: string;
}

export interface CodeStepProps {
  form: UseFormReturn<CodeStepValues>;
  onSubmit: (values: CodeStepValues) => void | Promise<void>;
  verifying: boolean;
  onBack: () => void;
}

export function CodeStep({ form, onSubmit, verifying, onBack }: CodeStepProps) {
  const tAuth = useT('auth_flow');
  const tCommon = useT('common');

  return (
    <form
      onSubmit={form.handleSubmit((v) => void onSubmit(v))}
      className="flex flex-col gap-3"
      noValidate
    >
      <FormField
        htmlFor="otp-code"
        label={tAuth('code_placeholder')}
        required
        error={form.formState.errors.code?.message}
      >
        <Input
          id="otp-code"
          type="text"
          inputMode="numeric"
          maxLength={8}
          dir="ltr"
          autoComplete="one-time-code"
          invalid={!!form.formState.errors.code}
          {...form.register('code')}
        />
      </FormField>
      <Button type="submit" variant="primary" size="lg" loading={verifying} className="w-full">
        {tAuth('verify')}
      </Button>
      <Button type="button" variant="ghost" size="sm" className="w-full" onClick={onBack}>
        {tCommon('back')}
      </Button>
    </form>
  );
}