<template>
    <div class="verify-area pt-120 pb-120">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-6 col-md-8">
                    <div class="verify-content text-center shadow-lg p-5 rounded bg-white">

                        <div v-if="loading" class="text-center py-5">
                            <div class="spinner-border text-primary" role="status" style="width: 3rem; height: 3rem;">
                                <span class="visually-hidden">Yükleniyor...</span>
                            </div>
                            <p class="mt-3 text-muted fs-5">E-posta adresiniz doğrulanıyor...</p>
                        </div>

                        <div v-else-if="success">
                            <div class="mb-4">
                                <div class="success-icon d-inline-flex align-items-center justify-content-center bg-success text-white rounded-circle"
                                    style="width: 80px; height: 80px;">
                                    <i class="fas fa-check fa-3x"></i>
                                </div>
                            </div>
                            <h3 class="mb-3 text-success">Doğrulama Başarılı!</h3>
                            <p class="text-muted mb-4 fs-5">Hesabınız başarıyla doğrulandı. Artık giriş yapabilirsiniz.
                            </p>
                            <NuxtLink to="/auth/login" class="btn btn-primary btn-lg w-100">
                                Giriş Yap
                            </NuxtLink>
                        </div>

                        <div v-else>
                            <div class="mb-4">
                                <div class="error-icon d-inline-flex align-items-center justify-content-center bg-danger text-white rounded-circle"
                                    style="width: 80px; height: 80px;">
                                    <i class="fas fa-times fa-3x"></i>
                                </div>
                            </div>
                            <h3 class="mb-3 text-danger">Doğrulama Hatası</h3>
                            <p class="text-muted mb-4 fs-5">{{ displayError }}</p>
                            <NuxtLink to="/auth/login" class="btn btn-outline-primary">
                                Giriş sayfasına dön
                            </NuxtLink>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
const route = useRoute();
const config = useRuntimeConfig();

definePageMeta({
    middleware: 'guest-only',
    auth: { unauthenticatedOnly: true, navigateAuthenticatedTo: '/' }
});

const loading = ref(true);
const success = ref(false);
const errorMessage = ref('');

const displayError = computed(() => {
    return errorMessage.value || 'Doğrulama işlemi sırasında bir hata oluştu.';
});

onMounted(async () => {
    const token = route.query.token as string;

    if (!token) {
        loading.value = false;
        errorMessage.value = "Geçersiz doğrulama bağlantısı (token eksik).";
        return;
    }

    try {
        const apiUrl = config.public.NUXT_PUBLIC_API_BASE || 'http://127.0.0.1:8080';

        // Backend API: GET /api/v1/auth/verify-email?token=...
        const response = await fetch(`${apiUrl}/api/v1/auth/verify-email?token=${token}`, {
            method: 'GET',
            headers: {
                'accept': 'application/json'
            }
        });

        if (response.ok) {
            success.value = true;
        } else {
            const data = await response.json();
            errorMessage.value = data.message || 'Token geçersiz veya süresi dolmuş.';
        }
    } catch (error) {
        console.error("Verify error:", error);
        errorMessage.value = 'Sunucu ile bağlantı kurulamadı.';
    } finally {
        loading.value = false;
    }
});
</script>

<style scoped>
.verify-area {
    background-color: #f8f9fa;
    min-height: 80vh;
    display: flex;
    align-items: center;
}

.verify-content {
    border-top: 5px solid #0d6efd;
}
</style>
