<template>
  <section>
    <header class="page-head">
      <div>
        <h2>数据概览</h2>
        <p>查看学员、证书和近期导入的核心数据。</p>
      </div>
      <el-button type="primary" :icon="Download" @click="downloadTemplate">下载导入模板</el-button>
    </header>

    <div class="stats">
      <el-card v-for="item in cards" :key="item.label" class="stat" shadow="never">
        <div class="stat-head">
          <span>{{ item.label }}</span>
          <el-icon :class="item.tone"><component :is="item.icon" /></el-icon>
        </div>
        <strong>{{ item.value }}</strong>
        <small>{{ item.note }}</small>
      </el-card>
    </div>
  </section>
</template>

<script setup lang="ts">
import { CircleCheck, DataBoard, Download, UploadFilled, User, Warning } from "@element-plus/icons-vue";
import { computed, onMounted, reactive } from "vue";
import { useRouter } from "vue-router";

import { http } from "../api";
import { downloadFile } from "../download";

const router = useRouter();
const summary = reactive({
  learner_count: 0,
  certificate_count: 0,
  valid_certificate_count: 0,
  voided_certificate_count: 0,
  recent_import_count: 0,
});

const cards = computed(() => [
  { label: "学员总数", value: summary.learner_count, note: "系统学员档案", icon: User, tone: "teal" },
  { label: "证书总数", value: summary.certificate_count, note: "累计签发记录", icon: DataBoard, tone: "blue" },
  { label: "有效证书", value: summary.valid_certificate_count, note: "当前有效", icon: CircleCheck, tone: "green" },
  { label: "作废证书", value: summary.voided_certificate_count, note: "历史作废", icon: Warning, tone: "red" },
  { label: "近期导入", value: summary.recent_import_count, note: "最近导入批次", icon: UploadFilled, tone: "gold" },
]);

async function loadSummary() {
  try {
    const { data } = await http.get("/admin/dashboard/summary");
    Object.assign(summary, data);
  } catch {
    localStorage.removeItem("admin_token");
    await router.push("/admin/login");
  }
}

function downloadTemplate() {
  downloadFile("/admin/import-batches/template", "certificate-import-template.xlsx");
}

onMounted(loadSummary);
</script>

<style scoped>
.stats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
}

.stat {
  background: #ffffff;
}

.stat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.stat span {
  color: #64748b;
  font-size: 13px;
  font-weight: 650;
}

.stat strong {
  display: block;
  margin-top: 16px;
  color: #17212b;
  font-size: 32px;
  font-weight: 760;
}

.stat small {
  display: block;
  margin-top: 4px;
  color: #8a959d;
  font-size: 12px;
}

.stat .el-icon {
  width: 34px;
  height: 34px;
  border-radius: 6px;
  font-size: 18px;
}

.stat .teal,
.stat .green {
  color: #176f69;
  background: #e8f3f1;
}

.stat .blue {
  color: #3e6789;
  background: #ebf1f6;
}

.stat .red {
  color: #a83a35;
  background: #f8eaea;
}

.stat .gold {
  color: #8d6b2f;
  background: #f6f0e5;
}

@media (max-width: 1100px) {
  .stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
</style>
