<script setup lang="ts">
import { computed, onMounted, shallowRef } from 'vue'
import VChart from 'vue-echarts'
import { use } from 'echarts/core'
import { BarChart } from 'echarts/charts'
import { GridComponent, TooltipComponent } from 'echarts/components'
import { CanvasRenderer } from 'echarts/renderers'
import { fetchDashboard } from '@/api/admin'
import type { DashboardData } from '@/types/api'

use([CanvasRenderer, BarChart, GridComponent, TooltipComponent])

const loading = shallowRef(false)
const dashboard = shallowRef<DashboardData | null>(null)
const stats = computed(() => [
  { label: '题库', value: dashboard.value?.stats.banks ?? 0 },
  { label: '题目', value: dashboard.value?.stats.questions ?? 0 },
  { label: '今日作答', value: dashboard.value?.stats.today_answered ?? 0 },
  { label: '平均正确率', value: `${dashboard.value?.stats.accuracy ?? 0}%` },
  { label: '当前错题', value: dashboard.value?.stats.wrong_questions ?? 0 },
  { label: '用户', value: dashboard.value?.stats.users ?? '-' },
])
const trendOption = computed(() => ({
  tooltip: { trigger: 'axis' },
  grid: { left: 36, right: 16, top: 24, bottom: 28 },
  xAxis: { type: 'category', data: (dashboard.value?.trend ?? []).map((item) => item.day) },
  yAxis: { type: 'value' },
  series: [{ name: '作答题数', type: 'bar', data: (dashboard.value?.trend ?? []).map((item) => item.answered_count) }],
}))
const modeLabels: Record<string, string> = {
  memorize: '背题',
  sequence: '顺序刷题',
  random: '随机刷题',
  paper: '整卷测试',
  practice: '刷题',
}

async function load() {
  loading.value = true
  try {
    dashboard.value = (await fetchDashboard()).data
  } finally {
    loading.value = false
  }
}

onMounted(load)
</script>

<template>
  <div v-loading="loading" class="dashboard-grid">
    <section v-for="item in stats" :key="item.label" class="stat-card">
      <p>{{ item.label }}</p>
      <strong>{{ item.value }}</strong>
    </section>

    <section class="panel dashboard-wide">
      <div class="section-head">
        <h2 class="page-title">近 7 天作答趋势</h2>
        <ElButton text type="primary" @click="load">刷新</ElButton>
      </div>
      <VChart class="trend-chart" :option="trendOption" autoresize />
    </section>

    <section class="panel dashboard-panel">
      <h2 class="page-title mb-3">班级排行</h2>
      <ElTable :data="dashboard?.class_ranking ?? []" row-key="id" height="280">
        <ElTableColumn prop="name" label="班级" min-width="140" show-overflow-tooltip />
        <ElTableColumn prop="members_count" label="成员" width="80" />
        <ElTableColumn prop="attempts" label="练习" width="80" />
      </ElTable>
    </section>

    <section class="panel dashboard-panel">
      <h2 class="page-title mb-3">最近练习</h2>
      <ElTable :data="dashboard?.recent_attempts ?? []" row-key="id" height="280">
        <ElTableColumn prop="user_name" label="用户" min-width="100" show-overflow-tooltip />
        <ElTableColumn prop="bank_name" label="题库/试卷" min-width="140" show-overflow-tooltip />
        <ElTableColumn label="模式" width="90">
          <template #default="{ row }">{{ modeLabels[row.mode] || row.mode }}</template>
        </ElTableColumn>
        <ElTableColumn label="正确" width="90">
          <template #default="{ row }">{{ row.correct_count }}/{{ row.total_questions }}</template>
        </ElTableColumn>
      </ElTable>
    </section>
  </div>
</template>

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

.stat-card {
  padding: 18px;
  border-radius: 8px;
  border: 1px solid var(--qq-line);
  background: white;
}

.stat-card p {
  margin: 0 0 12px;
  color: var(--qq-muted);
}

.stat-card strong {
  font-size: 30px;
}

.dashboard-wide {
  grid-column: 1 / -1;
  padding: 20px;
}

.dashboard-panel {
  grid-column: span 3;
  padding: 20px;
}

.section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.trend-chart {
  width: 100%;
  height: 300px;
}

@media (max-width: 1100px) {
  .dashboard-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .dashboard-panel {
    grid-column: 1 / -1;
  }
}

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