<script lang="ts" setup>
import type { AiHomeworkOverview } from '#/api/service/school/school-board'

import dayjs from 'dayjs'

import { getAiHomeworkOverview } from '#/api/service/school/school-board'
import { formatNumber, toFixed } from '#/utils/format'
import hud from '#/utils/hud'

import AiHeroBanner from './components/AiHeroBanner.vue'
import CompletionGauge from './components/CompletionGauge.vue'
import DateFilter from './components/DateFilter.vue'
import GradeBarChart from './components/GradeBarChart.vue'
import GradeDashboard from './components/GradeDashboard.vue'
import HomeworkPieChart from './components/HomeworkPieChart.vue'
import ParticipantStats from './components/ParticipantStats.vue'
import StatCard from './components/StatCard.vue'

const activeTab = ref('overview')
const tabs = [
  { key: 'overview', label: '总看板' },
  { key: 'grade', label: '年级看板' },
  // { key: 'subject', label: '学科看板' },
]

const startTime = ref('')
const endTime = ref('')
const data = ref<AiHomeworkOverview | null>(null)
const lastUpdate = ref('')

async function fetchData() {
  hud.load({
    task: async () => {
      const params: Record<string, string> = {}
      if (startTime.value) params.startTime = `${startTime.value} 00:00:00`
      if (endTime.value) params.endTime = `${endTime.value} 23:59:59`
      data.value = await getAiHomeworkOverview(params)
      lastUpdate.value = dayjs().format('YYYY-MM-DD HH:mm:ss')
    },
  })
}

const summaryCards = computed(() => {
  if (!data.value) return []
  const d = data.value
  return [
    {
      title: '布置作业总份数',
      value: formatNumber(d.assignedHomeworkCount),
      icon: 'M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z',
      color: '#1E40AF',
    },
    {
      title: '提交作业总份数',
      value: formatNumber(d.submittedHomeworkCount),
      icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
      color: '#3B82F6',
    },
    {
      title: '未提交作业数',
      value: formatNumber(d.unsubmittedHomeworkCount),
      icon: 'M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z',
      color: '#F59E0B',
    },
    {
      title: '作业完成率',
      value: toFixed(d.completionRate * 100),
      suffix: '%',
      icon: 'M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z',
      color: '#10B981',
    },
  ]
})

onMounted(() => {
  fetchData()
})
</script>

<template>
  <div class="p-5">
    <div class="mb-5 flex items-center justify-between">
      <div class="flex gap-1 rounded-lg bg-gray-100 p-1">
        <button
          v-for="tab in tabs"
          :key="tab.key"
          class="rounded-md px-4 py-1.5 text-sm font-medium transition-colors"
          :class="
            activeTab === tab.key
              ? 'bg-white text-blue-600 shadow-sm'
              : 'text-gray-500 hover:text-gray-700'
          "
          @click="activeTab = tab.key"
        >
          {{ tab.label }}
        </button>
      </div>
      <span
        v-if="lastUpdate && activeTab === 'overview'"
        class="text-xs text-gray-400"
      >
        数据更新于 {{ lastUpdate }}
      </span>
    </div>

    <!-- 总看板 -->
    <template v-if="activeTab === 'overview'">
      <div
        class="mb-5 rounded-xl border border-gray-200 bg-white p-4 shadow-sm"
      >
        <DateFilter
          v-model:start-time="startTime"
          v-model:end-time="endTime"
          @search="fetchData"
        />
      </div>

      <template v-if="data">
        <section class="mb-5">
          <AiHeroBanner
            :ai-corrected-title-count="data.aiCorrectedTitleCount"
            :teacher-time-saved-minutes="data.teacherTimeSavedMinutes"
            :ai-accuracy-rate="data.aiAccuracyRate"
            :student-appeal-rate="data.studentAppealRate"
            :ai-avg-response-time="data.aiAvgResponseTime"
          />
        </section>

        <section class="mb-5 grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
          <StatCard
            v-for="card in summaryCards"
            :key="card.title"
            :title="card.title"
            :value="card.value"
            :suffix="card.suffix"
            :icon-path="card.icon"
            :color="card.color"
          />
        </section>

        <section class="mb-5 grid gap-4 md:grid-cols-2">
          <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
            <h3
              class="mb-2 flex items-center gap-2 text-[15px] font-semibold text-gray-900"
            >
              <span
                class="inline-block h-[18px] w-[18px] rounded bg-blue-500/20 text-blue-500"
              />
              作业提交情况
            </h3>
            <HomeworkPieChart
              :total="data.assignedHomeworkCount"
              :submitted="data.submittedHomeworkCount"
              :unsubmitted="data.unsubmittedHomeworkCount"
            />
          </div>
          <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
            <h3
              class="mb-2 flex items-center gap-2 text-[15px] font-semibold text-gray-900"
            >
              <span
                class="inline-block h-[18px] w-[18px] rounded bg-blue-500/20 text-blue-500"
              />
              作业成绩分布
            </h3>
            <GradeBarChart
              :excellent="data.excellentCount"
              :good="data.goodCount"
              :pass="data.passCount"
              :unqualified="data.unqualifiedCount"
              :excellent-rate="data.excellentRate"
              :good-rate="data.goodRate"
              :pass-rate="data.passRate"
              :unqualified-rate="data.unqualifiedRate"
            />
          </div>
        </section>

        <section class="grid gap-4 md:grid-cols-2">
          <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
            <h3
              class="mb-2 flex items-center gap-2 text-[15px] font-semibold text-gray-900"
            >
              <span
                class="inline-block h-[18px] w-[18px] rounded bg-blue-500/20 text-blue-500"
              />
              作业完成率
            </h3>
            <CompletionGauge :rate="data.completionRate" />
          </div>
          <div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm">
            <h3
              class="mb-2 flex items-center gap-2 text-[15px] font-semibold text-gray-900"
            >
              <span
                class="inline-block h-[18px] w-[18px] rounded bg-blue-500/20 text-blue-500"
              />
              参与情况统计
            </h3>
            <ParticipantStats
              :teacher-count="data.participantTeacherCount"
              :student-count="data.participantStudentCount"
              :class-count="data.participantClassCount"
            />
          </div>
        </section>
      </template>

      <div v-if="!data" class="py-20 text-center">
        <p class="text-gray-500">暂无数据，请调整筛选条件后重试</p>
      </div>
    </template>

    <!-- 年级看板 -->
    <GradeDashboard v-else-if="activeTab === 'grade'" />

    <!-- 学科看板 -->
    <!-- <div v-else-if="activeTab === 'subject'" class="py-20 text-center">
      <div class="mx-auto mb-4 flex h-16 w-16 items-center justify-center rounded-full bg-gray-100">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="#94A3B8" stroke-width="1.5">
          <path d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
        </svg>
      </div>
      <p class="text-gray-500">学科看板开发中，敬请期待</p>
    </div> -->
  </div>
</template>
