<script lang="ts" setup>
import { formatNumber, formatMinutes } from '#/utils/format'

const props = defineProps<{
  aiCorrectedTitleCount: number
  teacherTimeSavedMinutes: number
  aiAccuracyRate: string
  studentAppealRate: string
  aiAvgResponseTime: string
}>()

const animated = ref(false)
onMounted(() => {
  setTimeout(() => (animated.value = true), 100)
})

const metrics = computed(() => [
  {
    label: 'AI批改题目总数',
    value: formatNumber(props.aiCorrectedTitleCount),
    sub: '累计批改',
    icon: 'M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z',
    delay: '0ms',
  },
  {
    label: '节约教师总时长',
    value: formatMinutes(props.teacherTimeSavedMinutes),
    sub: '解放教学生产力',
    icon: 'M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z',
    delay: '80ms',
    highlight: true,
  },
  {
    label: 'AI批改准确率',
    value: props.aiAccuracyRate || '98%',
    sub: '精准可信赖',
    icon: 'M9 12l2 2 4-4M7.835 4.697a3.42 3.42 0 001.946-.806 3.42 3.42 0 014.438 0 3.42 3.42 0 001.946.806 3.42 3.42 0 013.138 3.138 3.42 3.42 0 00.806 1.946 3.42 3.42 0 010 4.438 3.42 3.42 0 00-.806 1.946 3.42 3.42 0 01-3.138 3.138 3.42 3.42 0 00-1.946.806 3.42 3.42 0 01-4.438 0 3.42 3.42 0 00-1.946-.806 3.42 3.42 0 01-3.138-3.138 3.42 3.42 0 00-.806-1.946 3.42 3.42 0 010-4.438 3.42 3.42 0 00.806-1.946 3.42 3.42 0 013.138-3.138z',
    delay: '160ms',
  },
  {
    label: '学生申诉率',
    value: props.studentAppealRate || '0',
    sub: '批改结果高认可',
    icon: 'M20.618 5.984A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z',
    delay: '240ms',
  },
  {
    label: 'AI平均响应时长',
    value: props.aiAvgResponseTime || '2min',
    sub: '极速反馈',
    icon: 'M13 10V3L4 14h7v7l9-11h-7z',
    delay: '320ms',
  },
])
</script>

<template>
  <section
    class="relative overflow-hidden rounded-2xl p-9 text-white"
    style="
      background: linear-gradient(
        135deg,
        #0f172a 0%,
        #1e3a8a 50%,
        #1e40af 100%
      );
    "
  >
    <div
      class="absolute inset-0 opacity-[0.03]"
      style="
        background-image:
          linear-gradient(rgb(255 255 255 / 10%) 1px, transparent 1px),
          linear-gradient(90deg, rgb(255 255 255 / 10%) 1px, transparent 1px);
        background-size: 32px 32px;
      "
    />
    <div
      class="absolute -right-10 -top-20 h-80 w-80 rounded-full bg-blue-500/25 blur-3xl"
    />
    <div
      class="absolute -bottom-16 left-[10%] h-60 w-60 rounded-full bg-amber-500/15 blur-3xl"
    />

    <div class="relative z-10 mb-8">
      <div
        class="mb-3.5 inline-flex items-center gap-1.5 rounded-full border border-amber-400/35 bg-amber-500/20 px-3.5 py-1 text-xs font-semibold text-amber-200"
      >
        <svg
          width="16"
          height="16"
          viewBox="0 0 24 24"
          fill="none"
          stroke="currentColor"
          stroke-width="2.5"
        >
          <path d="M13 10V3L4 14h7v7l9-11h-7z" />
        </svg>
        AI 智能引擎
      </div>
      <h2 class="mb-2 text-2xl font-bold tracking-tight">
        AI 智能批改效能总览
      </h2>
      <p class="text-sm text-white/60">
        人工智能赋能教学，全面提升作业批改效率与质量
      </p>
    </div>

    <div
      class="relative z-10 grid gap-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5"
      :class="{ 'animate-in fade-in slide-in-from-bottom-4': animated }"
    >
      <div
        v-for="m in metrics"
        :key="m.label"
        class="rounded-xl border border-white/10 bg-white/5 p-5 text-center backdrop-blur transition-all hover:-translate-y-1 hover:border-white/20 hover:bg-white/10"
        :class="
          m.highlight
            ? 'border-amber-400/30 bg-amber-500/10 hover:bg-amber-500/20'
            : ''
        "
      >
        <div
          class="mx-auto mb-3 flex h-10 w-10 items-center justify-center rounded-lg"
          :class="
            m.highlight
              ? 'bg-amber-500/20 text-amber-200'
              : 'bg-blue-500/20 text-blue-200'
          "
        >
          <svg
            width="22"
            height="22"
            viewBox="0 0 24 24"
            fill="none"
            stroke="currentColor"
            stroke-width="1.8"
          >
            <path :d="m.icon" />
          </svg>
        </div>
        <div
          class="text-2xl font-bold"
          :class="m.highlight ? 'text-amber-200' : 'text-white'"
        >
          {{ m.value }}
        </div>
        <div class="mt-1 text-[13px] font-medium text-white/75">
          {{ m.label }}
        </div>
        <div class="mt-0.5 text-[11px] text-white/40">{{ m.sub }}</div>
      </div>
    </div>
  </section>
</template>
