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

import api from '@/services/api'

const { t } = useI18n()

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('Load stats failed:', error)
  }
  finally {
    loading.value = false
  }
})
</script>

<template>
  <div class="space-y-6">
    <div>
      <h1 class="text-2xl font-bold">
        {{ t('agent.dashboard.title') }}
      </h1>
      <p class="text-muted-foreground">
        {{ t('agent.dashboard.welcomeBack') }}
      </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">
            {{ t('agent.dashboard.authorizedApps') }}
          </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">
            {{ t('agent.dashboard.authorizedAppsCount') }}
          </p>
        </UiCardContent>
      </UiCard>

      <UiCard>
        <UiCardHeader class="flex flex-row items-center justify-between pb-2">
          <UiCardTitle class="text-sm font-medium">
            {{ t('agent.dashboard.totalCards') }}
          </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">
            {{ t('agent.dashboard.todayGenerated') }}: {{ stats.todayCards }}
          </p>
        </UiCardContent>
      </UiCard>

      <UiCard>
        <UiCardHeader class="flex flex-row items-center justify-between pb-2">
          <UiCardTitle class="text-sm font-medium">
            {{ t('agent.dashboard.totalUsers') }}
          </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">
            {{ t('agent.dashboard.totalUsersDesc') }}
          </p>
        </UiCardContent>
      </UiCard>

      <UiCard>
        <UiCardHeader class="flex flex-row items-center justify-between pb-2">
          <UiCardTitle class="text-sm font-medium">
            {{ t('agent.dashboard.totalRevenue') }}
          </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">
            {{ t('agent.dashboard.todayRevenue') }}: ¥{{ stats.todayRevenue.toFixed(2) }}
          </p>
        </UiCardContent>
      </UiCard>
    </div>

    <div class="grid gap-6 lg:grid-cols-2">
      <UiCard>
        <UiCardHeader>
          <UiCardTitle>{{ t('agent.dashboard.quickActions') }}</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>{{ t('agent.dashboard.generateCards') }}</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>{{ t('agent.dashboard.appManagement') }}</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>{{ t('agent.dashboard.userManagement') }}</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>{{ t('agent.dashboard.financeManagement') }}</span>
            </UiButton>
          </router-link>
        </UiCardContent>
      </UiCard>

      <UiCard>
        <UiCardHeader>
          <UiCardTitle>{{ t('agent.dashboard.recentCards') }}</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' ? t('agent.dashboard.unused') : t('agent.dashboard.used') }}
              </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>{{ t('agent.dashboard.noCards') }}</p>
          </div>
        </UiCardContent>
      </UiCard>
    </div>
  </div>
</template>
