<template>
    <Head title="Verify Email" />

    <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">Verify your email</h1>
            <p class="auth-sub">We've sent a link and a 6-digit code to your email address. Use either one to activate your account.</p>

            <div v-if="verificationLinkSent" class="auth-error" style="background:#f0fdf4;border-color:#bbf7d0;color:#16a34a">
                A new verification link and code have been sent to the email address you provided during registration.
            </div>

            <form @submit.prevent="submitCode" class="auth-form">
                <div class="form-group">
                    <label for="otp-code" class="form-label">6-digit code</label>
                    <input
                        id="otp-code"
                        v-model="codeForm.code"
                        type="text"
                        inputmode="numeric"
                        maxlength="6"
                        class="form-input"
                        :class="{ 'is-error': codeForm.errors.code }"
                        placeholder="123456"
                        autofocus
                    />
                    <p v-if="codeForm.errors.code" class="auth-error" style="margin-top:8px;margin-bottom:0">{{ codeForm.errors.code }}</p>
                </div>

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

            <form @submit.prevent="submit" class="auth-form" style="margin-top:12px">
                <button type="submit" class="auth-btn auth-btn-secondary" :disabled="form.processing">
                    <span v-if="form.processing" class="auth-btn-spinner"></span>
                    {{ form.processing ? 'Sending…' : 'Resend verification email' }}
                </button>
            </form>

            <Link href="/logout" method="post" as="button" class="form-forgot" style="display:block;text-align:center;margin-top:16px;background:none;border:none;cursor:pointer;width:100%">Log out</Link>
        </div>

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

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

const props = defineProps({
    status: String,
});

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

const verificationLinkSent = computed(() => props.status === 'verification-link-sent');

const submit = () => {
    form.post(route('verification.send'));
};

const submitCode = () => {
    codeForm.post(route('verification.verify-otp'), {
        onSuccess: () => codeForm.reset(),
    });
};
</script>
