<script setup lang="tsx">
import { NCard, NDivider } from 'naive-ui'
import { ref } from 'vue'
import RankHeader from './modules/rank-header.vue'
import TeamItem from './modules/team-item.vue'
import TeamListHeader from './modules/team-list-header.vue'

const competitionInfo = {
  name: '阅读之星-辞海遨游环节 (2026)',
  date: '2026.01.12',
}

interface TeamData {
  id: number
  rank: number
  name: string
  group: string
  correctCount: string
  totalScore: number
  updateTime: string
  isExpanded: boolean
  scores: Record<string, number>
}

const teamList = ref<TeamData[]>([
  {
    id: 1,
    rank: 1,
    name: '清华学霸团',
    group: '第一组',
    correctCount: '15 / 15',
    totalScore: 150,
    updateTime: '2026-01-22 16:28:55',
    isExpanded: true,
    scores: {
      q1: 10,
      q2: 10,
      q3: 10,
      q4: 10,
      q5: 10,
      q6: 10,
      q7: 10,
      q8: 5,
      q9: 10,
      q10: 10,
      q11: 15,
      q12: 10,
      q13: 15,
      q14: 10,
      q15: 5,
    },
  },
  {
    id: 2,
    rank: 2,
    name: '无敌先锋队',
    group: '第一组',
    correctCount: '13 / 15',
    totalScore: 145,
    updateTime: '2026-01-22 16:30:12',
    isExpanded: false,
    scores: {},
  },
  {
    id: 3,
    rank: 3,
    name: '明日之星社',
    group: '第二组',
    correctCount: '13 / 15',
    totalScore: 130,
    updateTime: '2026-01-22 16:25:22',
    isExpanded: false,
    scores: {},
  },
  {
    id: 4,
    rank: 4,
    name: '火箭竞技团',
    group: '第一组',
    correctCount: '13 / 15',
    totalScore: 125,
    updateTime: '2026-01-22 16:22:10',
    isExpanded: false,
    scores: {},
  },
])

function toggleExpand(team: TeamData) {
  // Collapse others if needed, or allow multiple. Screenshot shows one.
  // Let's toggle.
  team.isExpanded = !team.isExpanded

  // If expanding, maybe populate scores if empty (mock logic)
  if (team.isExpanded && Object.keys(team.scores).length === 0) {
    for (let i = 1; i <= 15; i++) {
      team.scores[`q${i}`] = 10
    }
  }
}

function saveScores(team: TeamData) {
  window.$message?.success(`已保存 ${team.name} 的分数变动`)
  team.isExpanded = false
}

function handlePublish() {
  window.$message?.success('本场榜单发布成功')
}

function updateScore(team: TeamData, key: string, value: number | null) {
  if (value !== null) {
    team.scores[key] = value
  }
}
</script>

<template>
  <div class="flex-col-stretch gap-16px overflow-hidden lt-sm:overflow-auto">
    <NCard :bordered="false" size="small" class="card-wrapper sm:flex-1-hidden">
      <!-- Header -->
      <RankHeader
        :title="competitionInfo.name"
        :date="competitionInfo.date"
        @publish="handlePublish"
      />

      <NDivider />

      <!-- List Header -->
      <TeamListHeader />

      <!-- Custom Table / List -->
      <div class="flex flex-col gap-4">
        <!-- Data Rows -->
        <TeamItem
          v-for="team in teamList"
          :key="team.id"
          :team="team"
          @toggle-expand="toggleExpand"
          @save-scores="saveScores"
          @update-score="updateScore"
        />
      </div>
    </NCard>
  </div>
</template>

<style scoped>
:deep(.n-input-number .n-input__input-el) {
  text-align: center;
  font-weight: bold;
  color: var(--primary-color);
}
</style>
