<script setup lang="ts">
import { onMounted, ref } from 'vue'

import { fetchAdminDashboardSummary } from '@/services/admin'
import type { AdminDashboardSummary } from '@/types/admin'

const loading = ref(true)
const summary = ref<AdminDashboardSummary | null>(null)
const errorMessage = ref('')

onMounted(async () => {
  try {
    const response = await fetchAdminDashboardSummary()
    summary.value = response.data
  } catch (error) {
    errorMessage.value = error instanceof Error ? error.message : '读取概览失败'
  } finally {
    loading.value = false
  }
})

const cards = [
  { key: 'todayOrders', label: '今日订单' },
  { key: 'paidPendingClaim', label: '待领取' },
  { key: 'claimingTasks', label: '领取中' },
  { key: 'redeemedToday', label: '今日成功' },
  { key: 'abnormalTasks', label: '异常任务' },
  { key: 'skuWithInventory', label: '有库存 SKU' },
] as const
</script>

<template>
  <section class="admin-panel">
    <header class="panel-header">
      <div>
        <h1>系统概览</h1>
        <p>快速查看订单和交付链路的运行状态。</p>
      </div>
    </header>

    <p v-if="errorMessage" class="error-copy">{{ errorMessage }}</p>

    <div v-if="loading" class="empty-block">概览加载中</div>
    <div v-else class="summary-grid">
      <article v-for="card in cards" :key="card.key" class="summary-card">
        <span>{{ card.label }}</span>
        <strong>{{ summary?.[card.key] ?? 0 }}</strong>
      </article>
    </div>
  </section>
</template>

<style scoped>
.admin-panel {
  display: grid;
  gap: 18px;
}

.panel-header h1 {
  margin: 0;
  font-size: 28px;
  color: #1d3555;
}

.panel-header p {
  margin: 8px 0 0;
  color: #64748b;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.summary-card {
  padding: 18px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(86, 108, 138, 0.1);
  box-shadow: 0 18px 44px rgba(30, 49, 78, 0.08);
}

.summary-card span {
  display: block;
  color: #6a7a91;
  font-size: 13px;
}

.summary-card strong {
  display: block;
  margin-top: 10px;
  font-size: 28px;
  color: #1f324a;
}

.empty-block,
.error-copy {
  padding: 16px 18px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
}

.error-copy {
  color: #b42318;
}

@media (max-width: 980px) {
  .summary-grid {
    grid-template-columns: 1fr;
  }
}
</style>
