<script setup lang="ts">
import { NButton, NTag, useMessage } from 'naive-ui'
import { ref } from 'vue'
import { useRoute } from 'vue-router'
import BasicInfoCard from './modules/BasicInfoCard.vue'
import QuestionConfigCard from './modules/QuestionConfigCard.vue'
import SideMenu from './modules/SideMenu.vue'

import TeamListCard from './modules/TeamListCard.vue'

const message = useMessage()
const isEdit = ref(false)
const route = useRoute()
// eslint-disable-next-line unused-imports/no-unused-vars
const competitionId = route.query.id

function handleSave() {
  // 模拟保存逻辑
  isEdit.value = false
  message.success('保存成功')
}
</script>

<template>
  <div class="h-full flex gap-4 overflow-hidden bg-gray-50/50 p-4">
    <!-- 左侧分组导航 -->
    <div class="h-full w-64 flex flex-col flex-shrink-0 overflow-hidden rounded-xl bg-white shadow-sm">
      <SideMenu />
    </div>

    <!-- 右侧主要内容区 -->
    <div class="h-full flex flex-col flex-1 overflow-hidden">
      <!-- 新增：顶部全局操作栏 -->
      <PageHeader class="mb-4 flex-shrink-0">
        <div class="text-sm text-gray-500">
          当前状态：
          <NTag :type="isEdit ? 'warning' : 'success'" size="small" :bordered="false">
            {{ isEdit ? '编辑中' : '预览中' }}
          </NTag>
        </div>
        <template #action>
          <div class="flex gap-3">
            <NButton type="error" secondary>
              <template #icon>
                <icon-ic-baseline-delete class="text-icon" />
              </template>
              删除赛事
            </NButton>

            <div class="w-1px bg-gray-200" />

            <NButton v-if="!isEdit" type="primary" secondary @click="isEdit = true">
              <template #icon>
                <icon-ic-baseline-edit class="text-icon" />
              </template>
              进入编辑模式
            </NButton>

            <template v-else>
              <NButton secondary @click="isEdit = false">
                取消
              </NButton>
              <NButton type="primary" @click="handleSave">
                <template #icon>
                  <icon-ic-baseline-save class="text-icon" />
                </template>
                保存更改
              </NButton>
            </template>

            <NButton v-if="!isEdit" type="success">
              <template #icon>
                <icon-ic-baseline-rocket-launch class="text-icon" />
              </template>
              立即发布
            </NButton>
          </div>
        </template>
      </PageHeader>

      <!-- 滚动内容区 -->
      <div class="no-scrollbar flex flex-col flex-1 gap-4 overflow-y-auto">
        <!-- 将 isEdit 状态传递给子组件 -->
        <BasicInfoCard :is-edit="isEdit" />
        <TeamListCard :is-edit="isEdit" />
        <QuestionConfigCard :is-edit="isEdit" />
      </div>
    </div>
  </div>
</template>

<style scoped>
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
</style>
