<template>
  <div class="subject-analysis-content" :class="{ 'is-knowledge': dimension === 'map' }">
    <h2 class="section-title">{{ currentTitle }}</h2>

    <template v-if="dimension === 'word'">
      <div class="stats-grid stats-grid-word">
        <AnalysisStatCard
          v-for="(item, index) in wordCards"
          :key="`${item.title}-${index}`"
          v-bind="item"
        />
      </div>
    </template>

    <template v-else-if="dimension === 'duration'">
      <div class="stats-grid stats-grid-narrow">
        <AnalysisStatCard
          v-for="item in durationCards"
          :key="item.title"
          v-bind="item"
        />
      </div>
      <AnalysisBarChart :items="studyBars" :max="12" value-suffix="h" />
    </template>

    <template v-else-if="dimension === 'video'">
      <div class="stats-grid stats-grid-narrow">
        <AnalysisStatCard
          v-for="item in videoCards"
          :key="item.title"
          v-bind="item"
        />
      </div>
      <AnalysisLineChart :values="videoLineValues" />
    </template>

    <template v-else-if="dimension === 'map'">
      <div class="knowledge-scroll">
        <AnalysisDonutChart :items="donutItems" />
        <p class="knowledge-subtitle">• 我的知识图谱变化情况 •</p>
        <AnalysisBarChart
          class="knowledge-bar"
          :items="knowledgeBars"
          :max="240"
          axis-title="单位(h)"
          :show-legend="true"
        />
        <table class="knowledge-table">
          <thead>
            <tr>
              <th>知识点名称</th>
              <th>答题次数</th>
              <th>掌握程度</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="row in knowledgeRows" :key="row.id">
              <td>语言表达简明、准确、鲜明、生动</td>
              <td>8</td>
              <td :class="row.status === '掌握' ? 'status-pass' : 'status-risk'">{{ row.status }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </template>

    <template v-else>
      <div class="stats-grid" :class="simpleGridClass">
        <AnalysisStatCard
          v-for="(item, index) in simpleCards"
          :key="`${item.title}-${index}`"
          v-bind="item"
        />
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
import AnalysisBarChart, { type AnalysisBarItem } from "./AnalysisBarChart.vue";
import AnalysisDonutChart, { type AnalysisDonutItem } from "./AnalysisDonutChart.vue";
import AnalysisLineChart from "./AnalysisLineChart.vue";
import AnalysisStatCard from "./AnalysisStatCard.vue";

export type AnalysisDimension = "word" | "read" | "language" | "duration" | "video" | "map" | "practice" | "drill";

type StatTone = "red" | "orange" | "yellow" | "green" | "blue";

interface StatCard {
  title: string;
  value: string | number;
  unit: string;
  tone?: StatTone;
}

const props = defineProps<{
  dimension: AnalysisDimension;
}>();

const titleMap: Record<AnalysisDimension, string> = {
  word: "单词统计",
  read: "阅读统计",
  language: "语感统计",
  duration: "学习时长统计",
  video: "视频学习统计",
  map: "知识图谱统计",
  practice: "练习统计",
  drill: "刷题统计",
};

const currentTitle = computed(() => titleMap[props.dimension]);

const wordCards: StatCard[] = [
  { title: "陌生", value: 0, unit: "词", tone: "red" },
  { title: "认识", value: 0, unit: "词", tone: "orange" },
  { title: "熟悉", value: 0, unit: "词", tone: "yellow" },
  { title: "熟悉", value: 0, unit: "词", tone: "green" },
  { title: "总计", value: 0, unit: "词", tone: "blue" },
  { title: "新词数", value: 0, unit: "词", tone: "blue" },
  { title: "复习数", value: 0, unit: "词", tone: "blue" },
  { title: "有效学习时长", value: 0, unit: "s", tone: "blue" },
];

const durationCards: StatCard[] = [
  { title: "累计学习", value: 0, unit: "天" },
  { title: "连续学习", value: 0, unit: "天" },
];

const videoCards: StatCard[] = [
  { title: "已学视频", value: 0, unit: "个" },
  { title: "观看视频时长", value: 0, unit: "s" },
];

const cardMap: Record<AnalysisDimension, StatCard[]> = {
  word: wordCards,
  read: [
    { title: "练习数", value: 0, unit: "次" },
    { title: "阅读词汇量", value: 0, unit: "次" },
    { title: "阅读时长", value: 0, unit: "s" },
    { title: "正确率", value: 0, unit: "%" },
  ],
  language: [
    { title: "句子练习数", value: 0, unit: "词" },
    { title: "阅读词汇量", value: 0, unit: "词" },
    { title: "正确率", value: 0, unit: "%" },
  ],
  duration: durationCards,
  video: videoCards,
  map: [],
  practice: [
    { title: "自由学", value: 0, unit: "次" },
    { title: "AI精准学", value: 0, unit: "次" },
    { title: "自由组卷", value: 0, unit: "次" },
  ],
  drill: [
    { title: "做题数", value: 0, unit: "道" },
    { title: "产生错题数", value: 0, unit: "道" },
    { title: "订正错题数", value: 0, unit: "道" },
    { title: "答题正确率", value: 0, unit: "%" },
  ],
};

const simpleCards = computed(() => cardMap[props.dimension]);

const simpleGridClass = computed(() => ({
  "stats-grid-medium": props.dimension === "read" || props.dimension === "drill",
  "stats-grid-language": props.dimension === "language" || props.dimension === "practice",
}));

const studyBars: AnalysisBarItem[] = [
  { label: "自由学", value: 5.5, color: "#efa0e4" },
  { label: "AI精准学", value: 8.6, color: "#858cf0" },
  { label: "错题本", value: 11, color: "#6fb7ed" },
  { label: "自由组卷", value: 6.3, color: "#68d9e8" },
  { label: "单词闯关", value: 9, color: "#8ad000" },
  { label: "单词测试", value: 4.6, color: "#f8c16e" },
  { label: "语感训练", value: 9.5, color: "#f47373" },
];

const videoLineValues = [365, 400, 385, 330, 275, 252, 248, 236, 210, 166, 80];

const donutItems: AnalysisDonutItem[] = [
  { label: "陌生", value: 31, color: "#ef1d23" },
  { label: "熟悉", value: 23, color: "#f5bf00" },
  { label: "掌握", value: 28, color: "#1fc071" },
  { label: "待点亮", value: 18, color: "#d4e0e5" },
];

const knowledgeBars: AnalysisBarItem[] = [
  { label: "陌生", value: 226, color: "#ef1d23" },
  { label: "熟悉", value: 130, color: "#f5bf00" },
  { label: "掌握", value: 178, color: "#1fc071" },
];

const knowledgeRows = Array.from({ length: 6 }, (_, index) => ({
  id: index,
  status: index === 1 ? "陌生" : "掌握",
}));
</script>

<style scoped lang="scss">
.subject-analysis-content {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 62px 34px 0;
}

.section-title {
  text-align: center;
  color: #060606;
  font-size: 38px;
  font-weight: 700;
  line-height: 1.2;
}

.stats-grid {
  display: grid;
  gap: 26px 28px;
}

.stats-grid-word {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 62px;
}

.stats-grid-narrow,
.stats-grid-medium,
.stats-grid-language {
  width: 1140px;
  margin: 84px auto 62px;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px 30px;
}

.stats-grid-language {
  width: 1120px;
  margin-top: 84px;
}

.stats-grid-language :deep(.analysis-stat-card) {
  min-height: 165px;
}

.knowledge-scroll {
  flex: 1;
  min-height: 0;
  width: 100%;
  overflow-y: auto;
  padding: 28px 0 42px;
  -webkit-overflow-scrolling: touch;
}

.knowledge-subtitle {
  margin: 16px 0 18px;
  text-align: center;
  color: #333;
  font-size: 22px;
}

.knowledge-bar {
  margin-bottom: 54px;
}

.knowledge-table {
  width: 1060px;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  border: 1px solid #e1e6ed;
  border-radius: 12px;
  color: #333;
  font-size: 18px;

  th,
  td {
    height: 56px;
    padding: 0 42px;
    border-bottom: 1px solid #edf1f5;
    text-align: left;
  }

  th {
    background: #f7f9fc;
    color: #8c94a0;
    font-weight: 500;
  }

  th:nth-child(2),
  th:nth-child(3),
  td:nth-child(2),
  td:nth-child(3) {
    width: 210px;
    text-align: center;
  }

  tr:last-child td {
    border-bottom: none;
  }
}

.status-pass {
  color: #1fc071;
}

.status-risk {
  color: #ef4d5a;
}
</style>
