<template>
  <div class="registration-records-page">
    <a-card class="mb-4">
      <template #title>
        <a-space>
          <a-button type="text" style="padding: 0; margin-right: 4px" @click="router.back()">
            <template #icon><arrow-left-outlined /></template>
          </a-button>
          <a-breadcrumb>
            <a-breadcrumb-item>
              <router-link :to="{ name: 'ContestsRegistrations', params: { tenantCode } }">报名管理</router-link>
            </a-breadcrumb-item>
            <a-breadcrumb-item>{{ contestName || '报名记录' }}</a-breadcrumb-item>
          </a-breadcrumb>
        </a-space>
      </template>
      <template #extra>
        <a-space>
          <a-button
            v-permission="'contest:update'"
            type="primary"
            :disabled="selectedRowKeys.length === 0"
            @click="handleBatchReview"
          >
            批量审核
          </a-button>
          <a-button @click="handleExport" :loading="exportLoading">
            <template #icon><DownloadOutlined /></template>
            导出
          </a-button>
        </a-space>
      </template>
    </a-card>

    <!-- #3 统计概览 -->
    <div class="stats-row">
      <div v-for="item in recordStatsItems" :key="item.key" :class="['stat-card', { active: activeRecordState === item.key }]" @click="handleRecordStatClick(item.key)">
        <div class="stat-icon" :style="{ background: item.bgColor }">
          <component :is="item.icon" :style="{ color: item.color }" />
        </div>
        <div class="stat-info">
          <span class="stat-count">{{ item.value }}</span>
          <span class="stat-label">{{ item.label }}</span>
        </div>
      </div>
    </div>

    <!-- 搜索表单（合并个人/团队） -->
    <a-form :model="searchParams" layout="inline" class="search-form" @finish="handleSearch">
      <a-form-item v-if="contestType === 'individual'" label="姓名">
        <a-input v-model:value="searchParams.nickname" placeholder="请输入姓名" allow-clear style="width: 120px" />
      </a-form-item>
      <a-form-item v-if="contestType === 'team'" label="队伍名称">
        <a-input v-model:value="searchParams.teamName" placeholder="请输入队伍名称" allow-clear style="width: 130px" />
      </a-form-item>
      <a-form-item label="报名账号">
        <a-input v-model:value="searchParams.accountNo" placeholder="请输入账号" allow-clear style="width: 140px" />
      </a-form-item>
      <a-form-item label="审核状态">
        <a-select v-model:value="searchParams.registrationState" placeholder="全部" allow-clear style="width: 110px" @change="handleSearch">
          <a-select-option value="pending">待审核</a-select-option>
          <a-select-option value="passed">已通过</a-select-option>
          <a-select-option value="rejected">已拒绝</a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item label="报名时间">
        <a-range-picker v-model:value="dateRange" style="width: 240px" @change="handleDateChange" />
      </a-form-item>
      <a-form-item>
        <a-button type="primary" html-type="submit"><template #icon><SearchOutlined /></template> 搜索</a-button>
        <a-button style="margin-left: 8px" @click="handleReset"><template #icon><ReloadOutlined /></template> 重置</a-button>
      </a-form-item>
    </a-form>

    <!-- 个人参与表格 -->
    <a-table
      v-if="contestType === 'individual'"
      :columns="individualColumns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      :row-selection="rowSelection"
      row-key="id"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'">
          {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
        </template>
        <template v-else-if="column.key === 'tenant'">
          <div>
            <div>{{ record.user?.tenant?.name || record.tenant?.name || "-" }}</div>
            <div v-if="record.user?.student?.class" class="org-detail">
              {{ record.user.student.class.grade?.name || "" }}
              {{ record.user.student.class.name || "" }}
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'nickname'">
          {{ record.user?.nickname || record.accountName || "-" }}
        </template>
        <template v-else-if="column.key === 'accountNo'">
          {{ record.accountNo || record.user?.username || "-" }}
        </template>
        <template v-else-if="column.key === 'registrationState'">
          <a-tag :color="getStateColor(record.registrationState)">
            {{ getStateText(record.registrationState) }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'registrationTime'">
          {{ formatDateTime(record.registrationTime) }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button type="link" size="small" @click="handleViewDetail(record)">详情</a-button>
            <a-button v-if="record.registrationState === 'pending'" v-permission="'contest:update'" type="link" size="small" style="color: #10b981" @click="handlePass(record)">通过</a-button>
            <a-button v-if="record.registrationState === 'pending'" v-permission="'contest:update'" type="link" size="small" danger @click="handleReject(record)">拒绝</a-button>
            <a-button v-if="record.registrationState === 'passed' || record.registrationState === 'rejected'" v-permission="'contest:update'" type="link" size="small" style="color: #f59e0b" @click="handleRevoke(record)">撤销</a-button>
          </a-space>
        </template>
      </template>
    </a-table>

    <!-- 团队参与表格 -->
    <a-table
      v-else
      :columns="teamColumns"
      :data-source="dataSource"
      :loading="loading"
      :pagination="pagination"
      :row-selection="rowSelection"
      row-key="id"
      @change="handleTableChange"
    >
      <template #bodyCell="{ column, record, index }">
        <template v-if="column.key === 'index'">
          {{ (pagination.current - 1) * pagination.pageSize + index + 1 }}
        </template>
        <template v-else-if="column.key === 'tenant'">
          <div>
            <div>{{ record.user?.tenant?.name || record.tenant?.name || "-" }}</div>
            <div v-if="record.user?.student?.class" class="org-detail">
              {{ record.user.student.class.grade?.name || "" }}
              {{ record.user.student.class.name || "" }}
            </div>
          </div>
        </template>
        <template v-else-if="column.key === 'teamName'">
          {{ record.team?.teamName || "-" }}
        </template>
        <template v-else-if="column.key === 'accountNo'">
          {{ record.accountNo || record.user?.username || "-" }}
        </template>
        <template v-else-if="column.key === 'registrationState'">
          <a-tag :color="getStateColor(record.registrationState)">
            {{ getStateText(record.registrationState) }}
          </a-tag>
        </template>
        <template v-else-if="column.key === 'registrationTime'">
          {{ formatDateTime(record.registrationTime) }}
        </template>
        <template v-else-if="column.key === 'action'">
          <a-space>
            <a-button type="link" size="small" @click="handleViewMembers(record)">成员</a-button>
            <a-button v-if="record.registrationState === 'pending'" v-permission="'contest:update'" type="link" size="small" style="color: #10b981" @click="handlePass(record)">通过</a-button>
            <a-button v-if="record.registrationState === 'pending'" v-permission="'contest:update'" type="link" size="small" danger @click="handleReject(record)">拒绝</a-button>
            <a-button v-if="record.registrationState === 'passed' || record.registrationState === 'rejected'" v-permission="'contest:update'" type="link" size="small" style="color: #f59e0b" @click="handleRevoke(record)">撤销</a-button>
          </a-space>
        </template>
      </template>
    </a-table>

    <!-- 详细信息抽屉 -->
    <a-drawer
      v-model:open="detailDrawerVisible"
      title="详细信息"
      width="600"
      placement="right"
    >
      <template v-if="currentDetail">
        <a-descriptions :column="2" bordered>
          <a-descriptions-item label="姓名">
            {{ currentDetail.user?.nickname || currentDetail.accountName || "-" }}
          </a-descriptions-item>
          <a-descriptions-item label="账号">
            {{ currentDetail.accountNo || currentDetail.user?.username || "-" }}
          </a-descriptions-item>
          <a-descriptions-item label="机构">
            <div>{{ currentDetail.user?.tenant?.name || "-" }}</div>
            <div v-if="currentDetail.user?.student?.class" class="org-detail">
              {{ currentDetail.user.student.class.grade?.name || "" }}
              {{ currentDetail.user.student.class.name || "" }}
            </div>
          </a-descriptions-item>
          <a-descriptions-item label="审核状态">
            <a-tag :color="getStateColor(currentDetail.registrationState)">
              {{ getStateText(currentDetail.registrationState) }}
            </a-tag>
          </a-descriptions-item>
          <a-descriptions-item label="报名时间" :span="2">
            {{ formatDateTime(currentDetail.registrationTime) }}
          </a-descriptions-item>
          <a-descriptions-item v-if="currentDetail.reason" label="审核理由" :span="2">
            {{ currentDetail.reason }}
          </a-descriptions-item>
        </a-descriptions>
      </template>
    </a-drawer>

    <!-- 成员信息弹窗 -->
    <a-modal
      v-model:open="membersModalVisible"
      :title="`团队成员 - ${currentTeam?.teamName || ''}`"
      :footer="null"
      width="700px"
    >
      <template v-if="currentTeam">
        <a-descriptions :column="3" bordered style="margin-bottom: 16px">
          <a-descriptions-item label="团队名称">{{ currentTeam.teamName }}</a-descriptions-item>
          <a-descriptions-item label="队长">{{ currentTeam.leader?.nickname || "-" }}</a-descriptions-item>
          <a-descriptions-item label="成员数">{{ teamMembers.length || currentTeam._count?.members || 0 }}人</a-descriptions-item>
        </a-descriptions>
        <a-table
          :columns="memberColumns"
          :data-source="teamMembers"
          :loading="membersLoading"
          :pagination="false"
          row-key="id"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'role'">
              <a-tag :color="getMemberRoleColor(record.role)">
                {{ getMemberRoleText(record.role) }}
              </a-tag>
            </template>
          </template>
        </a-table>
      </template>
    </a-modal>

    <!-- 批量审核弹窗 -->
    <a-modal
      v-model:open="batchReviewModalVisible"
      title="批量审核"
      :confirm-loading="batchReviewLoading"
      @ok="handleBatchReviewSubmit"
    >
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="审核结果" required>
          <a-radio-group v-model:value="batchReviewForm.registrationState">
            <a-radio value="passed">通过</a-radio>
            <a-radio value="rejected">拒绝</a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item label="审核理由">
          <a-textarea
            v-model:value="batchReviewForm.reason"
            placeholder="请输入审核理由"
            :rows="4"
          />
        </a-form-item>
        <a-form-item label="已选择">
          <span>{{ selectedRowKeys.length }} 条记录</span>
        </a-form-item>
      </a-form>
    </a-modal>

    <!-- 拒绝理由弹窗 -->
    <a-modal
      v-model:open="rejectModalVisible"
      title="拒绝理由"
      :confirm-loading="rejectLoading"
      @ok="handleRejectSubmit"
    >
      <a-form :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
        <a-form-item label="拒绝理由">
          <a-textarea
            v-model:value="rejectReason"
            placeholder="请输入拒绝理由"
            :rows="4"
          />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted, computed } from "vue"
import { useRouter, useRoute } from "vue-router"
import { message, Modal } from "ant-design-vue"
import { useAuthStore } from "@/stores/auth"
import type { TableProps } from "ant-design-vue"
import {
  SearchOutlined,
  ReloadOutlined,
  DownloadOutlined,
  ArrowLeftOutlined,
  TeamOutlined,
  ClockCircleOutlined,
  CheckCircleOutlined,
  CloseCircleOutlined,
} from "@ant-design/icons-vue"
import {
  registrationsApi,
  contestsApi,
  teamsApi,
  type ContestRegistration,
  type QueryRegistrationParams,
  type ContestTeam,
  type ContestTeamMember,
} from "@/api/contests"
import dayjs from "dayjs"
import type { Dayjs } from "dayjs"

const router = useRouter()
const route = useRoute()
const tenantCode = route.params.tenantCode as string
const contestId = Number(route.params.id)
const authStore = useAuthStore()
const isSuperAdmin = computed(() => authStore.hasAnyRole(['super_admin']))

// #3 统计概览
const recordStats = ref({ total: 0, pending: 0, passed: 0, rejected: 0 })
const activeRecordState = ref('')

const recordStatsItems = computed(() => [
  { key: '', label: '全部', value: recordStats.value.total, icon: TeamOutlined, color: '#6366f1', bgColor: 'rgba(99,102,241,0.1)' },
  { key: 'pending', label: '待审核', value: recordStats.value.pending, icon: ClockCircleOutlined, color: '#f59e0b', bgColor: 'rgba(245,158,11,0.1)' },
  { key: 'passed', label: '已通过', value: recordStats.value.passed, icon: CheckCircleOutlined, color: '#10b981', bgColor: 'rgba(16,185,129,0.1)' },
  { key: 'rejected', label: '已拒绝', value: recordStats.value.rejected, icon: CloseCircleOutlined, color: '#ef4444', bgColor: 'rgba(239,68,68,0.1)' },
])

const fetchRecordStats = async () => {
  try { recordStats.value = await registrationsApi.getStats(contestId) } catch { /* */ }
}

const handleRecordStatClick = (key: string) => {
  if (activeRecordState.value === key) { activeRecordState.value = ''; searchParams.registrationState = undefined }
  else { activeRecordState.value = key; searchParams.registrationState = key || undefined }
  pagination.current = 1
  fetchList()
}

// 活动信息
const contestName = ref("")
const contestType = ref<"individual" | "team">("individual")

// 日期范围
const dateRange = ref<[Dayjs, Dayjs] | null>(null)

// 列表状态
const loading = ref(false)
const dataSource = ref<ContestRegistration[]>([])
const pagination = reactive({
  current: 1,
  pageSize: 10,
  total: 0,
})

// 搜索参数
const searchParams = reactive<QueryRegistrationParams & { teamName?: string }>({
  contestId,
  tenantName: "",
  nickname: "",
  teamName: "",
  accountNo: "",
  registrationState: undefined,
  startTime: undefined,
  endTime: undefined,
})

// 选中的行
const selectedRowKeys = ref<number[]>([])
const rowSelection = computed<TableProps["rowSelection"]>(() => ({
  selectedRowKeys: selectedRowKeys.value,
  onChange: (keys: any) => {
    selectedRowKeys.value = keys
  },
}))

// 导出loading
const exportLoading = ref(false)

// 详情抽屉
const detailDrawerVisible = ref(false)
const currentDetail = ref<ContestRegistration | null>(null)

// 成员信息弹窗
const membersModalVisible = ref(false)
const currentTeam = ref<ContestTeam | null>(null)
const teamMembers = ref<ContestTeamMember[]>([])
const membersLoading = ref(false)

// 批量审核弹窗
const batchReviewModalVisible = ref(false)
const batchReviewLoading = ref(false)
const batchReviewForm = reactive({
  registrationState: "passed" as "passed" | "rejected",
  reason: "",
})

// 拒绝弹窗
const rejectModalVisible = ref(false)
const rejectLoading = ref(false)
const rejectReason = ref("")
const currentRejectId = ref<number | null>(null)

// 个人参与表格列（租户端去掉机构列）
const individualColumns = computed(() => {
  const cols: any[] = [
    { title: "序号", key: "index", width: 50 },
  ]
  if (isSuperAdmin.value) cols.push({ title: "机构", key: "tenant", width: 140 })
  cols.push(
    { title: "姓名", key: "nickname", width: 120 },
    { title: "报名账号", key: "accountNo", width: 140 },
    { title: "审核状态", key: "registrationState", width: 90 },
    { title: "报名时间", key: "registrationTime", width: 150 },
    { title: "操作", key: "action", width: 200, fixed: "right" as const },
  )
  return cols
})

// 团队参与表格列
const teamColumns = computed(() => {
  const cols: any[] = [
    { title: "序号", key: "index", width: 50 },
  ]
  if (isSuperAdmin.value) cols.push({ title: "机构", key: "tenant", width: 140 })
  cols.push(
    { title: "队伍名称", key: "teamName", width: 140 },
    { title: "报名账号", key: "accountNo", width: 130 },
    { title: "审核状态", key: "registrationState", width: 90 },
    { title: "报名时间", key: "registrationTime", width: 140 },
    { title: "操作", key: "action", width: 200, fixed: "right" as const },
  )
  return cols
})

// 团队成员表格列
const memberColumns = [
  {
    title: "姓名",
    dataIndex: ["user", "nickname"],
    key: "nickname",
    width: 120,
  },
  {
    title: "账号",
    dataIndex: ["user", "username"],
    key: "username",
    width: 150,
  },
  {
    title: "角色",
    dataIndex: "role",
    key: "role",
    width: 100,
  },
  {
    title: "加入时间",
    dataIndex: "createTime",
    key: "createTime",
    width: 160,
    customRender: ({ record }: { record: ContestTeamMember }) => {
      return record.createTime
        ? dayjs(record.createTime).format("YYYY-MM-DD HH:mm")
        : "-"
    },
  },
]

// 格式化日期时间
const formatDateTime = (dateStr?: string) => {
  if (!dateStr) return "-"
  return dayjs(dateStr).format("YYYY-MM-DD HH:mm")
}

// 获取状态颜色
const getStateColor = (state?: string) => {
  switch (state) {
    case "passed":
      return "success"
    case "rejected":
      return "error"
    default:
      return "processing"
  }
}

// 获取状态文本
const getStateText = (state?: string) => {
  switch (state) {
    case "passed":
      return "已通过"
    case "rejected":
      return "已拒绝"
    default:
      return "待审核"
  }
}

// 获取成员角色颜色
const getMemberRoleColor = (role?: string) => {
  switch (role) {
    case "leader":
      return "gold"
    case "mentor":
      return "purple"
    default:
      return "blue"
  }
}

// 获取成员角色文本
const getMemberRoleText = (role?: string) => {
  switch (role) {
    case "leader":
      return "队长"
    case "mentor":
      return "指导老师"
    default:
      return "成员"
  }
}

// 加载活动信息
const fetchContestInfo = async () => {
  try {
    const contest = await contestsApi.getDetail(contestId)
    contestName.value = contest.contestName
    contestType.value = contest.contestType as "individual" | "team"
  } catch (error) {
    console.error("获取活动信息失败", error)
  }
}

// 获取列表数据
const fetchList = async () => {
  loading.value = true
  try {
    const params: QueryRegistrationParams = {
      contestId,
      page: pagination.current,
      pageSize: pagination.pageSize,
    }
    // 添加搜索条件
    if (searchParams.tenantName) params.tenantName = searchParams.tenantName
    if (searchParams.accountNo) params.accountNo = searchParams.accountNo
    if (searchParams.registrationState) params.registrationState = searchParams.registrationState
    if (searchParams.startTime) params.startTime = searchParams.startTime
    if (searchParams.endTime) params.endTime = searchParams.endTime

    if (contestType.value === 'individual') {
      if (searchParams.nickname) params.nickname = searchParams.nickname
    } else {
      if (searchParams.teamName) params.teamName = searchParams.teamName
    }

    const response = await registrationsApi.getList(params)
    dataSource.value = response.list
    pagination.total = response.total
  } catch (error) {
    message.error("获取报名记录失败")
  } finally {
    loading.value = false
  }
}

// 日期变化
const handleDateChange = (dates: [Dayjs, Dayjs] | null) => {
  if (dates) {
    searchParams.startTime = dates[0].format("YYYY-MM-DD")
    searchParams.endTime = dates[1].format("YYYY-MM-DD")
  } else {
    searchParams.startTime = undefined
    searchParams.endTime = undefined
  }
}

// 搜索
const handleSearch = () => {
  pagination.current = 1
  fetchList()
}

// 重置搜索
const handleReset = () => {
  searchParams.tenantName = ""
  searchParams.nickname = ""
  searchParams.teamName = ""
  searchParams.accountNo = ""
  searchParams.registrationState = undefined
  searchParams.startTime = undefined
  searchParams.endTime = undefined
  dateRange.value = null
  pagination.current = 1
  fetchList()
}

// 表格变化
const handleTableChange = (pag: any) => {
  pagination.current = pag.current
  pagination.pageSize = pag.pageSize
  fetchList()
}

// 查看详细信息
const handleViewDetail = async (record: ContestRegistration) => {
  try {
    const detail = await registrationsApi.getDetail(record.id)
    currentDetail.value = detail
    detailDrawerVisible.value = true
  } catch (error: any) {
    message.error(error?.response?.data?.message || "获取详情失败")
  }
}

// 查看成员信息
const handleViewMembers = async (record: ContestRegistration) => {
  if (!record.team) {
    message.warning("暂无团队信息")
    return
  }
  membersModalVisible.value = true
  membersLoading.value = true
  currentTeam.value = null
  teamMembers.value = []

  try {
    const teamDetail = await teamsApi.getDetail(record.team.id)
    // 更新完整的团队信息（包含 leader 和成员数）
    currentTeam.value = teamDetail
    teamMembers.value = teamDetail.members || []
  } catch (error: any) {
    message.error("获取团队成员失败")
    currentTeam.value = record.team // 降级使用列表中的数据
    teamMembers.value = []
  } finally {
    membersLoading.value = false
  }
}

// #5 通过加二次确认
const handlePass = (record: ContestRegistration) => {
  Modal.confirm({
    title: '确定通过？',
    content: `通过后「${record.user?.nickname || record.accountName || '该用户'}」将可以提交作品`,
    okText: '确定通过',
    onOk: async () => {
      try {
        await registrationsApi.review(record.id, { registrationState: "passed" })
        message.success("已通过")
        fetchList()
        fetchRecordStats()
      } catch (error: any) {
        message.error(error?.response?.data?.message || "操作失败")
      }
    },
  })
}

// 撤销审核
const handleRevoke = (record: ContestRegistration) => {
  Modal.confirm({
    title: '确定撤销审核？',
    content: '撤销后将恢复为待审核状态',
    okText: '确定撤销',
    onOk: async () => {
      try {
        await registrationsApi.revokeReview(record.id)
        message.success('已撤销')
        fetchList()
        fetchRecordStats()
      } catch (error: any) { message.error(error?.response?.data?.message || '撤销失败') }
    },
  })
}

// 拒绝
const handleReject = (record: ContestRegistration) => {
  currentRejectId.value = record.id
  rejectReason.value = ""
  rejectModalVisible.value = true
}

// 提交拒绝
const handleRejectSubmit = async () => {
  if (!currentRejectId.value) return
  try {
    rejectLoading.value = true
    await registrationsApi.review(currentRejectId.value, {
      registrationState: "rejected",
      reason: rejectReason.value,
    })
    message.success("已拒绝")
    rejectModalVisible.value = false
    fetchList()
    fetchRecordStats()
  } catch (error: any) {
    message.error(error?.response?.data?.message || "操作失败")
  } finally {
    rejectLoading.value = false
  }
}

// 删除
const handleDelete = async (id: number) => {
  try {
    await registrationsApi.delete(id)
    message.success("删除成功")
    fetchList()
    fetchRecordStats()
  } catch (error: any) {
    message.error(error?.response?.data?.message || "删除失败")
  }
}

// 批量审核
const handleBatchReview = () => {
  batchReviewForm.registrationState = "passed"
  batchReviewForm.reason = ""
  batchReviewModalVisible.value = true
}

// #6 提交批量审核（使用后端批量接口）
const handleBatchReviewSubmit = async () => {
  if (selectedRowKeys.value.length === 0) { message.warning("请先选择要审核的记录"); return }
  try {
    batchReviewLoading.value = true
    const res = await registrationsApi.batchReview({
      ids: selectedRowKeys.value,
      registrationState: batchReviewForm.registrationState,
      reason: batchReviewForm.reason || undefined,
    })
    message.success(`批量审核成功，${res.count} 条记录已更新`)
    batchReviewModalVisible.value = false
    selectedRowKeys.value = []
    fetchList()
    fetchRecordStats()
  } catch (error: any) {
    message.error(error?.response?.data?.message || "批量审核失败")
  } finally {
    batchReviewLoading.value = false
  }
}

// 导出
const handleExport = async () => {
  exportLoading.value = true
  try {
    const response = await registrationsApi.getList({
      contestId,
      page: 1,
      pageSize: 100,
    })

    if (response.list.length === 0) {
      message.warning("暂无数据")
      return
    }

    let headers: string[]
    let rows: any[][]

    if (contestType.value === 'individual') {
      headers = ["序号", "机构", "姓名", "报名账号", "审核状态", "报名时间"]
      rows = response.list.map((item, index) => [
        index + 1,
        item.user?.tenant?.name || "",
        item.user?.nickname || item.accountName || "",
        item.accountNo || item.user?.username || "",
        getStateText(item.registrationState),
        formatDateTime(item.registrationTime),
      ])
    } else {
      headers = ["序号", "机构", "队伍名称", "报名账号", "审核状态", "报名时间"]
      rows = response.list.map((item, index) => [
        index + 1,
        item.user?.tenant?.name || "",
        item.team?.teamName || "",
        item.accountNo || item.user?.username || "",
        getStateText(item.registrationState),
        formatDateTime(item.registrationTime),
      ])
    }

    const csvContent = [
      headers.join(","),
      ...rows.map((row) => row.map((cell) => `"${cell}"`).join(",")),
    ].join("\n")

    const blob = new Blob(["\ufeff" + csvContent], {
      type: "text/csv;charset=utf-8",
    })
    const url = URL.createObjectURL(blob)
    const link = document.createElement("a")
    link.href = url
    link.download = `报名记录_${contestName.value}_${dayjs().format("YYYYMMDD_HHmmss")}.csv`
    link.click()
    URL.revokeObjectURL(url)

    message.success("导出成功")
  } catch (error: any) {
    message.error(error?.response?.data?.message || "导出失败")
  } finally {
    exportLoading.value = false
  }
}

onMounted(async () => {
  await fetchContestInfo()
  fetchRecordStats()
  fetchList()
})
</script>

<style scoped lang="scss">
$primary: #6366f1;

.registration-records-page {
  :deep(.ant-card) {
    border: none; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); margin-bottom: 16px;
    .ant-card-head { border-bottom: none; .ant-card-head-title { font-size: 18px; font-weight: 600; } }
    .ant-card-body { padding: 0; }
  }

  :deep(.ant-table-wrapper) {
    background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06); overflow: hidden;
    .ant-table-thead > tr > th { background: #fafafa; font-weight: 600; }
    .ant-table-tbody > tr:hover > td { background: rgba($primary, 0.03); }
    .ant-table-pagination { padding: 16px; margin: 0; }
  }
}

.stats-row { display: flex; gap: 12px; margin-bottom: 16px; }
.stat-card {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
  background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
  cursor: pointer; border: 2px solid transparent; transition: all 0.2s;
  &:hover { box-shadow: 0 4px 16px rgba($primary, 0.12); }
  &.active { border-color: $primary; background: rgba($primary, 0.02); }
  .stat-icon { width: 36px; height: 36px; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
  .stat-info { display: flex; flex-direction: column;
    .stat-count { font-size: 18px; font-weight: 700; color: #1e1b4b; line-height: 1.2; }
    .stat-label { font-size: 12px; color: #9ca3af; }
  }
}

.search-form {
  margin-bottom: 16px; padding: 20px 24px; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.org-detail { font-size: 12px; color: #666; margin-top: 2px; }
.child-name { font-size: 11px; color: #10b981; margin-top: 2px; }
</style>
