<template>
  <div class="training-panel">
    <PageHeader
      title="互动训练"
      description="通过多种训练模式提升学习效果"
    />

    <StatsRow :stats="trainStats" />

    <div class="train-tabs">
      <button 
        :class="['train-tab', { active: trainTab === 'checkpoint' }]" 
        @click="trainTab = 'checkpoint'; loadCheckpointData()"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <path d="M12 2L15.09 8.26L22 9.27L17 14.14L18.18 21.02L12 17.77L5.82 21.02L7 14.14L2 9.27L8.91 8.26L12 2Z"></path>
        </svg>
        闯关模式
      </button>
      <button 
        :class="['train-tab', { active: trainTab === 'daily' }]" 
        @click="trainTab = 'daily'; loadDailyQuestions()"
      >
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8">
          <rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect>
          <line x1="16" y1="2" x2="16" y2="6"></line>
          <line x1="8" y1="2" x2="8" y2="6"></line>
          <line x1="3" y1="10" x2="21" y2="10"></line>
        </svg>
        每日一练
      </button>
    </div>

    <ContentCard v-if="trainTab === 'checkpoint'" title="闯关模式">
      <div v-if="loading" class="loading-state">加载中...</div>
      
      <div v-else-if="!checkpointData" class="empty-state">
        <p>暂无闯关数据</p>
        <p class="empty-hint">完成每日任务解锁新的闯关关卡</p>
      </div>

      <div v-else class="checkpoint-content">
        <h3 style="margin-bottom: var(--space-lg); color: var(--color-primary);">{{ checkpointData.name }}</h3>
        <div v-for="(q, index) in checkpointData.questions" :key="q.id" class="question-item">
          <div style="margin-bottom: var(--space-sm);">
            <strong>第{{ index + 1 }}题:</strong>
            <span :class="['type-badge', q.type]">{{ getTypeLabel(q.type) }}</span>
          </div>
          <div style="margin-bottom: var(--space-md);">{{ q.stem }}</div>
          
          <div v-if="q.type === 'single_choice' && q.options?.length" class="options-list answer-options">
            <label v-for="opt in q.options" :key="opt.key" class="option-label">
              <input type="radio" :name="`checkpoint-${q.id}`" :value="opt.key" />
              {{ opt.key }}. {{ opt.text }}
            </label>
          </div>

          <div v-if="q.type === 'multiple_choice' && q.options?.length" class="options-list answer-options">
            <label v-for="opt in q.options" :key="opt.key" class="option-label">
              <input type="checkbox" :value="opt.key" />
              {{ opt.key }}. {{ opt.text }}
            </label>
          </div>

          <div v-if="q.type === 'true_false'" class="options-list answer-options">
            <label class="option-label"><input type="radio" :name="`checkpoint-${q.id}`" value="T" /> 正确</label>
            <label class="option-label"><input type="radio" :name="`checkpoint-${q.id}`" value="F" /> 错误</label>
          </div>

          <div v-if="q.type === 'fill_blank'" class="fill-blank-answer">
            <textarea v-model="q.studentAnswer" rows="2" placeholder="请输入您的答案..." class="form-textarea"></textarea>
          </div>

          <div v-if="q.type === 'subjective'" class="subjective-answer">
            <textarea v-model="q.studentAnswer" rows="3" placeholder="请输入您的答案..." class="form-textarea"></textarea>
          </div>
        </div>

        <div class="action-bar">
          <button class="btn btn-primary">提交答案</button>
          <button class="btn btn-secondary">下一题</button>
        </div>
      </div>
    </ContentCard>

    <ContentCard v-if="trainTab === 'daily'" title="每日一练">
      <div v-if="loading" class="loading-state">加载中...</div>
      
      <div v-else-if="dailyQuestions.length === 0" class="empty-state">
        <p>今日练习已完成！</p>
        <p class="empty-hint">明天再来挑战新的题目吧</p>
      </div>

      <div v-else class="daily-list">
        <div v-for="(q, index) in dailyQuestions" :key="q.id" class="question-item">
          <div class="question-header">
            <span class="question-number">第{{ index + 1 }}题</span>
            <span :class="['type-badge', q.type]">{{ getTypeLabel(q.type) }}</span>
          </div>
          <div class="question-content">{{ q.stem }}</div>
        </div>
      </div>
    </ContentCard>

  </div>
</template>

<script setup>
import PageHeader from '../common/PageHeader.vue'
import StatsRow from '../common/StatsRow.vue'
import ContentCard from '../common/ContentCard.vue'
import { useTraining } from './composables/useTraining.js'

const {
  trainTab,
  checkpointData,
  dailyQuestions,
  loading,
  trainStats,
  loadCheckpointData,
  loadDailyQuestions
} = useTraining()

const getTypeLabel = (type) => {
  const typeMap = {
    single_choice: '单选',
    multiple_choice: '多选',
    true_false: '判断',
    fill_blank: '填空',
    subjective: '简答'
  }
  return typeMap[type] || type
}
</script>

<style scoped>
.training-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 16px;
  overflow-y: auto;
  overflow-x: hidden;
  min-width: 0;
}

.train-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E9ECEF;
}

.train-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  color: #495057;
  min-height: 36px;
  line-height: 1.5;
  white-space: nowrap;
}

.train-tab:hover {
  color: #212529;
  background: #F1F3F5;
}

.train-tab.active {
  background: #F1F3F5;
  color: #212529;
  font-weight: 600;
}

.loading-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 20px;
  color: #6C757D;
  min-height: 200px;
}

.empty-state p {
  font-size: 14px;
  font-weight: 500;
  color: #495057;
  margin-bottom: 4px;
}

.empty-hint {
  font-size: 12px;
  color: #6C757D;
  margin-top: 8px;
  max-width: 360px;
  text-align: center;
  line-height: 1.5;
}

.checkpoint-content,
.daily-list,
.wrong-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.question-item,
.wrong-item {
  padding: 16px;
  background: #FFFFFF;
  border-radius: 8px;
  border: 1px solid #E9ECEF;
  transition: box-shadow 0.15s ease;
}

.question-item:hover,
.wrong-item:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.question-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E9ECEF;
}

.question-number {
  font-weight: 600;
  font-size: 13px;
  color: #212529;
  background: #F8F9FA;
  padding: 2px 8px;
  border-radius: 4px;
}

.type-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  background: #FFFFFF;
  color: #212529;
  border: 1px solid #DEE2E6;
  display: inline-block;
}

.question-content {
  font-size: 14px;
  line-height: 1.6;
  color: #212529;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #F8F9FA;
  border-radius: 6px;
  border-left: 3px solid #212529;
  font-weight: 400;
}

.options-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.option-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.15s ease;
  background: #F8F9FA;
  border: 1px solid transparent;
  font-size: 13px;
}

.option-label:hover {
  background: #F1F3F5;
  border-color: #E9ECEF;
}

.option-label input[type="radio"],
.option-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: #212529;
  flex-shrink: 0;
}

.form-textarea {
  width: 100%;
  min-height: 60px;
  padding: 8px 12px;
  border: 1px solid #DEE2E6;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  resize: vertical;
  transition: border-color 0.15s ease;
  line-height: 1.5;
}

.form-textarea:focus {
  border-color: #212529;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.05);
}

.form-textarea:hover {
  border-color: #CED4DA;
}

.action-bar {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #E9ECEF;
  flex-wrap: wrap;
}

.btn {
  border-radius: 6px;
  padding: 0 14px;
  height: 36px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.15s ease;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  min-width: 100px;
}

.btn-primary {
  background: #212529;
  color: #FFFFFF;
}

.btn-primary:hover:not(:disabled) {
  background: #000000;
}

.btn-secondary {
  background: #FFFFFF;
  color: #212529;
  border: 1px solid #DEE2E6;
}

.btn-secondary:hover:not(:disabled) {
  background: #F8F9FA;
  border-color: #ADB5BD;
}

.answer-comparison {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 10px 0;
  padding: 12px;
  background: #F8F9FA;
  border-radius: 8px;
  border: 1px solid #E9ECEF;
}

.your-answer,
.correct-answer {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  background: #FFFFFF;
  border-radius: 6px;
  border: 1px solid #E9ECEF;
}

.your-answer strong,
.correct-answer strong {
  font-size: 13px;
  font-weight: 600;
  color: #212529;
  display: block;
  margin-bottom: 4px;
}

.wrong {
  color: #C92A2A;
  font-weight: 600;
  font-size: 13px;
  padding: 8px;
  background: #FFF5F5;
  border-radius: 4px;
  border-left: 3px solid #C92A2A;
}

.correct {
  color: #2B8A3E;
  font-weight: 600;
  font-size: 13px;
  padding: 8px;
  background: #EBFBEE;
  border-radius: 4px;
  border-left: 3px solid #2B8A3E;
}

.explanation {
  margin-top: 12px;
  padding: 12px 16px;
  background: #F8F9FA;
  border-left: 3px solid #212529;
  border-radius: 6px;
  font-size: 13px;
  color: #495057;
  line-height: 1.6;
}
</style>
