<template>
  <div class="word-book-page">
    <SubPageHeader>
      <template #center>
        <div class="header-tabs">
          <button
            v-for="tab in pageTabs"
            :key="tab.key"
            class="header-tab"
            :class="{ active: activeMode === tab.key }"
            type="button"
            @click="activeMode = tab.key"
          >
            {{ tab.label }}
          </button>
        </div>
      </template>
    </SubPageHeader>

    <main class="word-book-body">
      <section class="word-book-panel">
        <WordBookFilterBar
          v-model:grade="activeGrade"
          v-model:status="activeStatus"
          v-model:edition="activeEdition"
          v-model:book="activeBook"
          v-model:unit="activeUnit"
          :mode="activeMode"
          :count="filteredCount"
          :grade-options="gradeOptions"
          :status-options="statusOptions"
          :edition-options="editionOptions"
          :book-options="bookOptions"
          :unit-options="unitOptions"
        />

        <div class="word-book-content">
          <LoadingState
            v-if="displayWords.length === 0"
            status="empty"
            empty-text="暂无内容"
          />

          <div v-else class="word-grid">
            <WordCard
              v-for="word in displayWords"
              :key="word.id"
              :word="word"
              @click="openWordDetail"
            />
          </div>

          <button
            v-if="displayWords.length > 0"
            class="start-btn lx-btn  lx-btn--primary lx-btn--short"
            type="button"
          >
            开始练习
          </button>
        </div>
      </section>
    </main>

    <WordDetailDialog v-model="showDetail" :word="currentWord" />
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from "vue";
import SubPageHeader from "@/components/layout/SubPageHeader.vue";
import LoadingState from "@/components/loading/LoadingState.vue";
import WordBookFilterBar from "./components/WordBookFilterBar.vue";
import WordCard, { type WordCardItem } from "./components/WordCard.vue";
import WordDetailDialog from "./components/WordDetailDialog.vue";

type PageMode = "stage" | "textbook";

const pageTabs = [
  { key: "stage" as const, label: "阶段" },
  { key: "textbook" as const, label: "教材" },
];

const gradeOptions = [
  { key: "all", label: "全部" },
  { key: "primary", label: "小学" },
  { key: "junior", label: "初中" },
  { key: "senior", label: "高中" },
  { key: "cet4", label: "四级" },
];

const statusOptions = [
  { key: "all", label: "全部" },
  { key: "unlocked", label: "未解锁" },
  { key: "new", label: "陌生" },
  { key: "known", label: "认识" },
  { key: "mastered", label: "掌握" },
];

const editionOptions = [
  { label: "译林版", value: "yilin" },
  { label: "人教版", value: "renjiao" },
  { label: "外研版", value: "waiyan" },
];

const bookOptions = [
  { label: "必修第一册", value: "book-1" },
  { label: "必修第二册", value: "book-2" },
  { label: "选择性必修", value: "book-3" },
];

const unitOptions = [
  { label: "Unit 1", value: "unit-1" },
  { label: "Unit 2", value: "unit-2" },
  { label: "Unit 3", value: "unit-3" },
];

const tones: WordCardItem["tone"][] = ["pink", "cream", "yellow", "green", "gray"];

const words: WordCardItem[] = Array.from({ length: 700 }, (_, index) => ({
  id: index + 1,
  word: "no",
  meaning: "不；没有；不是",
  partOfSpeech: "int.",
  tone: tones[index % tones.length],
  muted: index % tones.length === 4,
  grade: index % 4 === 0 ? "primary" : index % 4 === 1 ? "junior" : index % 4 === 2 ? "senior" : "cet4",
  status: statusOptions[(index % (statusOptions.length - 1)) + 1].key,
}));

const activeMode = ref<PageMode>("stage");
const activeGrade = ref("all");
const activeStatus = ref("all");
const activeEdition = ref("yilin");
const activeBook = ref("book-1");
const activeUnit = ref("unit-1");
const showDetail = ref(false);
const currentWord = ref<WordCardItem | null>(null);

const filteredWords = computed(() =>
  words.filter((word) => {
    if (activeGrade.value !== "all" && word.grade !== activeGrade.value) return false;
    if (activeStatus.value !== "all" && word.status !== activeStatus.value) return false;
    return true;
  }),
);

const filteredCount = computed(() => {
  if (activeGrade.value === "all" && activeStatus.value === "all") return words.length;
  return filteredWords.value.length;
});

const displayWords = computed(() => filteredWords.value.slice(0, 80));

function openWordDetail(word: WordCardItem) {
  currentWord.value = word;
  showDetail.value = true;
}
</script>

<style scoped lang="scss">
.word-book-page {
  display: flex;
  height: 100%;
  min-height: 0;
  flex-direction: column;
}

.header-tabs {
  display: flex;
  align-items: center;
  gap: 70px;
}

.header-tab {
  position: relative;
  display: flex;
  justify-content: center;
  border: none;
  background: transparent;
  color: #121212;
  cursor: pointer;
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  padding: 8px 0 16px;

  &.active {
    color: var(--color-text-brand);

    &::after {
      content: "";
      position: absolute;
      bottom: 0;
      width: 32px;
      height: 6px;
      border-radius: 3px;
      background: var(--color-text-brand);
    }
  }
}

.word-book-body {
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  padding: 0 64px 32px;
}

.word-book-panel {
  display: flex;
  width: 100%;
  max-width: 1792px;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.3);
}

.word-book-content {
  position: relative;
  display: flex;
  min-height: 0;
  flex: 1;
  flex-direction: column;
  overflow-y: auto;
  border-radius: 16px 16px 0 0;
  background: #fff;
  padding: 24px 32px 108px;
  scrollbar-width: none;

  &::-webkit-scrollbar {
    display: none;
  }
}

.word-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 28px;
}

.start-btn {
  position: fixed;
  bottom: 64px;
  align-self: center;
  margin-top: 20px;
  padding: 12px 64px;
  font-size: 28px;
  height: 72px;
}
</style>
