<template>
  <div class="student-management">
    <SubPageHeader>
      <template #center>
        <nav class="top-tabs">
          <button
            v-for="tab in topTabs"
            :key="tab"
            class="top-tab"
            :class="{ active: tab === activeTab }"
            type="button"
            @click="activeTab = tab"
          >
            {{ tab }}
          </button>
        </nav>
      </template>

      <template #right>
        <div class="header-filters">
          <LmSelect v-model="selectedSchool" :options="schoolOptions" width="240px" />
          <LmSelect v-model="selectedClass" :options="classOptions" width="150px" />
        </div>
      </template>
    </SubPageHeader>

    <main class="management-body">
      <section class="student-panel">
        <template v-if="activeTab === '管理'">
          <div class="batch-toolbar">
            <label v-for="action in batchActions" :key="action" class="check-action">
              <span class="fake-checkbox"></span>
              <span>{{ action }}</span>
            </label>
          </div>

          <LmStudentTable class="student-table-block" :students="students" />
        </template>

        <template v-else>
          <div class="summary-toolbar">
            <div class="summary-filter-left">
              <LmFilterTabs v-model="summaryScope" :options="summaryScopeOptions" mode="compact" />
              <LmFilterTabs v-model="summaryRange" :options="summaryRangeOptions" mode="compact" />
              <label v-if="activeTab === '单词句子'" class="auto-update">
                <span class="fake-checkbox"></span>
                单词测评
              </label>
              <template v-if="summaryRange === 'daily'">
                <button class="daily-date" type="button">
                  <span class="fake-checkbox"></span>
                  2026/04/23
                </button>
                <label class="auto-update">
                  <span class="fake-checkbox"></span>
                  自动更新
                </label>
              </template>
            </div>

            <span v-if="summaryRange === 'daily'" class="update-time">更新时间 11:40:42</span>
          </div>

          <LmStudentSummaryTable
            class="summary-table-block"
            :columns="currentSummaryColumns"
            :rows="currentSummaryRows"
            :average-row="currentSummaryAverageRow"
          />
        </template>
      </section>
    </main>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue'
import SubPageHeader from '@/components/layout/SubPageHeader.vue'
import LmSelect, { type LmSelectOption } from '@/components/lm/LmSelect.vue'
import LmFilterTabs, { type FilterTabOption } from '@/components/lm/LmFilterTabs.vue'
import LmStudentTable from '@/components/lm/LmStudentTable.vue'
import LmStudentSummaryTable, {
  type StudentSummaryColumn,
  type StudentSummaryRow,
} from '@/components/lm/LmStudentSummaryTable.vue'

type Gender = 'boy' | 'girl'

type Student = {
  id: number
  name: string
  gender: Gender
  avatar: string
  account: string
  coins: number
  diamonds: number
  checkInDays: number
}

const topTabs = ['管理', '综合', '单词句子', '英语', '数学', '语文']
const batchActions = ['批量操作', '批量奖惩', '教材设置', '任务设置', '乐贝明细']
const activeTab = ref('管理')
const selectedSchool = ref('guanling-huajiang')
const selectedClass = ref('grade5-class2')
const summaryScope = ref('personal')
const summaryRange = ref('total')

const summaryScopeOptions: FilterTabOption[] = [
  { key: 'personal', label: '个人' },
  { key: 'group', label: '小组' },
]

const summaryRangeOptions: FilterTabOption[] = [
  { key: 'total', label: '总计' },
  { key: 'daily', label: '每日数据' },
]

const comprehensiveColumns: StudentSummaryColumn[] = [
  { key: 'durationSeconds', label: '有效时长', type: 'duration' },
  { key: 'knowledgePoints', label: '知识点' },
  { key: 'wrongQuestions', label: '错题' },
  { key: 'corrections', label: '订正' },
  { key: 'coins', label: '乐贝' },
]

const wordSentenceColumns: StudentSummaryColumn[] = [
  { key: 'durationSeconds', label: '有效时长', type: 'duration' },
  { key: 'unknown', label: '陌生', sortable: false },
  { key: 'known', label: '认识', sortable: false },
  { key: 'familiar', label: '熟悉', sortable: false },
  { key: 'mastered', label: '掌握' },
  { key: 'total', label: '总数' },
  { key: 'stars', label: '星星' },
]

const subjectColumns: StudentSummaryColumn[] = [
  { key: 'durationSeconds', label: '有效时长', type: 'duration' },
  { key: 'correctAnswers', label: '答题正确' },
  { key: 'wrongAnswers', label: '答题错误' },
  { key: 'knowledgeTotal', label: '知识点总数' },
  { key: 'knowledgeMastered', label: '知识点掌握' },
  { key: 'correctionTotal', label: '订正总数' },
  { key: 'correctionCorrect', label: '订正正确' },
]

const schoolOptions: LmSelectOption[] = [
  { label: '关岭自治县花江...', value: 'guanling-huajiang' },
  { label: '关岭自治县第一小学', value: 'guanling-no1' },
]

const classOptions: LmSelectOption[] = [
  { label: '五年2班', value: 'grade5-class2' },
  { label: '五年1班', value: 'grade5-class1' },
]

const students: Student[] = Array.from({ length: 12 }, (_, index) => {
  const gender: Gender = index === 0 ? 'boy' : 'girl'

  return {
    id: index + 1,
    name: '张小小',
    gender,
    avatar: `https://api.dicebear.com/9.x/adventurer/svg?seed=student-${index + 1}`,
    account: 'chan**',
    coins: 0,
    diamonds: 510,
    checkInDays: 58,
  }
})

const comprehensiveRows: StudentSummaryRow[] = Array.from({ length: 9 }, (_, index) => {
  const gender: Gender = index === 0 ? 'boy' : 'girl'

  return {
    id: index + 1,
    name: '张小小',
    gender,
    avatar: `https://api.dicebear.com/9.x/adventurer/svg?seed=summary-${index + 1}`,
    metrics: {
      durationSeconds: 68 * 3600 + 33 * 60 + 46,
      knowledgePoints: 968,
      wrongQuestions: 423,
      corrections: 581,
      coins: 59,
    },
  }
})

const comprehensiveAverageRow = {
  durationSeconds: 68 * 3600 + 33 * 60 + 46,
  knowledgePoints: 968,
  wrongQuestions: 423,
  corrections: 581,
  coins: 59,
}

const wordSentenceRows = createMetricRows('word', {
  durationSeconds: 68 * 3600 + 33 * 60 + 46,
  unknown: 968,
  known: 968,
  familiar: 968,
  mastered: 968,
  total: 968,
  stars: 968,
})

const wordSentenceAverageRow = {
  durationSeconds: 68 * 3600 + 33 * 60 + 46,
  unknown: 968,
  known: 968,
  familiar: 968,
  mastered: 968,
  total: 968,
  stars: 968,
}

const subjectMetricMap: Record<string, Record<string, number>> = {
  英语: {
    durationSeconds: 68 * 3600 + 33 * 60 + 46,
    correctAnswers: 868,
    wrongAnswers: 868,
    knowledgeTotal: 666,
    knowledgeMastered: 666,
    correctionTotal: 868,
    correctionCorrect: 868,
  },
  数学: {
    durationSeconds: 52 * 3600 + 18 * 60 + 25,
    correctAnswers: 726,
    wrongAnswers: 139,
    knowledgeTotal: 580,
    knowledgeMastered: 492,
    correctionTotal: 318,
    correctionCorrect: 286,
  },
  语文: {
    durationSeconds: 45 * 3600 + 9 * 60 + 12,
    correctAnswers: 642,
    wrongAnswers: 96,
    knowledgeTotal: 520,
    knowledgeMastered: 438,
    correctionTotal: 260,
    correctionCorrect: 231,
  },
}

const currentSummaryColumns = computed(() => {
  if (activeTab.value === '单词句子') return wordSentenceColumns
  if (activeTab.value === '综合') return comprehensiveColumns
  return subjectColumns
})

const currentSummaryRows = computed(() => {
  if (activeTab.value === '单词句子') return wordSentenceRows
  if (activeTab.value === '综合') return comprehensiveRows
  return createMetricRows(activeTab.value, currentSubjectMetrics.value)
})

const currentSummaryAverageRow = computed(() => {
  if (activeTab.value === '单词句子') return wordSentenceAverageRow
  if (activeTab.value === '综合') return comprehensiveAverageRow
  return currentSubjectMetrics.value
})

const currentSubjectMetrics = computed(() => subjectMetricMap[activeTab.value] ?? subjectMetricMap.英语)

function createMetricRows(seedPrefix: string, metrics: Record<string, number>): StudentSummaryRow[] {
  return Array.from({ length: 9 }, (_, index) => {
    const gender: Gender = index === 0 ? 'boy' : 'girl'

    return {
      id: index + 1,
      name: '张小小',
      gender,
      avatar: `https://api.dicebear.com/9.x/adventurer/svg?seed=${seedPrefix}-${index + 1}`,
      metrics: { ...metrics },
    }
  })
}
</script>

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

.top-tabs {
  display: flex;
  align-items: center;
  gap: 46px;
}

.top-tab {
  position: relative;
  border: none;
  background: transparent;
  color: #111827;
  cursor: pointer;
  font-size: 36px;
  font-weight: 600;
  line-height: 1;
  padding: 8px 0 12px;
  transition: color 0.2s;

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

    &::after {
      content: "";
      position: absolute;
      left: 50%;
      bottom: 0;
      width: 34px;
      height: 6px;
      border-radius: 999px;
      background: var(--color-text-brand);
      transform: translateX(-50%);
    }
  }
}

.header-filters {
  display: flex;
  align-items: center;
  gap: 14px;

  :deep(.el-select__wrapper) {
    min-height: 48px;
    background: rgba(255, 255, 255, 0.52);
    box-shadow: none;
  }

  :deep(.el-select__wrapper.is-focused),
  :deep(.el-select__wrapper.is-hovering) {
    box-shadow: none;
  }

  :deep(.el-select__selected-item) {
    color: #4b5563;
    font-size: 20px;
  }

  :deep(.el-select__caret) {
    color: #8b95a7;
    font-size: 16px;
  }
}

.management-body {
  flex: 1;
  min-height: 0;
  padding: 0 64px 36px;
}

.student-panel {
  width: 100%;
  max-width: 1792px;
  height: 100%;
  margin: 0 auto;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.62);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.28);
}

.batch-toolbar {
  display: flex;
  align-items: center;
  gap: 42px;
  height: 98px;
  padding: 0 34px;
}

.check-action {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: #555f70;
  font-size: 22px;
}

.fake-checkbox {
  display: inline-block;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: 2px solid rgba(218, 226, 238, 0.72);
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.6);
}

.student-table-block {
  height: calc(100% - 98px);
}

.summary-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 98px;
  padding: 0 34px;

  :deep(.lm-filter-tabs) {
    background: rgba(230, 235, 245, 0.78);
  }

  :deep(.filter-btn) {
    font-size: 20px;
    padding: 5px 16px;
  }
}

.summary-filter-left {
  display: flex;
  align-items: center;
  gap: 52px;
  min-width: 0;
}

.daily-date,
.auto-update {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: none;
  background: transparent;
  color: #445064;
  font: inherit;
  font-size: 20px;
  white-space: nowrap;
}

.daily-date {
  cursor: pointer;
}

.auto-update {
  cursor: default;
}

.update-time {
  color: #7d8796;
  flex-shrink: 0;
  font-size: 20px;
  white-space: nowrap;
}

.summary-table-block {
  height: calc(100% - 98px);
}
</style>
