'use client'

import { useActionState } from 'react'
import Link from 'next/link'
import { verifyMfa } from '../../actions'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'
import { Alert, AlertDescription } from '@/components/ui/alert'

/** Sign-in step 2 (2026-09-22): the code from the authenticator app, or a recovery code. */
export default function MfaPage() {
  const [state, action, pending] = useActionState(verifyMfa, undefined)
  return (
    <main className="flex min-h-screen items-center justify-center bg-neutral-50 p-4">
      <Card className="w-full max-w-md">
        <CardHeader className="text-center">
          <div className="mx-auto mb-2 grid h-11 w-11 place-items-center rounded-xl bg-[#0f1b2d] text-lg font-extrabold text-[#f5a623]">H</div>
          <CardTitle className="text-xl">Two-factor authentication</CardTitle>
          <CardDescription>Enter the 6-digit code from your authenticator app, or one of your recovery codes.</CardDescription>
        </CardHeader>
        <CardContent>
          <form action={action} className="space-y-4">
            {state?.error && (
              <Alert variant="destructive"><AlertDescription>{state.error}</AlertDescription></Alert>
            )}
            <div className="space-y-2">
              <Label htmlFor="code">Code</Label>
              <Input id="code" name="code" inputMode="numeric" autoComplete="one-time-code" autoFocus required placeholder="123 456" className="text-center font-mono text-lg tracking-widest" />
            </div>
            <Button type="submit" className="w-full" disabled={pending}>{pending ? 'Checking…' : 'Continue'}</Button>
            <p className="text-center text-xs text-neutral-500">
              Lost your phone? Use a recovery code, or ask a HeavyHaul Agent admin to reset your two-factor setup. <Link href="/login" className="underline">Back to sign in</Link>
            </p>
          </form>
        </CardContent>
      </Card>
    </main>
  )
}