<template>
  <div class="game-status-container">
    <!-- 未选择Token提示 -->
    <div v-if="!tokenStore.selectedToken" class="no-token-notice">
      <n-empty
        description="未选择Token"
        size="large"
      >
        <template #icon>
          <n-icon size="80" color="#d1d5db">
            <InformationCircle />
          </n-icon>
        </template>
        <template #extra>
          <div class="notice-content">
            <p class="notice-text">请在右上角的Token选择器中选择一个Token</p>
            <p class="notice-subtext">或前往 <router-link to="/tokens" class="link">Token管理</router-link> 添加新的Token</p>
          </div>
        </template>
      </n-empty>
    </div>

    <!-- 已选择Token时显示内容 -->
    <template v-else>
    <!-- 身份牌常驻（嵌入式） -->
    <IdentityCard embedded />
    
      <!-- 标签页 -->
      <n-tabs
        v-model:value="activeTab"
        type="card"
        size="large"
        animated
        class="game-tabs"
      >
      <!-- 每日标签页 -->
      <n-tab-pane name="daily" class="tab-daily">
        <template #tab>
          <div class="tab-header tab-header-daily">
            <n-icon size="20"><CalendarClear /></n-icon>
            <span>每日</span>
          </div>
        </template>
        <div class="tab-content-grid">
          <!-- 队伍阵容 -->
    <TeamStatus />
    
    <!-- 每日任务状态 -->
    <DailyTaskStatus />
    
    <!-- 咸将塔状态 -->
    <TowerStatus />
    
          <!-- 挂机时间 -->
          <HangUpStatus />
    
          <!-- 咸鱼大冲关 -->
          <StudyStatus />
    
    <!-- 盐罐机器人状态 -->
          <BottleHelperStatus />
    
    <!-- 黑市购买 -->
          <BlackMarketPurchase />
        </div>
      </n-tab-pane>

      <!-- 俱乐部标签页 -->
      <n-tab-pane name="club" class="tab-club">
        <template #tab>
          <div class="tab-header tab-header-club">
            <n-icon size="20"><People /></n-icon>
            <span>俱乐部</span>
        </div>
        </template>
        <div class="tab-content-grid">
    <!-- 俱乐部签到 -->
          <LegionSigninStatus />
          
          <!-- 俱乐部赛车 -->
          <CarManagement />
          
          <!-- 俱乐部信息 -->
          <ClubInfo />
        </div>
      </n-tab-pane>

      <!-- 活动标签页 -->
      <n-tab-pane name="activity" class="tab-activity">
        <template #tab>
          <div class="tab-header tab-header-activity">
            <n-icon size="20"><Gift /></n-icon>
            <span>活动</span>
        </div>
        </template>
        <div class="tab-content-grid">
    <!-- 月度任务 -->
          <MonthlyTaskStatus />

    <!-- 咸将升级模块 -->
    <UpgradeModule />
        </div>
      </n-tab-pane>
    </n-tabs>
    </template>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useTokenStore } from '@/stores/tokenStore'
import { InformationCircle, CalendarClear, People, Gift } from '@vicons/ionicons5'
import TeamStatus from './TeamStatus.vue'
import DailyTaskStatus from './DailyTaskStatus.vue'
import TowerStatus from './TowerStatus.vue'
import HangUpStatus from './HangUpStatus.vue'
import StudyStatus from './StudyStatus.vue'
import BottleHelperStatus from './BottleHelperStatus.vue'
import LegionSigninStatus from './LegionSigninStatus.vue'
import CarManagement from './CarManagement.vue'
import ClubInfo from './ClubInfo.vue'
import MonthlyTaskStatus from './MonthlyTaskStatus.vue'
import UpgradeModule from './UpgradeModule.vue'
import IdentityCard from './IdentityCard.vue'
import BlackMarketPurchase from './BlackMarketPurchase.vue'

const tokenStore = useTokenStore()

// 当前激活的标签页
const activeTab = ref('daily')
</script>

<style scoped lang="scss">
.game-status-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}

// 未选择Token提示
.no-token-notice {
  background: var(--bg-primary);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-xl) var(--spacing-lg);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .notice-content {
    margin-top: var(--spacing-md);
    text-align: center;
    
    .notice-text {
    font-size: var(--font-size-md);
    color: var(--text-primary);
      margin: 0 0 var(--spacing-sm) 0;
      font-weight: var(--font-weight-medium);
  }

    .notice-subtext {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    margin: 0;
      
      .link {
        color: var(--primary-color);
        text-decoration: none;
  font-weight: var(--font-weight-medium);
      
      &:hover {
          text-decoration: underline;
        }
      }
    }
  }
}

.game-tabs {
  background: var(--bg-primary);
  border-radius: var(--border-radius-xl);
  padding: var(--spacing-md);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  
  :deep(.n-tabs-nav) {
    background: var(--bg-secondary);
    border-radius: var(--border-radius-medium);
    padding: 6px;
    gap: 8px;
    display: flex;
  }
  
  :deep(.n-tabs-tab) {
    border-radius: 10px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    font-weight: var(--font-weight-semibold);
    padding: 12px 20px;
    position: relative;
    overflow: hidden;
      
      &::before {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, transparent, rgba(255, 255, 255, 0.1));
      opacity: 0;
      transition: opacity 0.3s ease;
    }
    
    &:hover::before {
        opacity: 1;
    }
    
    // 每日标签（蓝色主题）
    &:has(.tab-header-daily) {
      color: #3b82f6;
      border: 1.5px solid rgba(59, 130, 246, 0.15);
      
      &:hover {
        background: rgba(59, 130, 246, 0.08);
        border-color: rgba(59, 130, 246, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
      }
      
      &.n-tabs-tab--active {
        background: linear-gradient(135deg, #3b82f6, #60a5fa) !important;
        color: white !important;
        border-color: transparent !important;
        box-shadow: 0 4px 16px rgba(59, 130, 246, 0.4), 0 0 0 3px rgba(59, 130, 246, 0.1);
        transform: translateY(-2px);
      }
    }
    
    // 俱乐部标签（紫色主题）
    &:has(.tab-header-club) {
      color: #8b5cf6;
      border: 1.5px solid rgba(139, 92, 246, 0.15);
    
    &:hover {
        background: rgba(139, 92, 246, 0.08);
        border-color: rgba(139, 92, 246, 0.3);
        transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
      }
      
      &.n-tabs-tab--active {
        background: linear-gradient(135deg, #8b5cf6, #a78bfa) !important;
        color: white !important;
        border-color: transparent !important;
        box-shadow: 0 4px 16px rgba(139, 92, 246, 0.4), 0 0 0 3px rgba(139, 92, 246, 0.1);
        transform: translateY(-2px);
      }
    }
    
    // 活动标签（橙色主题）
    &:has(.tab-header-activity) {
      color: #f59e0b;
      border: 1.5px solid rgba(245, 158, 11, 0.15);
        
        &:hover {
        background: rgba(245, 158, 11, 0.08);
        border-color: rgba(245, 158, 11, 0.3);
          transform: translateY(-2px);
        box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
      }
      
      &.n-tabs-tab--active {
        background: linear-gradient(135deg, #f59e0b, #fbbf24) !important;
        color: white !important;
        border-color: transparent !important;
        box-shadow: 0 4px 16px rgba(245, 158, 11, 0.4), 0 0 0 3px rgba(245, 158, 11, 0.1);
        transform: translateY(-2px);
      }
    }
  }
  
  :deep(.n-tabs-pane-wrapper) {
    padding: var(--spacing-lg) 0;
  }
}

// 标签头部样式
.tab-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  
  .n-icon {
    transition: transform 0.3s ease;
  }
  
  // 选中时图标旋转
  .n-tabs-tab--active & .n-icon {
    transform: scale(1.1);
  }
  
  span {
    font-size: 15px;
    letter-spacing: 0.3px;
  }
}

.tab-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: var(--spacing-lg);
}

// 深色主题支持
[data-theme="dark"] .game-status-container {
  :deep(.n-tabs-nav) {
    background: rgba(255, 255, 255, 0.05);
  }
  
  :deep(.n-tabs-tab) {
    &:hover {
      background: rgba(255, 255, 255, 0.08);
    }
  }
}

// 响应式设计
@media (max-width: 1024px) {
  .tab-content-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 768px) {
  .game-status-container {
    padding: var(--spacing-md);
  }

  .game-tabs {
    padding: var(--spacing-sm);
  }

  .tab-content-grid {
    grid-template-columns: 1fr;
  }
  
  :deep(.n-tabs-pane-wrapper) {
    padding: var(--spacing-md) 0;
  }
}
</style>

