<template>
    <Head title="Two-Factor Authentication" />

    <div class="auth-page">
        <div class="auth-card">
            <div class="auth-logo">
                <svg width="36" height="36" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <rect x="2" y="2" width="13" height="13" rx="3" fill="#EA4335"/>
                    <rect x="17" y="2" width="13" height="13" rx="3" fill="#4285F4"/>
                    <rect x="2" y="17" width="13" height="13" rx="3" fill="#FBBC05"/>
                    <rect x="17" y="17" width="13" height="13" rx="3" fill="#34A853"/>
                </svg>
                <span class="auth-logo-name">CRMfic</span>
            </div>

            <h1 class="auth-title">Two-factor authentication</h1>
            <p class="auth-sub">
                <span v-if="!useRecoveryCode">Enter the authentication code from your authenticator app.</span>
                <span v-else>Enter one of your emergency recovery codes.</span>
            </p>

            <div v-if="form.errors.code || form.errors.recovery_code" class="auth-error">
                {{ form.errors.code || form.errors.recovery_code }}
            </div>

            <form @submit.prevent="submit" class="auth-form">
                <div v-if="!useRecoveryCode" class="form-group">
                    <label for="code" class="form-label">Code</label>
                    <input
                        id="code"
                        v-model="form.code"
                        type="text"
                        inputmode="numeric"
                        class="form-input"
                        autocomplete="one-time-code"
                        autofocus
                    />
                </div>
                <div v-else class="form-group">
                    <label for="recovery_code" class="form-label">Recovery code</label>
                    <input
                        id="recovery_code"
                        v-model="form.recovery_code"
                        type="text"
                        class="form-input"
                        autocomplete="one-time-code"
                        autofocus
                    />
                </div>

                <button type="submit" class="auth-btn" :disabled="form.processing">
                    <span v-if="form.processing" class="auth-btn-spinner"></span>
                    {{ form.processing ? 'Verifying…' : 'Verify' }}
                </button>
            </form>

            <button type="button" class="form-forgot" style="display:block;text-align:center;margin-top:16px;background:none;border:none;cursor:pointer;width:100%" @click="toggleRecoveryCode">
                {{ useRecoveryCode ? 'Use an authentication code instead' : 'Use a recovery code instead' }}
            </button>
        </div>

        <p class="auth-footer">
            &copy; {{ new Date().getFullYear() }} CRMfic. All rights reserved.
        </p>
    </div>
</template>

<script setup>
import { nextTick, ref } from 'vue';
import { Head, useForm } from '@inertiajs/vue3';

const useRecoveryCode = ref(false);

const form = useForm({
    code: '',
    recovery_code: '',
});

function toggleRecoveryCode() {
    useRecoveryCode.value = !useRecoveryCode.value;
    nextTick(() => {
        form.code = '';
        form.recovery_code = '';
    });
}

const submit = () => {
    form.post(route('two-factor.login.store'));
};
</script>
