<template>
  <div class="add-contestant">
    <div class="page-header">
      <h1>添加新赛事</h1>
      <div class="header-actions">
        <button class="btn-excel" @click="handleExcelImport">
          <i class="fas fa-file-excel"></i>
          通过表格添加
        </button>
      </div>
    </div>

    <!-- Excel导入弹窗 -->
    <div v-if="showExcelDialog" class="excel-dialog-overlay">
      <div class="excel-dialog">
        <h3>通过Excel导入赛事信息</h3>
        <div class="excel-upload-area" @click="triggerFileInput" @dragover.prevent @drop.prevent="handleFileDrop"
          :class="{ 'is-dragover': isDragover }">
          <input type="file" ref="fileInput" accept=".xlsx" @change="handleFileSelect" style="display: none">
          <div class="upload-content">
            <i class="fas fa-file-excel"></i>
            <p>点击或拖拽Excel文件到此处</p>
          </div>
        </div>
        <div v-if="eventPreviewData.length > 0" class="preview-table">
          <h4>赛事信息表预览</h4>
          <table>
            <thead>
              <tr>
                <th v-for="h in eventPreviewHeaders" :key="h">{{ h }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in eventPreviewData" :key="index">
                <td v-for="h in eventPreviewHeaders" :key="h">{{ item[h] }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div v-if="playerPreviewData.length > 0" class="preview-table">
          <h4>选手报名表预览</h4>
          <table>
            <thead>
              <tr>
                <th v-for="h in playerPreviewHeaders" :key="h">{{ h }}</th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="(item, index) in playerPreviewData" :key="index">
                <td v-for="h in playerPreviewHeaders" :key="h">{{ item[h] }}</td>
              </tr>
            </tbody>
          </table>
        </div>
        <div class="dialog-actions">
          <button class="confirm-btn" @click="confirmImport" :disabled="eventPreviewData.length === 0">确认导入</button>
          <button class="cancel-btn" @click="closeExcelDialog">取消</button>
        </div>
      </div>
    </div>

    <form @submit.prevent="handleSubmit" class="contest-form">
      <div class="form-group">
        <label for="name">赛事名称</label>
        <input type="text" id="name" v-model="formData.name" required placeholder="请输入赛事名称">
      </div>

      <div class="form-group">
        <label for="format">赛制类型</label>
        <select id="format" v-model="formData.format" required>
          <option value="">请选择赛制类型</option>
          <option value="single">单败淘汰</option>
          <option value="double">双败淘汰</option>
          <option value="count">积分赛</option>
        </select>
      </div>

      <div class="form-group">
        <label for="organizer">组织者</label>
        <input type="text" id="organizer" v-model="formData.organizer" required placeholder="请输入组织者姓名">
      </div>

      <div class="form-group">
        <label for="qq_code">QQ号</label>
        <input type="text" id="qq_code" v-model="formData.qq_code" required placeholder="请输入QQ号">
      </div>

      <div class="form-group">
        <label for="start_time">开始时间</label>
        <input type="date" id="start_time" v-model="formData.start_time" required>
      </div>

      <div class="form-group">
        <label for="end_time">结束时间</label>
        <input type="date" id="end_time" v-model="formData.end_time" required>
      </div>

      <div class="form-actions">
        <button type="submit" class="submit-btn">提交</button>
        <button type="button" class="cancel-btn" @click="handleCancel">取消</button>
      </div>
    </form>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { addTournament, addSignUp, getTournamentList } from '@/api/tournament'
import * as XLSX from 'xlsx'

const router = useRouter()
const showExcelDialog = ref(false)
const isDragover = ref(false)
const fileInput = ref(null)
const eventPreviewData = ref([])
const eventPreviewHeaders = ref([])
const playerPreviewData = ref([])
const playerPreviewHeaders = ref([])

const formData = ref({
  name: '',
  format: '',
  organizer: '',
  qq_code: '',
  status: 'prepare',
  start_time: '',
  end_time: '',
  description: ''
})

// Excel赛事信息字段与表单字段的映射
const excelFieldMap = {
  '赛事名称': 'name',
  '开始时间': 'start_time',
  '结束时间': 'end_time',
  '组织者': 'organizer',
  '联系方式': 'qq_code',
  '赛制类型': 'format',
}

// 赛制类型中英文映射
const formatMap = {
  '单败淘汰': 'single',
  '双败淘汰': 'double',
  '积分赛': 'count'
}

// 阵营中英文映射
const factionMap = {
  '盟军': 'allied',
  '苏联': 'soviet',
  '帝国': 'empire',
  'OB': 'ob',
  '解说': 'voice',
  '随机': 'random'
}
const parseDate = (val) => {
  if (!val) return ''
  if (!isNaN(val) && Number(val) > 30000 && Number(val) < 90000) {
    const date = new Date(Math.round((Number(val) - 25569) * 86400 * 1000))
    return `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`
  }
  const match = String(val).match(/(\d{4})[年/-](\d{1,2})[月/-](\d{1,2})日?/)
  if (match) {
    return `${match[1]}/${parseInt(match[2], 10)}/${parseInt(match[3], 10)}`
  }
  return String(val).replace(/-/g, '/').slice(0, 10)
}


const handleSubmit = async () => {
  try {
    const formatDate = (dateStr) => {
      const [year, month, day] = dateStr.split('-')
      return `${year}/${month}/${day}`
    }

    // 构建API请求数据
    const tournamentData = {
      name: formData.value.name,
      format: formData.value.format,
      organizer: formData.value.organizer,
      qq_code: String(formData.value.qq_code),  // 确保 qq_code 是字符串类型
      status: 'prepare',
      start_time: formatDate(formData.value.start_time),
      end_time: formatDate(formData.value.end_time)
    }

    // 调用API添加赛事
    await addTournament(tournamentData)

    alert('添加赛事成功！')
    router.push('/competition')
  } catch (error) {
    console.error('提交失败：', error)
    alert(error.response?.data?.message || '添加赛事失败，请重试')
  }
}

const handleCancel = () => {
  router.back()
}

const handleExcelImport = () => {
  showExcelDialog.value = true
}

const handleFileDrop = (e) => {
  isDragover.value = false
  const file = e.dataTransfer.files[0]
  if (file) {
    processExcelFile(file)
  }
}

const handleFileSelect = (e) => {
  const file = e.target.files[0]
  if (file) {
    processExcelFile(file)
  }
}

const processExcelFile = (file) => {
  eventPreviewData.value = []
  eventPreviewHeaders.value = []
  playerPreviewData.value = []
  playerPreviewHeaders.value = []
  const reader = new FileReader()
  reader.onload = (e) => {
    try {
      const data = new Uint8Array(e.target.result)
      const workbook = XLSX.read(data, { type: 'array' })
      const playerSheetName = workbook.SheetNames.find(name => name === '选手报名表')
      if (playerSheetName) {
        const sheet = workbook.Sheets[playerSheetName]
        const jsonData = XLSX.utils.sheet_to_json(sheet, { header: 1 })
        if (jsonData.length >= 2) {
          let headerRowIdx = -1
          for (let i = 0; i < jsonData.length; i++) {
            if (!jsonData[i]) continue
            const normRow = jsonData[i].map(cell => String(cell || '').replace(/\s+/g, '').replace(/　/g, '').trim())
            if (normRow.includes('序号')) {
              headerRowIdx = i
              break
            }
          }
          if (headerRowIdx !== -1) {
            const headers = jsonData[headerRowIdx].map(cell => String(cell || '').replace(/\s+/g, '').replace(/　/g, '').trim())
            const players = []
            for (let i = headerRowIdx + 1; i < jsonData.length; i++) {
              const row = jsonData[i]
              if (!row || row.length === 0 || row.every(cell => cell === undefined || cell === '')) continue
              const player = {}
              headers.forEach((h, idx) => {
                player[h] = row[idx]
              })
              players.push(player)
            }
            playerPreviewData.value = players
            playerPreviewHeaders.value = headers
          }
        }
      }
      const eventSheetName = workbook.SheetNames.find(name => name === '赛事表')
      if (eventSheetName) {
        const firstSheet = workbook.Sheets[eventSheetName]
        const jsonData = XLSX.utils.sheet_to_json(firstSheet, { header: 1 })
        if (jsonData.length >= 2) {
          let headerRowIdx = -1
          let headerColIdx = -1
          for (let i = 0; i < jsonData.length; i++) {
            if (!jsonData[i]) continue
            for (let j = 0; j < jsonData[i].length; j++) {
              const cell = typeof jsonData[i][j] === 'string' ? jsonData[i][j].trim() : jsonData[i][j]
              if (Object.keys(excelFieldMap).includes(cell)) {
                headerRowIdx = i
                headerColIdx = j
                break
              }
            }
            if (headerRowIdx !== -1) break
          }
          if (headerRowIdx !== -1 && headerColIdx !== -1) {
            let dataRow = null
            for (let i = headerRowIdx + 1; i < jsonData.length; i++) {
              if (jsonData[i] && jsonData[i].slice(headerColIdx).some(cell => cell !== undefined && cell !== '')) {
                dataRow = jsonData[i]
                break
              }
            }
            if (dataRow) {
              const headers = jsonData[headerRowIdx].slice(headerColIdx).map(h => typeof h === 'string' ? h.trim() : h)
              const dataCells = dataRow.slice(headerColIdx)
              const previewObj = {}
              Object.keys(excelFieldMap).forEach((h) => {
                const idx = headers.indexOf(h)
                let val = idx !== -1 ? dataCells[idx] : ''
                if (["开始时间", "结束时间"].includes(h)) {
                  val = parseDate(val)
                } else if (h === "联系方式") {  // 处理 qq_code
                  val = String(val || '')  // 确保 qq_code 是字符串类型
                }
                previewObj[h] = val
              })
              eventPreviewData.value = [previewObj]
              eventPreviewHeaders.value = Object.keys(excelFieldMap)
            }
          }
        }
      }
    } catch (error) {
      alert('Excel文件格式错误，请检查文件内容')
    }
  }
  reader.readAsArrayBuffer(file)
}

const confirmImport = async () => {
  if (eventPreviewData.value.length > 0) {
    const excelRow = eventPreviewData.value[0]
    const tournamentData = {}
    Object.keys(excelFieldMap).forEach((excelKey) => {
      const apiKey = excelFieldMap[excelKey]
      if (apiKey === 'qq_code') {
        tournamentData[apiKey] = String(excelRow[excelKey])
      } else if (apiKey === 'format') {
        const formatValue = formatMap[excelRow[excelKey]]
        if (formatValue) {
          tournamentData[apiKey] = formatValue
        } else {
          throw new Error('赛制类型必须是：单败淘汰、双败淘汰或积分赛')
        }
      } else {
        tournamentData[apiKey] = excelRow[excelKey]
      }
    })
    tournamentData.status = 'prepare'
    let tournamentName = tournamentData.name

    try {
      await addTournament(tournamentData)
      alert('赛事导入成功！')

      const tournamentList = await getTournamentList()
      console.log('获取到的赛事列表:', tournamentList)
      console.log('要匹配的赛事名称:', tournamentName)
      
      const matchedTournament = tournamentList.find(t => t.name === tournamentName)
      console.log('匹配到的赛事:', matchedTournament)
      
      if (!matchedTournament || !matchedTournament.id) {
        throw new Error(`未找到对应的赛事信息: ${tournamentName}`)
      }

      if (playerPreviewData.value.length > 0) {
        for (const row of playerPreviewData.value) {
          console.log('处理选手数据:', row)
          const isTeam = !!row['团队参赛选手ID']
          const signUpData = {
            id: matchedTournament.id,
            tournament_name: tournamentName,
            type: isTeam ? 'teamname' : 'individual',
            team_name: row['队伍名称或者个人参赛名称'] || '',
            sign_name: row['队伍名称或者个人参赛名称'],
            faction: factionMap[row['阵营']] || 'random',  // 使用阵营映射
            qq_code: String(row['QQ'] || '')
          }
          console.log('提交的报名数据:', signUpData)
          
          if (!signUpData.id || !signUpData.sign_name) {
            console.error('报名数据缺少必需字段:', signUpData)
            throw new Error(`报名数据不完整，请检查数据: ${JSON.stringify(row)}`)
          }

          try {
            await addSignUp(signUpData)
          } catch (error) {
            console.error('报名失败:', error)
            alert(`报名失败: ${row['队伍名称或者个人参赛名称']}，${error.message}`)
          }
        }
        alert('选手报名表导入完成！')
      }
      
      router.push('/competition')
    } catch (error) {
      console.error('导入失败：', error)
      alert(error.response?.data?.message || '赛事导入失败，请重试')
    }
    closeExcelDialog()
  }
}

const closeExcelDialog = () => {
  showExcelDialog.value = false
  eventPreviewData.value = []
  eventPreviewHeaders.value = []
  playerPreviewData.value = []
  playerPreviewHeaders.value = []
  if (fileInput.value) {
    fileInput.value.value = ''
  }
}

const triggerFileInput = () => {
  if (fileInput.value) {
    fileInput.value.click()
  }
}
</script>
<style scoped>
.add-contestant {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.page-header {
  margin-bottom: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.page-header h1 {
  font-size: 24px;
  color: #1a237e;
  margin: 0;
}

.header-actions {
  display: flex;
  gap: 12px;
}

.btn-back,
.btn-excel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-back {
  background: white;
  color: #666;
  border: 1px solid #ddd;
}

.btn-back:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

.btn-excel {
  background: linear-gradient(135deg, #71eaeb 0%, #416bdf 100%);
  color: white;
  border: none;
}

.btn-excel:hover {
  background: linear-gradient(135deg, #416bdf 0%, #71eaeb 100%);
  transform: translateY(-1px);
}

.contest-form {
  background: white;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: #333;
  font-weight: 500;
}

.form-group input,
.form-group select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  transition: all 0.3s ease;
}

.form-group input:focus,
.form-group select:focus {
  border-color: #1a237e;
  outline: none;
  box-shadow: 0 0 0 2px rgba(26, 35, 126, 0.1);
}

.form-group input::placeholder {
  color: #999;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 30px;
}

.submit-btn,
.cancel-btn {
  padding: 12px 24px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.submit-btn {
  background: linear-gradient(135deg, #71eaeb 0%, #416bdf 100%);
  color: white;
  border: none;
}

.submit-btn:hover {
  background: linear-gradient(135deg, #416bdf 0%, #71eaeb 100%);
  transform: translateY(-1px);
}

.cancel-btn {
  background: white;
  color: #666;
  border: 1px solid #ddd;
}

.cancel-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

.excel-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.excel-dialog {
  background: white;
  border-radius: 12px;
  padding: 24px;
  width: 600px;
  max-width: 90%;
  max-height: 90vh;
  overflow-y: auto;
}

.excel-upload-area {
  border: 2px dashed #ddd;
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 20px;
}

.excel-upload-area.is-dragover {
  border-color: #416bdf;
  background: rgba(65, 107, 223, 0.1);
}

.upload-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.upload-content i {
  font-size: 48px;
  color: #416bdf;
}

.upload-tip {
  color: #666;
  font-size: 12px;
}

.preview-table {
  margin: 20px 0;
  max-height: 300px;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.preview-table table {
  width: 100%;
  border-collapse: collapse;
  min-width: 600px;
}

.preview-table th,
.preview-table td {
  padding: 8px 12px;
  border: 1px solid #ddd;
  text-align: left;
  max-width: 200px;
  word-break: break-all;
}

.preview-table th {
  background: #f5f5f5;
  font-weight: 500;
}

.dialog-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 20px;
}

.confirm-btn {
  background: linear-gradient(135deg, #71eaeb 0%, #416bdf 100%);
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 20px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 8px rgba(65, 107, 223, 0.08);
}

.confirm-btn:hover {
  background: linear-gradient(135deg, #416bdf 0%, #71eaeb 100%);
  box-shadow: 0 4px 16px rgba(65, 107, 223, 0.15);
}

.confirm-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 移动端适配 */
@media (max-width: 768px) {
  .add-contestant {
    padding: 10px;
  }
  
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 20px;
  }
  
  .header-actions {
    width: 100%;
    justify-content: space-between;
  }
  
  .btn-excel {
    width: 100%;
    justify-content: center;
  }
  
  .contest-form {
    padding: 15px;
  }
  
  .form-group {
    margin-bottom: 15px;
  }
  
  .form-group input,
  .form-group select {
    padding: 12px 10px;
    font-size: 16px;
  }
  
  input[type="date"],
  select {
    min-height: 44px;
  }
  
  .form-actions {
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
  }
  
  .submit-btn,
  .cancel-btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }
  
  .excel-dialog {
    width: 95%;
    padding: 15px;
    max-height: 85vh;
  }
  
  .excel-upload-area {
    padding: 30px 15px;
  }
  
  .upload-content i {
    font-size: 36px;
  }
  
  .preview-table {
    max-height: 200px;
  }
  
  .preview-table table {
    font-size: 12px;
  }
  
  .preview-table th,
  .preview-table td {
    padding: 6px 8px;
    max-width: 120px;
  }
  
  .dialog-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  
  .confirm-btn,
  .cancel-btn {
    width: 100%;
  }
}
</style>