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

import dayjs from 'dayjs'

import { getGradeOverview } from '#/api/service/school/school-board'
import { formatNumber, formatMinutes } from '#/utils/format'
import hud from '#/utils/hud'
import { router } from '#/router'

import DateFilter from './DateFilter.vue'

const startTime = ref('')
const endTime = ref('')
const gradeList = ref<GradeAiHomeworkDataItem[]>([])

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`
      gradeList.value = await getGradeOverview(params)
    },
  })
}

function toPercent(rate: number) {
  return +(rate * 100).toFixed(2)
}

function goToClass(grade: GradeAiHomeworkDataItem) {
  router.push({
    path: '/dashboard/analytics/class-dashboard',
    query: {
      gradeId: grade.gradeId,
      gradeName: grade.gradeName,
      startTime: startTime.value,
      endTime: endTime.value,
    },
  })
}

function goToSubject(grade: GradeAiHomeworkDataItem) {
  router.push({
    path: '/dashboard/analytics/subject-dashboard',
    query: {
      gradeId: grade.gradeId,
      gradeName: grade.gradeName,
      startTime: startTime.value,
      endTime: endTime.value,
    },
  })
}

onMounted(fetchData)
</script>

<template>
  <div>
    <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>

    <div v-if="gradeList.length" class="grid gap-5">
      <div
        v-for="grade in gradeList"
        :key="grade.gradeId"
        class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm transition-all hover:-translate-y-0.5 hover:border-blue-300 hover:shadow-md"
      >
        <div class="mb-4 flex items-center justify-between">
          <div class="flex items-center gap-3">
            <div
              class="flex h-10 w-10 items-center justify-center rounded-lg bg-blue-500/10 text-lg font-bold text-blue-600"
            >
              {{
                grade.gradeName
                  ?.replace(/[^0-9\u4e00-\u9fa5]/g, '')
                  .charAt(0) || 'G'
              }}
            </div>
            <div>
              <h3 class="text-base font-semibold text-gray-900">
                {{ grade.gradeName }}
              </h3>
              <p class="text-xs text-gray-400">
                {{ grade.participantClassCount }}个班级 ·
                {{ grade.participantTeacherCount }}位教师 ·
                {{ grade.participantStudentCount }}名学生
              </p>
            </div>
          </div>
          <div class="flex items-center gap-3">
            <button
              class="flex items-center gap-1 rounded-md border border-purple-200 bg-purple-50 px-3 py-1.5 text-sm text-purple-600 transition-colors hover:bg-purple-100"
              @click.stop="goToSubject(grade)"
            >
              <svg
                width="14"
                height="14"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <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>
              查看学科
            </button>
            <button
              class="flex items-center gap-1 text-sm text-blue-500 transition-colors hover:text-blue-600"
              @click.stop="goToClass(grade)"
            >
              查看班级详情
              <svg
                width="16"
                height="16"
                viewBox="0 0 24 24"
                fill="none"
                stroke="currentColor"
                stroke-width="2"
              >
                <path d="M9 18l6-6-6-6" />
              </svg>
            </button>
          </div>
        </div>

        <div class="grid grid-cols-2 gap-3 sm:grid-cols-3 lg:grid-cols-6">
          <div class="rounded-lg bg-gray-50 px-3 py-2.5">
            <div class="text-xs text-gray-400">布置/提交</div>
            <div class="mt-1 text-lg font-bold text-gray-900">
              {{ formatNumber(grade.assignedHomeworkCount) }}
              <span class="text-sm font-normal text-gray-400">/</span>
              {{ formatNumber(grade.submittedHomeworkCount) }}
            </div>
          </div>
          <div class="rounded-lg bg-gray-50 px-3 py-2.5">
            <div class="text-xs text-gray-400">完成率</div>
            <div
              class="mt-1 text-lg font-bold"
              :class="
                toPercent(grade.completionRate) >= 80
                  ? 'text-green-600'
                  : toPercent(grade.completionRate) >= 50
                    ? 'text-amber-600'
                    : 'text-red-500'
              "
            >
              {{ toPercent(grade.completionRate) }}%
            </div>
          </div>
          <div class="rounded-lg bg-gray-50 px-3 py-2.5">
            <div class="text-xs text-gray-400">优秀率</div>
            <div class="mt-1 text-lg font-bold text-blue-600">
              {{ toPercent(grade.excellentRate) }}%
            </div>
          </div>
          <div class="rounded-lg bg-gray-50 px-3 py-2.5">
            <div class="text-xs text-gray-400">良好率</div>
            <div class="mt-1 text-lg font-bold text-sky-600">
              {{ toPercent(grade.goodRate) }}%
            </div>
          </div>
          <div class="rounded-lg bg-gray-50 px-3 py-2.5">
            <div class="text-xs text-gray-400">AI批改题数</div>
            <div class="mt-1 text-lg font-bold text-gray-900">
              {{ formatNumber(grade.aiCorrectedTitleCount) }}
            </div>
          </div>
          <div class="rounded-lg bg-gray-50 px-3 py-2.5">
            <div class="text-xs text-gray-400">节省时长</div>
            <div class="mt-1 text-lg font-bold text-gray-900">
              {{ formatMinutes(grade.teacherTimeSavedMinutes) }}
            </div>
          </div>
        </div>
      </div>
    </div>

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