import React, {FormEvent, useState} from 'react';
import {useForm} from '@inertiajs/react';

export default function TwoFactorChallenge(): JSX.Element {
    const [useRecoveryCode, setUseRecoveryCode] = useState(false);
    const form = useForm({
        code: '',
        recovery_code: '',
    });

    function submit(event: FormEvent<HTMLFormElement>) {
        event.preventDefault();
        form.post('/two-factor-challenge', {
            onSuccess: () => form.reset(),
        });
    }

    return (
        <main className="flex min-h-screen items-center justify-center bg-gray-100 p-4 dark:bg-gray-950">
            <section className="w-full max-w-md border border-gray-200 bg-white p-6 shadow-sm dark:border-gray-800 dark:bg-gray-900">
                <h1 className="text-xl font-semibold text-gray-900 dark:text-white">Verify your identity</h1>
                <p className="mt-2 text-sm text-gray-600 dark:text-gray-300">
                    {useRecoveryCode ? 'Enter one of your recovery codes.' : 'Enter the authentication code from your authenticator app.'}
                </p>

                <form className="mt-6 space-y-4" onSubmit={submit}>
                    {useRecoveryCode ? (
                        <label className="block">
                            <span className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Recovery code</span>
                            <input
                                autoComplete="one-time-code"
                                className="ti-form-input w-full"
                                value={form.data.recovery_code}
                                onChange={event => form.setData('recovery_code', event.target.value)}
                            />
                        </label>
                    ) : (
                        <label className="block">
                            <span className="mb-1 block text-sm font-medium text-gray-700 dark:text-gray-200">Authentication code</span>
                            <input
                                autoComplete="one-time-code"
                                inputMode="numeric"
                                className="ti-form-input w-full"
                                value={form.data.code}
                                onChange={event => form.setData('code', event.target.value)}
                            />
                        </label>
                    )}

                    {form.errors.code || form.errors.recovery_code ? (
                        <p className="text-sm text-rose-600">{form.errors.code ?? form.errors.recovery_code}</p>
                    ) : null}

                    <button type="submit" className="ti-btn ti-btn-primary w-full" disabled={form.processing}>
                        {form.processing ? 'Verifying...' : 'Continue'}
                    </button>
                </form>

                <button
                    type="button"
                    className="mt-4 text-sm text-indigo-600 hover:underline dark:text-indigo-400"
                    onClick={() => {
                        setUseRecoveryCode(current => !current);
                        form.clearErrors();
                    }}
                >
                    {useRecoveryCode ? 'Use an authentication code' : 'Use a recovery code'}
                </button>
            </section>
        </main>
    );
}