<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
import { NButton, NCard, NResult, NSpin } from 'naive-ui'
import { createDetachedAuthClient, resolveEmailAuthCallback } from '@/lib/authEmail'

const router = useRouter()

const state = ref<'loading' | 'success' | 'failed'>('loading')
const countdown = ref(5)
let countdownTimer: ReturnType<typeof setInterval> | null = null

function startCountdown() {
  countdownTimer = setInterval(() => {
    countdown.value--
    if (countdown.value <= 0) {
      if (countdownTimer) clearInterval(countdownTimer)
      router.push('/login')
    }
  }, 1000)
}

onMounted(async () => {
  try {
    const confirmClient = createDetachedAuthClient()
    const result = await resolveEmailAuthCallback({
      client: confirmClient,
      allowedTypes: ['signup', 'email'],
    })

    if (!result.ok) {
      state.value = 'failed'
      return
    }

    await confirmClient.auth.signOut()
    state.value = 'success'
    startCountdown()
  } catch {
    state.value = 'failed'
  }
})

onUnmounted(() => {
  if (countdownTimer) clearInterval(countdownTimer)
})
</script>

<template>
  <div class="min-h-[calc(100vh-4rem)] px-4 py-10">
    <div class="mx-auto max-w-3xl">
      <NCard class="shadow-[12px_12px_0_0_rgba(15,23,42,0.08)]">
      <template v-if="state === 'success'">
        <NResult status="success" title="邮箱认证成功" description="你的邮箱已确认，现在可以登录了。">
          <template #footer>
            <div class="space-y-4">
              <p class="text-sm text-slate-500">{{ countdown }} 秒后自动跳转登录页面...</p>
              <RouterLink to="/login" class="no-underline">
                <NButton type="primary" class="oc-primary-button oc-primary-button--teal">立即登录</NButton>
              </RouterLink>
            </div>
          </template>
        </NResult>
      </template>

      <template v-else-if="state === 'failed'">
        <NResult status="error" title="认证失败" description="邮箱确认链接无效或已过期，请重新注册。">
          <template #footer>
            <RouterLink to="/register" class="no-underline">
              <NButton type="primary" class="oc-primary-button oc-primary-button--sky">重新注册</NButton>
            </RouterLink>
          </template>
        </NResult>
      </template>

      <template v-else>
        <div class="flex flex-col items-center justify-center py-12 text-center">
          <NSpin size="large" />
          <h1 class="mt-6 text-2xl font-bold text-slate-900">正在验证...</h1>
          <p class="mt-2 text-slate-500">请稍候</p>
        </div>
      </template>
      </NCard>
    </div>
  </div>
</template>
