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

import api from '@/services/api'

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

const recentCards = ref<any[]>([])

onMounted(async () => {
  try {
    const data = await api.get<{
      totalApps?: number
      totalCards?: number
      totalUsers?: number
      totalRevenue?: number
      todayCards?: number
      todayRevenue?: number
    }>('/agent/stats')
    if (data) {
      stats.value = {
        totalApps: data.totalApps || 0,
        totalCards: data.totalCards || 0,
        totalUsers: data.totalUsers || 0,
        totalRevenue: data.totalRevenue || 0,
        todayCards: data.todayCards || 0,
        todayRevenue: data.todayRevenue || 0,
      }
    }
  }
  catch (error) {
    console.error('获取统计数据失败:', error)
  }
  finally {
    loading.value = false
  }
})
</script>

<template>
  <div class="space-y-6">
    <div>
      <h1 class="text-2xl font-bold">
        控制台
      </h1>
      <p class="text-muted-foreground">
        欢迎回来，查看您的业务概况
      </p>
    </div>

    <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">
            授权应用
          </UiCardTitle>
          <Boxes class="size-4 text-muted-foreground" />
        </UiCardHeader>
        <UiCardContent>
          <div class="text-2xl font-bold">
            {{ stats.totalApps }}
          </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>
          <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>

    <div class="grid gap-6 lg:grid-cols-2">
      <UiCard>
        <UiCardHeader>
          <UiCardTitle>快捷操作</UiCardTitle>
        </UiCardHeader>
        <UiCardContent class="grid gap-4 sm:grid-cols-2">
          <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/apps">
            <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
              <Boxes 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>
          <router-link to="/agent/finance">
            <UiButton variant="outline" class="w-full h-20 flex-col gap-2">
              <CreditCard class="size-5" />
              <span>财务管理</span>
            </UiButton>
          </router-link>
        </UiCardContent>
      </UiCard>

      <UiCard>
        <UiCardHeader>
          <UiCardTitle>最近生成卡密</UiCardTitle>
        </UiCardHeader>
        <UiCardContent>
          <div v-if="recentCards.length > 0" class="space-y-4">
            <div v-for="card in recentCards" :key="card.id" class="flex items-center justify-between">
              <div>
                <p class="font-medium">
                  {{ card.code }}
                </p>
                <p class="text-sm text-muted-foreground">
                  {{ card.app_name }}
                </p>
              </div>
              <UiBadge :variant="card.status === 'unused' ? 'default' : 'secondary'">
                {{ card.status === 'unused' ? '未使用' : '已使用' }}
              </UiBadge>
            </div>
          </div>
          <div v-else class="text-center py-8 text-muted-foreground">
            <Key class="size-12 mx-auto mb-2 opacity-30" />
            <p>暂无卡密记录</p>
          </div>
        </UiCardContent>
      </UiCard>
    </div>
  </div>
</template>
