<script setup lang="ts">
const auth = useAuth()
const route = useRoute()

type Status = 'pending' | 'success' | 'error'
const status = ref<Status>('pending')
const error = ref<string | null>(null)

onMounted(async () => {
  const token = route.query.token
  if (typeof token !== 'string' || !token) {
    status.value = 'error'
    error.value = 'Missing verification token.'
    return
  }
  try {
    await auth.verifyEmail(token)
    status.value = 'success'
  } catch (e: any) {
    status.value = 'error'
    error.value = e?.data?.error || e?.message || 'Verification failed.'
  }
})
</script>

<template>
  <section class="mx-auto max-w-md py-12">
    <h1 class="mb-6 text-2xl font-semibold">Verify your email</h1>

    <div class="card text-sm">
      <p v-if="status === 'pending'" class="text-zinc-400">Verifying…</p>
      <template v-else-if="status === 'success'">
        <p class="mb-3 font-medium text-brand-300">Email verified.</p>
        <p class="mb-4 text-zinc-400">You can now sign in to your account.</p>
        <NuxtLink to="/login" class="btn-primary w-full">Sign in</NuxtLink>
      </template>
      <template v-else>
        <p class="mb-3 font-medium text-red-400">We couldn't verify that link.</p>
        <p class="mb-4 text-zinc-400">{{ error }}</p>
        <NuxtLink to="/login" class="btn-ghost w-full">Back to sign in</NuxtLink>
      </template>
    </div>
  </section>
</template>
