<template>
  <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>
</template>

<script setup>
import { computed, onMounted } from 'vue'
import { useTokenStore } from '@/stores/tokenStore'
import { useMessage } from 'naive-ui'
import { preloadQuestions, getQuestionCount } from '@/utils/studyQuestionsFromJSON.js'

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

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

// 学习答题
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)
  }
}

// 生命周期
onMounted(() => {
  // 预加载答题数据
  preloadQuestions().then(() => {
    console.log('📚 答题数据预加载完成')
  }).catch(error => {
    console.error('❌ 答题数据预加载失败:', error)
  })
})
</script>

<style scoped lang="scss">
.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;
    }
  }

  &.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);

  &.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);
  }
}

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

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

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

.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) {
  .status-card {
    padding: var(--spacing-md);
  }

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

