import { Head, useForm } from '@inertiajs/react';
import { FormEventHandler } from 'react';
import GuestLayout from '@/Layouts/GuestLayout';

export default function TwoFactorChallenge() {
    const { data, setData, post, processing, errors } = useForm({ code: '' });

    const submit: FormEventHandler = (e) => {
        e.preventDefault();
        post(route('two-factor.challenge'));
    };

    return (
        <GuestLayout>
            <Head title="Two-factor authentication" />

            <h1 className="mb-4 text-lg font-semibold text-white">Two-factor authentication</h1>
            <p className="mb-6 text-sm text-gray-400">Enter the 6-digit code from your authenticator app.</p>

            <form onSubmit={submit} className="space-y-4">
                <input
                    type="text"
                    inputMode="numeric"
                    autoFocus
                    maxLength={6}
                    value={data.code}
                    onChange={(e) => setData('code', e.target.value)}
                    className="w-full rounded-md border-gray-700 bg-gray-800 text-center text-2xl tracking-[0.5em] text-white"
                />
                {errors.code && <p className="text-sm text-red-400">{errors.code}</p>}

                <button
                    type="submit"
                    disabled={processing}
                    className="w-full rounded-md bg-brand-600 px-4 py-2.5 font-medium text-white hover:bg-brand-700 disabled:opacity-50"
                >
                    Verify
                </button>
            </form>
        </GuestLayout>
    );
}
