<template>
  <div class="team-status-card">
    <div class="card-header">
      <img src="/icons/Ob7pyorzmHiJcbab2c25af264d0758b527bc1b61cc3b.png" alt="队伍图标" class="team-icon">
      <div class="team-info">
        <h3>队伍阵容</h3>
        <p>当前使用的战斗阵容</p>
      </div>
      <div class="team-selector">
        <button
          v-for="teamId in availableTeams"
          :key="teamId"
          @click="selectTeam(teamId)"
          :class="[
            'team-button',
            { active: currentTeam === teamId }
          ]"
        >
          {{ teamId }}
        </button>
        <button
          @click="refreshTeamData"
          class="team-button refresh-button"
          title="刷新队伍数据"
        >
          🔄
        </button>
      </div>
    </div>

    <div class="card-content">
      <div class="team-display">
        <div class="current-team-info">
          <span class="label">当前阵容</span>
          <span class="team-number">阵容 {{ currentTeam }}</span>
        </div>
        
        <div class="heroes-container">
          <div class="heroes-grid">
            <div 
              v-for="hero in currentTeamHeroes"
              :key="hero.id || hero.name"
              class="hero-card"
            >
              <img 
                v-if="hero.avatar" 
                :src="hero.avatar" 
                :alt="hero.name"
                class="hero-avatar"
              >
              <div 
                v-else
                class="hero-placeholder"
              >
                {{ hero.name?.substring(0, 2) || '?' }}
              </div>
              <span class="hero-name">{{ hero.name || '未知' }}</span>
            </div>
          </div>
          
          <div v-if="!currentTeamHeroes.length" class="empty-team">
            <p>暂无队伍信息</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useTokenStore } from '@/stores/tokenStore'
import { useMessage } from 'naive-ui'

const tokenStore = useTokenStore()
const message = useMessage()

// 响应式数据
const currentTeam = ref(1)
const availableTeams = ref([1, 2, 3, 4])

// 计算属性
const presetTeamInfo = computed(() => {
  return tokenStore.gameData?.presetTeam || null
})

const currentTeamHeroes = computed(() => {
  if (!presetTeamInfo.value) {
    console.log('👥 TeamStatus: presetTeamInfo 为空')
    return []
  }
  
  console.log('👥 TeamStatus: 当前队伍信息结构:', {
    presetTeamInfo: presetTeamInfo.value,
    currentTeam: currentTeam.value,
    hasPresetTeamInfo: !!presetTeamInfo.value.presetTeamInfo,
    presetTeamInfoKeys: presetTeamInfo.value.presetTeamInfo ? Object.keys(presetTeamInfo.value.presetTeamInfo) : []
  })
  
  // 尝试多种可能的数据结构
  let teamData = null
  
  // 方式1: 标准结构 presetTeamInfo[teamId].teamInfo
  if (presetTeamInfo.value.presetTeamInfo?.[currentTeam.value]?.teamInfo) {
    teamData = presetTeamInfo.value.presetTeamInfo[currentTeam.value].teamInfo
    console.log('👥 TeamStatus: 使用标准结构获取队伍数据')
  }
  // 方式2: 直接在presetTeamInfo[teamId]下
  else if (presetTeamInfo.value.presetTeamInfo?.[currentTeam.value]) {
    const teamInfo = presetTeamInfo.value.presetTeamInfo[currentTeam.value]
    if (typeof teamInfo === 'object' && !Array.isArray(teamInfo)) {
      teamData = teamInfo
      console.log('👥 TeamStatus: 使用直接结构获取队伍数据')
    }
  }
  // 方式3: 查找任何包含英雄数据的结构
  else if (presetTeamInfo.value.presetTeamInfo) {
    for (const [key, value] of Object.entries(presetTeamInfo.value.presetTeamInfo)) {
      if (value && typeof value === 'object') {
        // 查找包含heroId或类似字段的数据
        if (value.teamInfo || value.heroes || value.formation || 
            Object.values(value).some(v => v && v.heroId)) {
          teamData = value.teamInfo || value.heroes || value.formation || value
          console.log(`👥 TeamStatus: 在 ${key} 中找到队伍数据`)
          break
        }
      }
    }
  }
  
  if (!teamData) {
    console.log('👥 TeamStatus: 未找到队伍数据')
    return []
  }
  
  console.log('👥 TeamStatus: 解析队伍数据:', teamData)
  
  // 转换队伍信息为英雄数组
  const heroes = []
  
  // 处理不同的数据格式
  if (Array.isArray(teamData)) {
    // 数组格式
    teamData.forEach((hero, index) => {
      if (hero && (hero.heroId || hero.id)) {
        heroes.push({
          id: hero.heroId || hero.id,
          name: getHeroName(hero.heroId || hero.id),
          position: index + 1,
          level: hero.level || 1
        })
      }
    })
  } else if (typeof teamData === 'object') {
    // 对象格式（position => hero）
    for (const [position, hero] of Object.entries(teamData)) {
      if (hero && (hero.heroId || hero.id)) {
        heroes.push({
          id: hero.heroId || hero.id,
          name: getHeroName(hero.heroId || hero.id),
          position: position,
          level: hero.level || 1
        })
      }
    }
  }
  
  console.log('👥 TeamStatus: 解析出的英雄列表:', heroes)
  return heroes
})

// 从presetTeamInfo获取可用队伍数量
const updateAvailableTeams = () => {
  if (!presetTeamInfo.value?.presetTeamInfo) return
  
  const teams = Object.keys(presetTeamInfo.value.presetTeamInfo)
    .map(Number)
    .filter(num => !isNaN(num))
    .sort((a, b) => a - b)
  
  if (teams.length > 0) {
    availableTeams.value = teams
  }
}

// 更新当前队伍
const updateCurrentTeam = () => {
  if (presetTeamInfo.value?.presetTeamInfo?.useTeamId) {
    currentTeam.value = presetTeamInfo.value.presetTeamInfo.useTeamId
  }
}

// 获取英雄名称（这里需要英雄数据字典）
const getHeroName = (heroId) => {
  // 暂时返回英雄ID，后续可以添加英雄名称映射
  const heroNames = {
    1: '剑士',
    2: '法师',
    3: '弓手',
    4: '盗贼',
    5: '牧师'
    // 更多英雄映射...
  }
  
  return heroNames[heroId] || `英雄${heroId}`
}

// 选择队伍
const selectTeam = (teamId) => {
  if (!tokenStore.selectedToken) {
    message.warning('请先选择Token')
    return
  }
  
  currentTeam.value = teamId
  
  // 发送切换队伍的消息
  const tokenId = tokenStore.selectedToken.id
  tokenStore.sendMessage(tokenId, 'presetteam_saveteam', { teamId })
  
  message.info(`切换到阵容 ${teamId}`)
}

// 监听预设队伍信息变化
watch(presetTeamInfo, (newValue) => {
  if (newValue) {
    updateAvailableTeams()
    updateCurrentTeam()
  }
}, { deep: true, immediate: true })

// 刷新队伍数据
const refreshTeamData = () => {
  if (!tokenStore.selectedToken) {
    message.warning('请先选择Token')
    return
  }
  
  const tokenId = tokenStore.selectedToken.id
  console.log('👥 手动刷新队伍数据')
  
  // 发送多个可能的队伍相关命令
  const commands = [
    'presetteam_getteam',
    'role_gettargetteam',
    'role_getroleinfo'  // 角色信息中可能包含队伍数据
  ]
  
  commands.forEach(cmd => {
    tokenStore.sendMessage(tokenId, cmd, {})
    console.log(`👥 发送命令: ${cmd}`)
  })
  
  message.info('正在刷新队伍数据...')
}

// 生命周期
onMounted(() => {
  // 获取队伍信息
  refreshTeamData()
})
</script>

<style scoped lang="scss">
.team-status-card {
  background: white;
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-normal);

  &:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
  }
}

.card-header {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.team-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
}

.team-info {
  flex: 1;

  h3 {
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-semibold);
    color: var(--text-primary);
    margin: 0 0 var(--spacing-xs) 0;
  }

  p {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
  }
}

.team-selector {
  display: flex;
  gap: var(--spacing-xs);
}

.team-button {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 50%;
  background: var(--bg-tertiary);
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all var(--transition-fast);

  &:hover {
    background: var(--bg-secondary);
  }

  &.active {
    background: var(--primary-color);
    color: white;
  }
  
  &.refresh-button {
    background: var(--success-color, #10b981);
    color: white;
    
    &:hover {
      background: var(--success-color-dark, #059669);
    }
  }
}

.card-content {
  .current-team-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-lg);

    .label {
      font-size: var(--font-size-sm);
      color: var(--text-secondary);
    }

    .team-number {
      font-size: var(--font-size-lg);
      font-weight: var(--font-weight-bold);
      color: var(--text-primary);
    }
  }
}

.heroes-container {
  background: var(--bg-tertiary);
  border-radius: var(--border-radius-medium);
  padding: var(--spacing-md);
  min-height: 120px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.heroes-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  justify-content: center;
}

.hero-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-medium);
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all var(--transition-fast);
  min-width: 80px;

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
  }
}

.hero-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.hero-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--primary-color);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.hero-name {
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
  text-align: center;
  font-weight: var(--font-weight-medium);
}

.empty-team {
  text-align: center;
  color: var(--text-secondary);

  p {
    margin: 0;
    font-size: var(--font-size-sm);
  }
}

// 响应式设计
@media (max-width: 768px) {
  .card-header {
    flex-direction: column;
    gap: var(--spacing-sm);
    text-align: center;
  }

  .team-selector {
    justify-content: center;
  }

  .heroes-grid {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
}
</style>