<template>
  <div class="game-status-container">
    <!-- 队伍状态 -->
    <TeamStatus />
    
    <!-- 每日任务状态 -->
    <DailyTaskStatus />
    
    <!-- 咸将塔状态 -->
    <TowerStatus />
    
    <!-- 俱乐部赛车 -->
    <CarManagement />
    
    <!-- 其他游戏状态卡片 -->
    <!-- 盐罐机器人状态 -->
    <div class="status-card bottle-helper">
      <div class="card-header">
        <img
          src="/icons/173746572831736.png"
          alt="盐罐图标"
          class="status-icon"
        >
        <div class="status-info">
          <h3>盐罐机器人</h3>
          <p>剩余时间</p>
        </div>
        <div
          class="status-badge"
          :class="{ active: bottleHelper.isRunning }"
        >
          <div class="status-dot" />
          <span>{{ bottleHelper.isRunning ? '运行中' : '已停止' }}</span>
        </div>
      </div>
      <div class="card-content">
        <div class="time-display">
          {{ formatTime(bottleHelper.remainingTime) }}
        </div>
        <button 
          class="action-button"
          :class="{ active: bottleHelper.isRunning }"
          @click="handleBottleHelper"
        >
          {{ bottleHelper.isRunning ? '重启服务' : '启动服务' }}
        </button>
      </div>
    </div>

    <!-- 挂机状态 -->
    <div class="status-card hang-up">
      <div class="card-header">
        <img
          src="/icons/174061875626614.png"
          alt="挂机图标"
          class="status-icon"
        >
        <div class="status-info">
          <h3>挂机时间</h3>
          <p>已挂机：{{ formatTime(hangUp.elapsedTime) }}</p>
        </div>
        <div
          class="status-badge"
          :class="{ active: hangUp.isActive }"
        >
          <div class="status-dot" />
          <span>{{ hangUp.isActive ? '挂机中' : '已完成' }}</span>
        </div>
      </div>
      <div class="card-content">
        <div class="time-display">
          {{ formatTime(hangUp.remainingTime) }}
        </div>
        <div class="action-row">
          <button 
            class="action-button secondary" 
            :disabled="hangUp.isExtending"
            @click="extendHangUp"
          >
            <span
              v-if="hangUp.isExtending"
              class="loading-text"
            >
              <svg
                class="loading-icon"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M12 22c5.421 0 10-4.579 10-10h-2c0 4.337-3.663 8-8 8s-8-3.663-8-8c0-4.336 3.663-8 8-8V2C6.579 2 2 6.58 2 12c0 5.421 4.579 10 10 10z"
                />
              </svg>
              加钟中...
            </span>
            <span v-else>加钟</span>
          </button>
          <button 
            class="action-button primary" 
            :disabled="hangUp.isClaiming"
            @click="claimHangUpReward"
          >
            <span
              v-if="hangUp.isClaiming"
              class="loading-text"
            >
              <svg
                class="loading-icon"
                viewBox="0 0 24 24"
              >
                <path
                  fill="currentColor"
                  d="M12 22c5.421 0 10-4.579 10-10h-2c0 4.337-3.663 8-8 8s-8-3.663-8-8c0-4.336 3.663-8 8-8V2C6.579 2 2 6.58 2 12c0 5.421 4.579 10 10 10z"
                />
              </svg>
              领取中...
            </span>
            <span v-else>领取奖励</span>
          </button>
        </div>
      </div>
    </div>

    <!-- 俱乐部排位 -->
    <div class="status-card legion-match">
      <div class="card-header">
        <img
          src="/icons/1733492491706152.png"
          alt="俱乐部图标"
          class="status-icon"
        >
        <div class="status-info">
          <h3>俱乐部排位</h3>
          <p>赛事状态</p>
        </div>
        <div
          class="status-badge"
          :class="{ active: legionMatch.isRegistered }"
        >
          <div class="status-dot" />
          <span>{{ legionMatch.isRegistered ? '已报名' : '未报名' }}</span>
        </div>
      </div>
      <div class="card-content">
        <p class="description">
          每逢周三周四周五有比赛<br>
          立即报名参与精彩对决！
        </p>
        <button 
          class="action-button"
          :disabled="legionMatch.isRegistered"
          @click="registerLegionMatch"
        >
          {{ legionMatch.isRegistered ? '已报名' : '立即报名' }}
        </button>
      </div>
    </div>

    <!-- 俱乐部签到 -->
    <div class="status-card legion-signin">
      <div class="card-header">
        <img
          src="/icons/1733492491706148.png"
          alt="签到图标"
          class="status-icon"
        >
        <div class="status-info">
          <h3>俱乐部签到</h3>
          <p>每日签到状态</p>
        </div>
        <div
          class="status-badge"
          :class="{ active: legionSignin.isSignedIn }"
        >
          <div class="status-dot" />
          <span>{{ legionSignin.isSignedIn ? '已签到' : '待签到' }}</span>
        </div>
      </div>
      <div class="card-content">
        <p
          v-if="legionSignin.clubName"
          class="club-name"
        >
          当前俱乐部<br>
          <strong>{{ legionSignin.clubName }}</strong>
        </p>
        <p
          v-else
          class="description"
        >
          尚未加入任何俱乐部
        </p>
        <button 
          class="action-button"
          :disabled="legionSignin.isSignedIn"
          @click="signInLegion"
        >
          {{ legionSignin.isSignedIn ? '已签到' : '立即签到' }}
        </button>
      </div>
    </div>

    <!-- 咸鱼大冲关 -->
    <div class="status-card study">
      <div class="card-header">
        <img
          src="/icons/1736425783912140.png"
          alt="学习图标"
          class="status-icon"
        >
        <div class="status-info">
          <h3>咸鱼大冲关</h3>
          <p>每日知识挑战</p>
        </div>
        <div class="status-badge weekly" :class="{ 'completed': study.isCompleted }">
          <div class="status-dot" :class="{ 'completed': study.isCompleted }" />
          <span>每周任务</span>
        </div>
      </div>
      <div class="card-content">
        <p class="description">
          没有什么可以阻挡我求知的欲望！
        </p>
        <button 
          class="action-button"
          :class="{ 'completed': study.isCompleted }"
          :disabled="study.isAnswering || study.isCompleted"
          @click="startStudy"
        >
          <span v-if="study.isCompleted">
            ✅ 已完成无需作答
          </span>
          <span
            v-else-if="study.isAnswering"
            class="loading-text"
          >
            <svg
              class="loading-icon"
              viewBox="0 0 24 24"
            >
              <path
                fill="currentColor"
                d="M12 22c5.421 0 10-4.579 10-10h-2c0 4.337-3.663 8-8 8s-8-3.663-8-8c0-4.336 3.663-8 8-8V2C6.579 2 2 6.58 2 12c0 5.421 4.579 10 10 10z"
              />
            </svg>
            <span v-if="study.status === 'starting'">正在获取题目...</span>
            <span v-else-if="study.status === 'answering'">答题中 {{ study.answeredCount }}/{{ study.questionCount }}</span>
            <span v-else-if="study.status === 'claiming_rewards'">正在领取奖励...</span>
            <span v-else-if="study.status === 'completed'">答题完成</span>
            <span v-else>答题中...</span>
          </span>
          <span v-else>🎯 一键答题</span>
        </button>
      </div>
    </div>

    <!-- 咸将升级模块 -->
    <UpgradeModule />
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useTokenStore } from '@/stores/tokenStore'
import { useMessage } from 'naive-ui'
import { preloadQuestions, getQuestionCount } from '@/utils/studyQuestionsFromJSON.js'
import TeamStatus from './TeamStatus.vue'
import DailyTaskStatus from './DailyTaskStatus.vue'
import TowerStatus from './TowerStatus.vue'
import CarManagement from './CarManagement.vue'
import UpgradeModule from './UpgradeModule.vue'

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

// 响应式数据
const bottleHelper = ref({
  isRunning: false,
  remainingTime: 0,
  stopTime: 0
})

const hangUp = ref({
  isActive: false,
  remainingTime: 0,
  elapsedTime: 0,
  lastTime: 0,
  hangUpTime: 0,
  isExtending: false, // 加钟状态
  isClaiming: false   // 领取奖励状态
})

const legionMatch = ref({
  isRegistered: false
})

const legionSignin = ref({
  isSignedIn: false,
  clubName: ''
})

// 使用 tokenStore 中的答题状态
const study = computed(() => tokenStore.gameData.studyStatus)


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

// 格式化时间 - 确保显示到秒
const formatTime = (seconds) => {
  // 确保传入值为数字，并向下取整到秒
  const totalSeconds = Math.floor(Number(seconds) || 0)
  
  if (totalSeconds <= 0) return '00:00:00'
  
  const hours = Math.floor(totalSeconds / 3600)
  const minutes = Math.floor((totalSeconds % 3600) / 60)
  const secs = totalSeconds % 60
  
  return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`
}

// 更新数据
const updateGameStatus = () => {
  if (!roleInfo.value) return

  const role = roleInfo.value.role

  // 更新盐罐机器人状态
  if (role.bottleHelpers) {
    const now = Date.now() / 1000
    bottleHelper.value.stopTime = role.bottleHelpers.helperStopTime
    bottleHelper.value.isRunning = role.bottleHelpers.helperStopTime > now
    // 确保剩余时间为整数秒
    bottleHelper.value.remainingTime = Math.max(0, Math.floor(role.bottleHelpers.helperStopTime - now))
    console.log('🤖 盐罐机器人状态更新:', {
      stopTime: role.bottleHelpers.helperStopTime,
      now: now,
      remainingTime: bottleHelper.value.remainingTime,
      isRunning: bottleHelper.value.isRunning
    })
  }

  // 更新挂机状态
  if (role.hangUp) {
    const now = Date.now() / 1000
    hangUp.value.lastTime = role.hangUp.lastTime
    hangUp.value.hangUpTime = role.hangUp.hangUpTime
    
    const elapsed = now - hangUp.value.lastTime
    if (elapsed <= hangUp.value.hangUpTime) {
      // 确保剩余时间为整数秒
      hangUp.value.remainingTime = Math.floor(hangUp.value.hangUpTime - elapsed)
      hangUp.value.isActive = true
    } else {
      hangUp.value.remainingTime = 0
      hangUp.value.isActive = false
    }
    // 确保已挂机时间为整数秒
    hangUp.value.elapsedTime = Math.floor(hangUp.value.hangUpTime - hangUp.value.remainingTime)
    
    console.log('⏰ 挂机状态更新:', {
      lastTime: hangUp.value.lastTime,
      hangUpTime: hangUp.value.hangUpTime,
      elapsed: elapsed,
      remainingTime: hangUp.value.remainingTime,
      elapsedTime: hangUp.value.elapsedTime,
      isActive: hangUp.value.isActive
    })
  }

  // 更新俱乐部排位状态
  if (role.statistics) {
    const today = new Date()
    today.setHours(0, 0, 0, 0)
    const todayTimestamp = today.getTime() / 1000
    
    legionMatch.value.isRegistered = 
      Number(role.statistics['last:legion:match:sign:up:time']) > todayTimestamp
  }

  // 更新俱乐部签到状态
  if (role.statisticsTime) {
    const today = new Date()
    today.setHours(0, 0, 0, 0)
    const todayTimestamp = today.getTime() / 1000
    
    legionSignin.value.isSignedIn = 
      role.statisticsTime['legion:sign:in'] > todayTimestamp
  }

}

// 定时器更新
let timer = null
const startTimer = () => {
  if (timer) clearInterval(timer)
  timer = setInterval(() => {
    // 更新盐罐机器人剩余时间
    if (bottleHelper.value.isRunning && bottleHelper.value.remainingTime > 0) {
      bottleHelper.value.remainingTime = Math.max(0, bottleHelper.value.remainingTime - 1)
      if (bottleHelper.value.remainingTime <= 0) {
        bottleHelper.value.isRunning = false
      }
    }
    
    // 更新挂机剩余时间
    if (hangUp.value.isActive && hangUp.value.remainingTime > 0) {
      hangUp.value.remainingTime = Math.max(0, hangUp.value.remainingTime - 1)
      hangUp.value.elapsedTime = hangUp.value.elapsedTime + 1
      if (hangUp.value.remainingTime <= 0) {
        hangUp.value.isActive = false
      }
    }
  }, 1000)
}

// 盐罐机器人操作
const handleBottleHelper = () => {
  if (!tokenStore.selectedToken) {
    message.warning('请先选择Token')
    return
  }

  const tokenId = tokenStore.selectedToken.id
  
  // 停止后重启
  tokenStore.sendMessage(tokenId, 'bottlehelper_stop')
  setTimeout(() => {
    tokenStore.sendMessage(tokenId, 'bottlehelper_start')
    tokenStore.sendMessage(tokenId, 'role_getroleinfo')
  }, 500)
  
  message.info(bottleHelper.value.isRunning ? '重启盐罐机器人' : '启动盐罐机器人')
}

// 挂机操作 - 参考HangUpStatus逻辑优化
const extendHangUp = async () => {
  if (!tokenStore.selectedToken) {
    message.warning('请先选择Token')
    return
  }
  
  const tokenId = tokenStore.selectedToken.id
  
  try {
    console.log('🕐 开始加钟操作...')
    hangUp.value.isExtending = true
    message.info('正在加钟...')
    
    // 按照参考代码的逻辑，发送4次分享回调请求
    const promises = []
    for (let i = 0; i < 4; i++) {
      const promise = new Promise((resolve) => {
        setTimeout(() => {
          console.log(`🕐 发送第${i+1}次加钟请求`)
          const result = tokenStore.sendMessage(tokenId, 'system_mysharecallback', {
            isSkipShareCard: true,
            type: 2
          })
          resolve(result)
        }, i * 300) // 增加间隔时间确保稳定性
      })
      promises.push(promise)
    }
    
    // 等待所有请求完成
    await Promise.all(promises)
    
    console.log('🕐 所有加钟请求已发送')
    
    // 延迟获取最新角色信息
    setTimeout(() => {
      console.log('🕐 加钟后获取最新角色信息')
      tokenStore.sendMessage(tokenId, 'role_getroleinfo')
    }, 1500)
    
    // 延迟显示完成消息和重置状态
    setTimeout(() => {
      message.success('加钟操作已完成，请查看挂机剩余时间')
      hangUp.value.isExtending = false
    }, 2500)
    
  } catch (error) {
    console.error('🕐 加钟操作失败:', error)
    message.error('加钟操作失败: ' + (error.message || '未知错误'))
    hangUp.value.isExtending = false
  }
}

const claimHangUpReward = async () => {
  if (!tokenStore.selectedToken) {
    message.warning('请先选择Token')
    return
  }
  
  const tokenId = tokenStore.selectedToken.id
  
  try {
    console.log('🎁 开始领取挂机奖励...')
    hangUp.value.isClaiming = true
    message.info('正在领取挂机奖励...')
    
    // 参考HangUpStatus的S函数逻辑
    // 1. 发送初始分享回调
    tokenStore.sendMessage(tokenId, 'system_mysharecallback')
    
    // 2. 领取挂机奖励
    setTimeout(() => {
      tokenStore.sendMessage(tokenId, 'system_claimhangupreward')
    }, 200)
    
    // 3. 发送跳过分享卡片的回调
    setTimeout(() => {
      tokenStore.sendMessage(tokenId, 'system_mysharecallback', {
        isSkipShareCard: true,
        type: 2
      })
    }, 400)
    
    // 4. 获取最新角色信息
    setTimeout(() => {
      tokenStore.sendMessage(tokenId, 'role_getroleinfo')
    }, 600)
    
    // 5. 显示完成消息并重置状态
    setTimeout(() => {
      message.success('挂机奖励领取完成')
      hangUp.value.isClaiming = false
    }, 1200)
    
    console.log('🎁 挂机奖励领取操作序列已启动')
    
  } catch (error) {
    console.error('🎁 领取挂机奖励失败:', error)
    message.error('领取挂机奖励失败: ' + (error.message || '未知错误'))
    hangUp.value.isClaiming = false
  }
}

// 俱乐部排位报名
const registerLegionMatch = () => {
  if (!tokenStore.selectedToken || legionMatch.value.isRegistered) return
  
  const tokenId = tokenStore.selectedToken.id
  tokenStore.sendMessage(tokenId, 'legionmatch_rolesignup')
  
  message.info('报名俱乐部排位')
}

// 俱乐部签到
const signInLegion = () => {
  if (!tokenStore.selectedToken || legionSignin.value.isSignedIn) return
  
  const tokenId = tokenStore.selectedToken.id
  tokenStore.sendMessage(tokenId, 'legion_signin')
  tokenStore.sendMessage(tokenId, 'role_getroleinfo')
  
  message.info('俱乐部签到')
}

// 学习答题
const startStudy = async () => {
  if (!tokenStore.selectedToken || study.value.isAnswering) return
  
  // 检查是否已完成
  if (study.value.isCompleted) {
    message.success('✅ 咸鱼大冲关任务已完成，无需重复作答！')
    return
  }
  
  try {
    // 确保答题数据已加载
    await preloadQuestions()
    const questionCount = await getQuestionCount()
    
    // 通过 tokenStore 重置状态
    tokenStore.gameData.studyStatus = {
      ...tokenStore.gameData.studyStatus, // 保留isCompleted等状态
      isAnswering: true,
      questionCount: 0,
      answeredCount: 0,
      status: 'starting',
      timestamp: Date.now()
    }
    
    const tokenId = tokenStore.selectedToken.id
    tokenStore.sendMessage(tokenId, 'study_startgame')
    
    // 设置超时保护，最多30秒后自动重置
    setTimeout(() => {
      if (tokenStore.gameData.studyStatus.isAnswering) {
        tokenStore.gameData.studyStatus = {
          ...tokenStore.gameData.studyStatus, // 保留isCompleted等状态
          isAnswering: false,
          questionCount: 0,
          answeredCount: 0,
          status: '',
          timestamp: null
        }
        message.warning('答题超时，已自动重置状态')
      }
    }, 30000)
    
    message.info(`🚀 开始一键答题... (题库包含 ${questionCount} 道题目)`)
  } catch (error) {
    console.error('启动答题失败:', error)
    message.error('启动答题失败: ' + error.message)
  }
}



// 监听角色信息变化
watch(roleInfo, (newValue) => {
  if (newValue) {
    updateGameStatus()
  }
}, { deep: true, immediate: true })

// 生命周期
onMounted(() => {
  updateGameStatus()
  startTimer()
  
  // 预加载答题数据
  preloadQuestions().then(() => {
    console.log('📚 答题数据预加载完成')
  }).catch(error => {
    console.error('❌ 答题数据预加载失败:', error)
  })
  
  // 获取俱乐部信息
  if (tokenStore.selectedToken) {
    const tokenId = tokenStore.selectedToken.id
    tokenStore.sendMessage(tokenId, 'legion_getinfo')
  }
})

// 组件卸载时清理定时器
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<style scoped lang="scss">
.game-status-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  
  // 确保DailyTaskStatus组件正确显示
  .daily-task-container {
    margin-bottom: 0;
  }
}

.status-card {
  background: var(--bg-primary);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.02);
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-color-light));
    opacity: 0.8;
    transition: opacity 0.3s ease;
  }
  
  &:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04);
    transform: translateY(-4px);
    
    &::before {
      opacity: 1;
    }
  }
  
  // 不同功能的主题色
  &.bottle-helper {
    &::before { background: linear-gradient(90deg, #18a058, #36ad6a); }
    
    &:hover {
      box-shadow: 0 12px 40px rgba(24, 160, 88, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08);
      transform: translateY(-6px);
      
      &::before {
        opacity: 1;
        box-shadow: 0 0 20px rgba(24, 160, 88, 0.4);
      }
    }
    
    .status-icon {
      background: linear-gradient(135deg, rgba(24, 160, 88, 0.15), rgba(54, 173, 106, 0.1));
      box-shadow: 0 4px 12px rgba(24, 160, 88, 0.2);
      
      &:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 24px rgba(24, 160, 88, 0.3);
      }
    }
    
    .status-badge.active {
      background: rgba(24, 160, 88, 0.15);
      color: #18a058;
      box-shadow: 0 0 12px rgba(24, 160, 88, 0.2);
    }
    
    .action-button {
      background: linear-gradient(135deg, #18a058, #36ad6a);
      box-shadow: 0 4px 12px rgba(24, 160, 88, 0.3);
      
      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #16a058, #34bd6a);
        box-shadow: 0 6px 16px rgba(24, 160, 88, 0.4);
      }
      
      &.active {
        background: linear-gradient(135deg, #16a058, #34bd6a);
        
        &:hover {
          background: linear-gradient(135deg, #14a058, #32cd6a);
        }
      }
    }
  }
  
  &.hang-up {
    &::before { background: linear-gradient(90deg, #d03050, #de576d); }
    
    &:hover {
      box-shadow: 0 12px 40px rgba(208, 48, 80, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08);
      transform: translateY(-6px);
      
      &::before {
        opacity: 1;
        box-shadow: 0 0 20px rgba(208, 48, 80, 0.4);
      }
    }
    
    .status-icon {
      background: linear-gradient(135deg, rgba(208, 48, 80, 0.15), rgba(222, 87, 109, 0.1));
      box-shadow: 0 4px 12px rgba(208, 48, 80, 0.2);
      
      &:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 24px rgba(208, 48, 80, 0.3);
      }
    }
    
    .status-badge.active {
      background: rgba(208, 48, 80, 0.15);
      color: #d03050;
      box-shadow: 0 0 12px rgba(208, 48, 80, 0.2);
    }
    
    .action-button {
      background: linear-gradient(135deg, #d03050, #de576d);
      box-shadow: 0 4px 12px rgba(208, 48, 80, 0.3);
      
      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #d83050, #e6577d);
        box-shadow: 0 6px 16px rgba(208, 48, 80, 0.4);
      }
      
      &.secondary {
        background: linear-gradient(135deg, #8b5cf6, #a78bfa);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
        
        &:hover:not(:disabled) {
          background: linear-gradient(135deg, #936cf6, #b19bfa);
          box-shadow: 0 6px 16px rgba(139, 92, 246, 0.4);
        }
      }
    }
  }
  &.legion-match {
    &::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
    
    &:hover {
      box-shadow: 0 12px 40px rgba(245, 158, 11, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08);
      transform: translateY(-6px);
      
      &::before {
        opacity: 1;
        box-shadow: 0 0 20px rgba(245, 158, 11, 0.4);
      }
    }
    
    .status-icon {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.15), rgba(251, 191, 36, 0.1));
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
      
      &:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 24px rgba(245, 158, 11, 0.3);
      }
    }
    
    .status-badge.active {
      background: rgba(245, 158, 11, 0.15);
      color: #f59e0b;
      box-shadow: 0 0 12px rgba(245, 158, 11, 0.2);
    }
    
    .action-button {
      background: linear-gradient(135deg, #f59e0b, #fbbf24);
      box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
      
      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #f7a013, #fdc124);
        box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
      }
    }
  }
  &.legion-signin {
    &::before { background: linear-gradient(90deg, #10b981, #34d399); }
    
    &:hover {
      box-shadow: 0 12px 40px rgba(16, 185, 129, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08);
      transform: translateY(-6px);
      
      &::before {
        opacity: 1;
        box-shadow: 0 0 20px rgba(16, 185, 129, 0.4);
      }
    }
    
    .status-icon {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(52, 211, 153, 0.1));
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
      
      &:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 24px rgba(16, 185, 129, 0.3);
      }
    }
    
    .status-badge.active {
      background: rgba(16, 185, 129, 0.25);
      color: #10b981;
      box-shadow: 0 0 16px rgba(16, 185, 129, 0.4);
      border: 1px solid rgba(16, 185, 129, 0.3);
      font-weight: 600;
    }
    
    .action-button {
      background: linear-gradient(135deg, #10b981, #34d399);
      box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
      
      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #12b981, #36d399);
        box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
      }
      
      &:disabled {
        background: linear-gradient(135deg, #059669, #10b981);
        box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
        border: 1px solid rgba(16, 185, 129, 0.3);
        font-weight: 700;
        color: #ffffff;
        cursor: not-allowed;
        opacity: 1;
      }
    }
  }

  &.study {
    &::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
    
    &:hover {
      box-shadow: 0 12px 40px rgba(59, 130, 246, 0.2), 0 4px 12px rgba(0, 0, 0, 0.08);
      transform: translateY(-6px);
      
      &::before {
        opacity: 1;
        box-shadow: 0 0 20px rgba(59, 130, 246, 0.4);
      }
    }
    
    .status-icon {
      background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(96, 165, 250, 0.1));
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
      
      &:hover {
        transform: scale(1.1);
        box-shadow: 0 8px 24px rgba(59, 130, 246, 0.3);
      }
    }
    
    .status-badge.weekly {
      background: rgba(59, 130, 246, 0.15);
      color: #3b82f6;
      box-shadow: 0 0 12px rgba(59, 130, 246, 0.2);
      
      &.completed {
        background: rgba(34, 197, 94, 0.25);
        color: #16a34a;
        box-shadow: 0 0 16px rgba(34, 197, 94, 0.4);
        border: 1px solid rgba(34, 197, 94, 0.4);
        font-weight: 600;
      }
    }
    
    .action-button {
      background: linear-gradient(135deg, #3b82f6, #60a5fa);
      box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
      
      &:hover:not(:disabled) {
        background: linear-gradient(135deg, #4b82f6, #70a5fa);
        box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
      }
      
      &.completed {
        background: linear-gradient(135deg, #16a34a, #22c55e);
        box-shadow: 0 6px 16px rgba(34, 197, 94, 0.4);
        border: 1px solid rgba(34, 197, 94, 0.3);
        font-weight: 600;
        
        &:hover {
          background: linear-gradient(135deg, #16a34a, #22c55e);
          transform: translateY(-2px);
          cursor: default;
          box-shadow: 0 8px 20px rgba(34, 197, 94, 0.5);
        }
      }
    }
  }
}

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

.status-icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  flex-shrink: 0;
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
  backdrop-filter: blur(10px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  
  &:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
  }
}

.status-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;
  }
}

.status-badge {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-full);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  background: rgba(156, 163, 175, 0.1);
  color: var(--text-secondary);

  &.active {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
  }

  &.weekly {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info-color);
  }

  &.energy {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning-color);
  }

  &.completed {
    background: rgba(34, 197, 94, 0.15);
    color: var(--success-color);
    border: 1px solid rgba(34, 197, 94, 0.3);
  }
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;

  &.completed {
    background: var(--success-color);
    box-shadow: 0 0 0 2px rgba(34, 197, 94, 0.2);
  }
}

.energy-icon {
  width: 16px;
  height: 16px;
  object-fit: contain;
}

.card-content {
  .time-display {
    font-size: 1.5rem; /* text-2xl */
    font-weight: 700; /* font-bold */
    color: var(--text-primary);
    text-align: center;
    margin-bottom: var(--spacing-md);
    font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Consolas', monospace;
    letter-spacing: 0.1em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
    background: var(--bg-tertiary);
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    border: 1px solid var(--border-light);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    transition: all 0.2s ease-in-out;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    }
  }



  .description {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin-bottom: var(--spacing-lg);
  }

  .club-name {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-lg);

    strong {
      color: var(--text-primary);
      font-weight: var(--font-weight-medium);
    }
  }

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

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

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

.action-button {
  width: 100%;
  padding: var(--spacing-sm) var(--spacing-md);
  border: none;
  border-radius: var(--border-radius-medium);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  background: linear-gradient(135deg, var(--primary-color), var(--primary-color-light));
  color: white;
  box-shadow: 0 4px 12px rgba(var(--primary-color-rgb, 24, 160, 88), 0.3);
  position: relative;
  overflow: hidden;
  
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.5s;
  }
  
  &:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(var(--primary-color-rgb, 24, 160, 88), 0.4);
    
    &::before {
      left: 100%;
    }
  }
  
  &:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(var(--primary-color-rgb, 24, 160, 88), 0.3);
  }
  
  &:disabled {
    background: var(--bg-tertiary);
    color: var(--text-tertiary);
    cursor: not-allowed;
    transform: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    
    &::before {
      display: none;
    }
  }

  &.secondary {
    background: var(--secondary-color);
    
    &:hover:not(:disabled) {
      background: var(--secondary-color-hover);
    }
  }

  &.active {
    background: var(--info-color);
    
    &:hover {
      background: var(--info-color-hover);
    }
  }

  &.completed {
    background: var(--success-color);
    color: white;
    border: 1px solid rgba(34, 197, 94, 0.3);
    
    &:hover {
      background: var(--success-color);
      transform: none;
      cursor: default;
    }
    
    &:disabled {
      background: var(--success-color);
      color: white;
      opacity: 0.9;
    }
  }
}

.action-row {
  display: flex;
  gap: var(--spacing-sm);

  .action-button {
    flex: 1;
  }
}

.loading-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

.loading-icon {
  width: 16px;
  height: 16px;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

// 响应式设计
@media (max-width: 768px) {
  .game-status-container {
    grid-template-columns: 1fr;
    padding: var(--spacing-md);
  }

  .status-card {
    padding: var(--spacing-md);
  }

  .card-header {
    flex-direction: column;
    text-align: center;
    gap: var(--spacing-sm);
  }
}
</style>
