<template>
  <div class="subject-analysis">
    <SubPageHeader>
      <template #center>
        <div class="subject-tabs">
          <button
            v-for="item in subjectTabs"
            :key="item"
            class="subject-tab"
            :class="{ active: item === activeSubject }"
            @click="switchSubject(item)"
          >
            {{ item }}
          </button>
        </div>
      </template>
    </SubPageHeader>

    <main class="analysis-body">
      <SubjectAnalysisPanel
        v-model:active-dimension="activeDimension"
        v-model:active-time="activeTime"
        :dimension-tabs="dimensionTabs"
        :time-filters="timeFilters"
      />
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import SubjectAnalysisPanel from "@/components/analysis/SubjectAnalysisPanel.vue";
import type { AnalysisDimension } from "@/components/analysis/SubjectAnalysisContent.vue";
import SubPageHeader from "@/components/layout/SubPageHeader.vue";
import type { FilterTabOption } from "@/components/lm/LmFilterTabs.vue";

type Subject = "英语" | "数学" | "语文" | "科学";
type TimeKey = "today" | "week" | "month" | "total";

const route = useRoute();
const router = useRouter();

const subjectTabs: Subject[] = ["英语", "数学", "语文", "科学"];

const activeSubject = computed<Subject>(() => {
  const raw = String(route.params.subject || "英语");
  return subjectTabs.includes(raw as Subject) ? (raw as Subject) : "英语";
});

const englishDimensionTabs: FilterTabOption[] = [
  { key: "word", label: "单词" },
  { key: "read", label: "阅读" },
  { key: "language", label: "语感" },
  { key: "duration", label: "学习时长" },
  { key: "video", label: "视频学习" },
  { key: "map", label: "知识图谱" },
  { key: "practice", label: "练习" },
  { key: "drill", label: "刷题" },
];

const commonDimensionTabs: FilterTabOption[] = [
  { key: "duration", label: "学习时长" },
  { key: "video", label: "视频学习" },
  { key: "map", label: "知识图谱" },
  { key: "practice", label: "练习" },
  { key: "drill", label: "刷题" },
];

const dimensionTabs = computed(() =>
  activeSubject.value === "英语" ? englishDimensionTabs : commonDimensionTabs,
);

const baseTimeFilters: FilterTabOption[] = [
  { key: "today", label: "今日" },
  { key: "week", label: "近一周" },
  { key: "month", label: "近一月" },
  { key: "total", label: "总计" },
];

const wordTimeFilters: FilterTabOption[] = [
  { key: "today", label: "今日" },
  { key: "week", label: "近一周" },
  { key: "total", label: "总计" },
];

const timeFilters = computed(() => (activeDimension.value === "word" ? wordTimeFilters : baseTimeFilters));

const activeDimension = ref<AnalysisDimension>("word");
const activeTime = ref<TimeKey>("today");

watch([activeSubject, dimensionTabs], () => {
  const keys = dimensionTabs.value.map((item) => item.key);
  if (!keys.includes(activeDimension.value)) {
    activeDimension.value = keys[0] as AnalysisDimension;
  }
});

watch(timeFilters, () => {
  const keys = timeFilters.value.map((item) => item.key);
  if (!keys.includes(activeTime.value)) {
    activeTime.value = "today";
  }
});

function switchSubject(subject: Subject) {
  if (subject === activeSubject.value) return;
  router.replace({
    name: "subject-analysis",
    params: { subject },
  });
}
</script>

<style scoped lang="scss">
.subject-analysis {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  background: #dfebff;
}

.subject-tabs {
  display: flex;
  align-items: center;
  gap: 52px;
}

.subject-tab {
  border: none;
  background: transparent;
  color: #323946;
  font-size: 40px;
  line-height: 1.1;
  cursor: pointer;
  transition: color 0.2s;

  &.active {
    color: var(--color-text-brand);
    font-weight: 600;
  }
}

.analysis-body {
  flex: 1;
  min-height: 0;
  padding: 0 64px 32px;
}
</style>
