<script setup lang="ts">
import { DollarSign, Key, Plus, Users, Wallet } from 'lucide-vue-next'
import { onMounted, ref } from 'vue'
import { useI18n } from 'vue-i18n'

import { BasicPage } from '@/components/global-layout'
import api from '@/services/api'

const { t } = useI18n()

const loading = ref(true)
const stats = ref({
  totalCards: 0,
  totalUsers: 0,
  totalRevenue: 0,
  todayCards: 0,
  todayRevenue: 0,
  balance: 0,
})

onMounted(async () => {
  try {
    const data = await api.get<{
      totalCards?: number
      totalUsers?: number
      totalRevenue?: number
      todayCards?: number
      todayRevenue?: number
      balance?: number
    }>('/agent/stats')
    if (data) {
      stats.value = {
        totalCards: data.totalCards || 0,
        totalUsers: data.totalUsers || 0,
        totalRevenue: data.totalRevenue || 0,
        todayCards: data.todayCards || 0,
        todayRevenue: data.todayRevenue || 0,
        balance: data.balance || 0,
      }
    }
  }
  catch (error) {
    console.error('Load stats failed:', error)
  }
  finally {
    loading.value = false
  }
})
</script>

<template>
  <BasicPage
    :title="t('nav.console')"
    description="代理商后台控制台"
    sticky
  >
    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-4">
      <UiCard>
        <UiCardHeader class="flex flex-row items-center justify-between pb-2">
          <UiCardTitle class="text-sm font-medium">
            {{ t('agent.dashboard.balance') }}
          </UiCardTitle>
          <Wallet class="size-4 text-muted-foreground" />
        </UiCardHeader>
        <UiCardContent>
          <div class="text-2xl font-bold">
            ¥{{ stats.balance.toFixed(2) }}
          </div>
          <p class="text-xs text-muted-foreground">
            {{ t('agent.dashboard.balanceDesc') }}
          </p>
        </UiCardContent>
      </UiCard>

      <UiCard>
        <UiCardHeader class="flex flex-row items-center justify-between pb-2">
          <UiCardTitle class="text-sm font-medium">
            卡密总数
          </UiCardTitle>
          <Key class="size-4 text-muted-foreground" />
        </UiCardHeader>
        <UiCardContent>
          <div class="text-2xl font-bold">
            {{ stats.totalCards.toLocaleString() }}
          </div>
          <p class="text-xs text-muted-foreground">
            今日生成: {{ stats.todayCards }}
          </p>
        </UiCardContent>
      </UiCard>

      <UiCard>
        <UiCardHeader class="flex flex-row items-center justify-between pb-2">
          <UiCardTitle class="text-sm font-medium">
            用户总数
          </UiCardTitle>
          <Users class="size-4 text-muted-foreground" />
        </UiCardHeader>
        <UiCardContent>
          <div class="text-2xl font-bold">
            {{ stats.totalUsers.toLocaleString() }}
          </div>
          <p class="text-xs text-muted-foreground">
            已注册用户数量
          </p>
        </UiCardContent>
      </UiCard>

      <UiCard>
        <UiCardHeader class="flex flex-row items-center justify-between pb-2">
          <UiCardTitle class="text-sm font-medium">
            总收入
          </UiCardTitle>
          <DollarSign class="size-4 text-muted-foreground" />
        </UiCardHeader>
        <UiCardContent>
          <div class="text-2xl font-bold">
            ¥{{ stats.totalRevenue.toFixed(2) }}
          </div>
          <p class="text-xs text-muted-foreground">
            今日收入: ¥{{ stats.todayRevenue.toFixed(2) }}
          </p>
        </UiCardContent>
      </UiCard>
    </div>

    <UiCard class="mt-6">
      <UiCardHeader>
        <UiCardTitle>快捷操作</UiCardTitle>
      </UiCardHeader>
      <UiCardContent class="grid gap-4 sm:grid-cols-3">
        <router-link to="/agent/cards/create">
          <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
            <Plus class="size-5" />
            <span>生成卡密</span>
          </UiButton>
        </router-link>
        <router-link to="/agent/cards">
          <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
            <Key class="size-5" />
            <span>卡密管理</span>
          </UiButton>
        </router-link>
        <router-link to="/agent/users">
          <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
            <Users class="size-5" />
            <span>用户管理</span>
          </UiButton>
        </router-link>
      </UiCardContent>
    </UiCard>
  </BasicPage>
</template>
