<template>
  <section class="mx-auto max-w-md px-4 pb-28 pt-6 space-y-6">
    <!-- Header -->
    <header class="flex items-center gap-3">
      <div class="w-12 h-12 rounded-2xl bg-gradient-to-br from-mosquito-accent to-mosquito-accent-light flex items-center justify-center text-mosquito-ink shadow-lg">
        <Icons name="trophy" class="w-6 h-6" />
      </div>
      <div>
        <h1 class="mos-title text-2xl font-bold">排行榜</h1>
        <p class="text-sm text-mosquito-muted">实时排名，竞争上榜</p>
      </div>
    </header>

    <!-- Live Status -->
    <div class="flex items-center gap-2">
      <span class="mos-status mos-status-live">实时更新</span>
      <span class="text-xs text-mosquito-muted">每小时自动刷新</span>
    </div>

    <!-- Leaderboard Content -->
    <div v-if="hasAuth" class="space-y-4">
      <div class="mos-card p-4">
        <MosquitoLeaderboard :activity-id="activityId" :current-user-id="userId" />
      </div>
    </div>

    <!-- Empty State -->
    <div v-else class="mos-card border-2 border-dashed border-mosquito-muted/30 p-8 text-center">
      <div class="mos-empty-icon !w-20 !h-20 !rounded-3xl">
        <Icons name="trophy" class="w-10 h-10" />
      </div>
      <h3 class="font-bold text-mosquito-ink text-lg mt-4">暂无法加载排行榜</h3>
      <p class="text-sm text-mosquito-muted mt-2">请配置 API Key 与用户令牌后刷新页面</p>
    </div>

    <!-- Error Message -->
    <div v-if="loadError" class="mos-card border-2 border-mosquito-error/30 bg-mosquito-error/5 p-4">
      <div class="flex items-center gap-2 text-mosquito-error">
        <Icons name="zap" class="w-4 h-4" />
        <span class="text-sm font-medium">{{ loadError }}</span>
      </div>
    </div>
  </section>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import MosquitoLeaderboard from '../../../components/MosquitoLeaderboard.vue'
import { MosquitoError, useMosquito } from '../../../index'
import { getUserIdFromToken, parseUserId } from '../../../shared/auth'
import Icons from '../components/Icons.vue'

type ActivitySummary = {
  id: number
  name: string
}

const { getActivities } = useMosquito()
const route = useRoute()
const apiKey = import.meta.env.VITE_MOSQUITO_API_KEY
const userToken = import.meta.env.VITE_MOSQUITO_USER_TOKEN
const routeUserId = computed(() => parseUserId(route.query.userId ?? route.params.userId))
const userId = computed(() => getUserIdFromToken(userToken) ?? routeUserId.value ?? 0)
const activityId = ref(1)
const loadError = ref('')
const hasAuth = computed(() => Boolean(apiKey && userToken && userId.value))

const loadActivity = async () => {
  if (!hasAuth.value) {
    return
  }
  loadError.value = ''
  try {
    const list: ActivitySummary[] = await getActivities()
    if (list.length) {
      activityId.value = list[0].id
    }
  } catch (error) {
    if (error instanceof MosquitoError && error.statusCode === 401) {
      loadError.value = '鉴权失败：无法加载活动信息。'
      return
    }
    loadError.value = '活动信息加载失败。'
  }
}

onMounted(() => {
  loadActivity()
})
</script>
