<template>
  <div class="mistakes-container">
    <div class="page-header">
      <h1 class="page-title">错题分析</h1>
    </div>

    <!-- 错题统计 -->
    <div class="stats-section">
      <div class="stat-card card">
        <el-statistic title="错题总数" :value="mistakeStats.total">
          <template #suffix>
            <span style="font-size: 14px">道</span>
          </template>
        </el-statistic>
      </div>
      <div class="stat-card card">
        <el-statistic title="已掌握" :value="mistakeStats.mastered">
          <template #suffix>
            <span style="font-size: 14px">道</span>
          </template>
        </el-statistic>
      </div>
      <div class="stat-card card">
        <el-statistic title="掌握率" :value="mistakeStats.masteryRate" :precision="1">
          <template #suffix>%</template>
        </el-statistic>
      </div>
      <div class="stat-card card">
        <el-statistic title="平均错误次数" :value="mistakeStats.avgWrongCount" :precision="1">
          <template #suffix>
            <span style="font-size: 14px">次/题</span>
          </template>
        </el-statistic>
      </div>
    </div>

    <!-- 错题分类 -->
    <div class="category-section card">
      <h3 class="section-title">错题分类</h3>
      <div class="category-tabs">
        <div 
          v-for="cat in mistakeCategories" 
          :key="cat.value"
          class="category-tab"
          :class="{ active: selectedCategory === cat.value }"
          @click="selectCategory(cat.value)"
        >
          <div class="tab-content">
            <div class="tab-name">{{ cat.name }}</div>
            <div class="tab-count">{{ cat.count }}</div>
          </div>
          <div class="tab-progress">
            <el-progress :percentage="cat.mastered" :show-text="false" />
          </div>
        </div>
      </div>
    </div>

    <!-- 搜索和筛选 -->
    <div class="filter-section card">
      <el-form :inline="true" :model="filterForm" class="filter-form">
        <el-form-item label="关键词">
          <el-input 
            v-model="filterForm.keyword" 
            placeholder="搜索错题内容或知识点"
            clearable
            @input="handleRealTimeSearch"
            style="width: 200px"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="题目类型">
          <el-select 
            v-model="filterForm.type" 
            placeholder="全部类型" 
            clearable
            @change="handleRealTimeSearch"
            style="width: 120px"
          >
            <el-option label="单选题" value="single" />
            <el-option label="多选题" value="multiple" />
            <el-option label="判断题" value="judge" />
            <el-option label="填空题" value="fill" />
            <el-option label="简答题" value="essay" />
          </el-select>
        </el-form-item>
        <el-form-item label="难度等级">
          <el-select 
            v-model="filterForm.difficulty" 
            placeholder="全部难度" 
            clearable
            @change="handleRealTimeSearch"
            style="width: 120px"
          >
            <el-option label="简单" value="easy" />
            <el-option label="中等" value="medium" />
            <el-option label="困难" value="hard" />
          </el-select>
        </el-form-item>
        <el-form-item label="掌握状态">
          <el-select 
            v-model="filterForm.status" 
            placeholder="全部状态" 
            clearable
            @change="handleRealTimeSearch"
            style="width: 120px"
          >
            <el-option label="未掌握" value="unmastered" />
            <el-option label="已掌握" value="mastered" />
            <el-option label="需巩固" value="review" />
          </el-select>
        </el-form-item>
        <el-form-item label="时间周期">
          <el-select 
            v-model="filterForm.timePeriod" 
            placeholder="全部时间" 
            clearable
            @change="handleRealTimeSearch"
            style="width: 120px"
          >
            <el-option label="最近一周" value="week" />
            <el-option label="最近一月" value="month" />
            <el-option label="最近三月" value="quarter" />
            <el-option label="自定义" value="custom" />
          </el-select>
        </el-form-item>
        <el-form-item v-if="filterForm.timePeriod === 'custom'" label="自定义时间">
          <el-date-picker
            v-model="customDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="handleRealTimeSearch"
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button @click="handleReset">
            <el-icon class="el-icon--left"><Refresh /></el-icon>
            重置
          </el-button>
        </el-form-item>
      </el-form>

      <!-- 当前筛选条件显示 -->
      <div v-if="hasActiveFilters" class="filter-tags">
        <span class="filter-label">当前筛选：</span>
        <el-tag 
          v-if="filterForm.keyword" 
          closable 
          @close="clearKeyword"
          type="primary"
        >
          关键词：{{ filterForm.keyword }}
        </el-tag>
        <el-tag 
          v-if="filterForm.type" 
          closable 
          @close="clearType"
          type="success"
        >
          类型：{{ getTypeText(filterForm.type) }}
        </el-tag>
        <el-tag 
          v-if="filterForm.difficulty" 
          closable 
          @close="clearDifficulty"
          type="warning"
        >
          难度：{{ getDifficultyText(filterForm.difficulty) }}
        </el-tag>
        <el-tag 
          v-if="filterForm.status" 
          closable 
          @close="clearStatus"
          type="info"
        >
          状态：{{ getStatusText(filterForm.status) }}
        </el-tag>
        <el-tag 
          v-if="filterForm.timePeriod" 
          closable 
          @close="clearTimePeriod"
          type="danger"
        >
          时间：{{ getTimePeriodText(filterForm.timePeriod) }}
        </el-tag>
        <el-tag 
          v-if="customDateRange && customDateRange.length === 2" 
          closable 
          @close="clearCustomDate"
          type="danger"
        >
          自定义：{{ formatDateRange(customDateRange) }}
        </el-tag>
        <el-button 
          link 
          type="danger" 
          size="small" 
          @click="handleReset"
          class="clear-all-btn"
        >
          清空全部
        </el-button>
      </div>

      <!-- 搜索结果统计 -->
      <div class="search-result-info">
        <span class="result-count">
          共找到 <strong>{{ totalMistakes }}</strong> 道错题
          <span v-if="hasActiveFilters" class="filter-hint">（已筛选）</span>
        </span>
        <span class="category-info" v-if="selectedCategory !== 'all'">
          当前分类：<strong>{{ getCategoryName(selectedCategory) }}</strong>
        </span>
      </div>
    </div>

    <!-- 错题列表 -->
    <div class="mistakes-list card">
      <div class="list-header">
        <h3 class="section-title">错题列表</h3>
        <div class="view-controls">
          <el-button-group>
            <el-button :type="viewMode === 'card' ? 'primary' : ''" @click="viewMode = 'card'">
              <el-icon><Grid /></el-icon>
              卡片视图
            </el-button>
            <el-button :type="viewMode === 'table' ? 'primary' : ''" @click="viewMode = 'table'">
              <el-icon><List /></el-icon>
              列表视图
            </el-button>
          </el-button-group>
        </div>
      </div>

      <!-- 卡片视图 -->
      <div v-if="viewMode === 'card' && paginatedMistakes.length > 0" class="mistake-cards">
        <div class="mistake-card card" v-for="mistake in paginatedMistakes" :key="mistake.id">
          <div class="card-header">
            <div class="header-left">
              <el-tag :type="getTypeTagType(mistake.type)" size="small">
                {{ getTypeText(mistake.type) }}
              </el-tag>
              <el-tag :type="getDifficultyTagType(mistake.difficulty)" size="small">
                {{ getDifficultyText(mistake.difficulty) }}
              </el-tag>
              <span class="mistake-info">错误 {{ mistake.wrongCount }} 次</span>
            </div>
            <div class="header-right">
              <el-tag :type="getStatusTagType(mistake.masteryStatus)" size="small">
                {{ getStatusText(mistake.masteryStatus) }}
              </el-tag>
            </div>
          </div>

          <div class="card-content">
            <div class="question-content">
              <h4 class="question-title">{{ mistake.title }}</h4>
              <div class="answer-comparison">
                <div class="answer-item wrong">
                  <span class="answer-label">你的答案：</span>
                  <span class="answer-value">{{ mistake.yourAnswer }}</span>
                </div>
                <div class="answer-item correct">
                  <span class="answer-label">正确答案：</span>
                  <span class="answer-value">{{ mistake.correctAnswer }}</span>
                </div>
              </div>
            </div>

            <div class="mistake-meta">
              <div class="detail-item">
                <span class="detail-label">知识点：</span>
                <span class="knowledge-point">{{ mistake.knowledge || '基础知识' }}</span>
              </div>
              <div class="detail-item">
                <span class="detail-label">最近错误：</span>
                <span class="last-wrong">{{ mistake.lastWrong }}</span>
              </div>
            </div>

            <div class="mistake-tags">
              <el-tag v-for="tag in mistake.tags" :key="tag" size="small" type="info">
                {{ tag }}
              </el-tag>
            </div>
          </div>

          <div class="card-actions">
            <el-button link type="primary" size="small" @click="viewDetail(mistake)">
              查看解析
            </el-button>
            <el-button link type="success" size="small" @click="markMastered(mistake)">
              标记已掌握
            </el-button>
          </div>
        </div>
      </div>

      <!-- 表格视图 -->
      <div v-if="viewMode === 'table' && paginatedMistakes.length > 0" class="mistake-table">
        <el-table :data="paginatedMistakes" style="width: 100%">
          <el-table-column prop="title" label="题目" min-width="300" show-overflow-tooltip />
          <el-table-column prop="type" label="类型" width="100">
            <template #default="scope">
              <el-tag :type="getTypeTagType(scope.row.type)" size="small">
                {{ getTypeText(scope.row.type) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="difficulty" label="难度" width="100">
            <template #default="scope">
              <el-tag :type="getDifficultyTagType(scope.row.difficulty)" size="small">
                {{ getDifficultyText(scope.row.difficulty) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="wrongCount" label="错误次数" width="100" />
          <el-table-column prop="lastWrong" label="最近错误" width="150" />
          <el-table-column prop="masteryStatus" label="掌握状态" width="100">
            <template #default="scope">
              <el-tag :type="getStatusTagType(scope.row.masteryStatus)" size="small">
                {{ getStatusText(scope.row.masteryStatus) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column label="操作" width="150">
            <template #default="scope">
              <el-button link type="primary" size="small" @click="viewDetail(scope.row)">
                查看解析
              </el-button>
              <el-button link type="success" size="small" @click="markMastered(scope.row)">
                标记已掌握
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- 空状态显示 -->
      <div v-else-if="filteredMistakes.length === 0" class="empty-state">
        <el-empty 
          :description="hasActiveFilters ? '没有符合条件的错题' : '暂无错题数据'"
          :image-size="120"
        >
          <el-button v-if="hasActiveFilters" type="primary" @click="handleReset">
            清空筛选条件
          </el-button>
          <el-button v-else type="primary" disabled>
            继续学习，争取不出错题
          </el-button>
        </el-empty>
      </div>

      <!-- 分页 -->
      <div v-if="totalMistakes > 0" class="pagination-wrapper">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[10, 20, 30, 50]"
          :total="totalMistakes"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, h } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { Refresh, Grid, List, Search } from '@element-plus/icons-vue'
import { getMistakesList, getMistakesStatistics, markMistakeMastered } from '@/api/exam'
import type { MistakeListItem, MistakesStatisticsResponse } from '@/api/exam'

// 选中的分类
const selectedCategory = ref('all')

// 视图模式
const viewMode = ref('card')

// 分页
const currentPage = ref(1)
const pageSize = ref(10)

// 筛选表单
const filterForm = reactive({
  keyword: '',
  type: '',
  difficulty: '',
  status: '',
  timePeriod: ''
})

// 自定义日期范围
const customDateRange = ref<[Date, Date] | null>(null)

// 错题分类（从API加载，按课程分类）
const mistakeCategories = ref<any[]>([
  { name: '全部', value: 'all', count: 0, mastered: 0 }
])

// 错题统计（从API加载）
const mistakeStats = ref({
  total: 0,
  mastered: 0,
  masteryRate: 0,
  avgWrongCount: 0
})

// 错题列表（从API加载）
const mistakesList = ref<any[]>([])

// 分页相关
const totalMistakes = ref(0)

// 错题数据（后端分页，前端不再需要filteredMistakes和paginatedMistakes）
// 直接使用mistakesList作为显示数据
const filteredMistakes = computed(() => mistakesList.value)
const paginatedMistakes = computed(() => mistakesList.value)

// 是否有活跃的筛选条件
const hasActiveFilters = computed(() => {
  return !!(filterForm.keyword || filterForm.type || filterForm.difficulty || filterForm.status || filterForm.timePeriod || (customDateRange.value && customDateRange.value.length === 2) || selectedCategory.value !== 'all')
})

/**
 * 选择分类
 */
const selectCategory = (category: string) => {
  selectedCategory.value = category
  currentPage.value = 1
  loadMistakes()  // 重新加载数据
}

/**
 * 加载错题统计数据
 */
const loadStatistics = async () => {
  try {
    const response = await getMistakesStatistics()
    // request.ts返回的是 {code, message, data}，直接访问response.data
    const stats = response.data as MistakesStatisticsResponse
    
    // 更新统计数据
    mistakeStats.value = {
      total: stats.total,
      mastered: 0,  // 暂无此数据
      masteryRate: 0,
      avgWrongCount: 0
    }
    
    // 更新错题分类（按课程）
    mistakeCategories.value = [
      { name: '全部', value: 'all', count: stats.total, mastered: 0 },
      ...stats.by_course.map((c: any) => ({
        name: c.course_name,
        value: c.course_id.toString(),
        count: c.count,
        mastered: 0
      }))
    ]
  } catch (error: any) {
    console.error('加载错题统计失败:', error)
    ElMessage.error('加载错题统计失败')
  }
}

/**
 * 加载错题列表
 */
const loadMistakes = async () => {
  try {
    const params: any = {
      page: currentPage.value,
      size: pageSize.value
    }
    
    // 添加筛选条件
    if (selectedCategory.value !== 'all') {
      params.course_id = parseInt(selectedCategory.value)
    }
    if (filterForm.keyword) {
      params.search = filterForm.keyword
    }
    if (filterForm.type) {
      params.question_type = filterForm.type
    }
    // 时间筛选
    if (filterForm.timePeriod && filterForm.timePeriod !== 'custom') {
      const now = new Date()
      let startDate: Date | undefined
      
      switch (filterForm.timePeriod) {
        case 'week':
          startDate = new Date(now.getTime() - 7 * 24 * 60 * 60 * 1000)
          break
        case 'month':
          startDate = new Date(now.getTime() - 30 * 24 * 60 * 60 * 1000)
          break
        case 'quarter':
          startDate = new Date(now.getTime() - 90 * 24 * 60 * 60 * 1000)
          break
      }
      
      if (startDate) {
        params.start_date = startDate.toISOString().split('T')[0]
      }
    } else if (filterForm.timePeriod === 'custom' && customDateRange.value) {
      params.start_date = customDateRange.value[0].toISOString().split('T')[0]
      params.end_date = customDateRange.value[1].toISOString().split('T')[0]
    }
    
    const response = await getMistakesList(params)
    // request.ts返回的是 {code, message, data}，直接访问response.data
    const data = response.data
    
    // 适配数据格式
    mistakesList.value = data.items.map((item: MistakeListItem) => ({
      id: item.id,
      type: item.question_type || 'single',
      difficulty: 'medium',  // 暂无此字段
      masteryStatus: 'unmastered',  // 暂无此字段
      title: item.question_content,
      yourAnswer: item.user_answer,
      correctAnswer: item.correct_answer,
      wrongCount: 1,  // 暂无统计
      lastWrong: new Date(item.created_at).toLocaleDateString(),
      knowledge: item.knowledge_point_name || '未关联知识点',
      tags: [],  // 暂无此数据
      category: item.course_id.toString()
    }))
    
    totalMistakes.value = data.total
  } catch (error: any) {
    console.error('加载错题列表失败:', error)
    ElMessage.error('加载错题列表失败')
  }
}

/**
 * 查看详情
 */
const viewDetail = (mistake: any) => {
  ElMessageBox.alert(
    h('div', { class: 'mistake-detail' }, [
      h('h4', '题目'),
      h('p', mistake.title),
      h('h4', '你的答案'),
      h('p', { style: 'color: #f56c6c' }, mistake.yourAnswer || '未作答'),
      h('h4', '正确答案'),
      h('p', { style: 'color: #67c23a' }, mistake.correctAnswer),
      h('h4', '知识点'),
      h('p', mistake.knowledge)
    ]),
    '错题详情',
    {
      confirmButtonText: '关闭',
      customClass: 'mistake-detail-dialog'
    }
  )
}

/**
 * 标记已掌握
 */
const markMastered = async (mistake: any) => {
  try {
    const response = await markMistakeMastered(mistake.id)
    if (response.code === 200) {
      mistake.masteryStatus = 'mastered'
      ElMessage.success('已标记为掌握')
      // 刷新列表以更新统计数据
      await loadMistakes()
    } else {
      ElMessage.error(response.message || '标记失败')
    }
  } catch (error: any) {
    console.error('标记掌握失败:', error)
    ElMessage.error(error.message || '标记失败，请稍后重试')
  }
}

/**
 * 实时搜索处理
 */
const handleRealTimeSearch = () => {
  currentPage.value = 1
  loadMistakes()  // 重新加载数据
}

/**
 * 重置所有筛选条件
 */
const handleReset = () => {
  filterForm.keyword = ''
  filterForm.type = ''
  filterForm.difficulty = ''
  filterForm.status = ''
  filterForm.timePeriod = ''
  customDateRange.value = null
  selectedCategory.value = 'all'
  currentPage.value = 1
  loadMistakes()  // 重新加载数据
  ElMessage.success('已重置所有筛选条件')
}

/**
 * 清除关键词筛选
 */
const clearKeyword = () => {
  filterForm.keyword = ''
  currentPage.value = 1
  loadMistakes()
}

/**
 * 清除类型筛选
 */
const clearType = () => {
  filterForm.type = ''
  currentPage.value = 1
  loadMistakes()
}

/**
 * 清除难度筛选
 */
const clearDifficulty = () => {
  filterForm.difficulty = ''
  currentPage.value = 1
  loadMistakes()
}

/**
 * 清除状态筛选
 */
const clearStatus = () => {
  filterForm.status = ''
  currentPage.value = 1
  loadMistakes()
}

/**
 * 清除时间周期筛选
 */
const clearTimePeriod = () => {
  filterForm.timePeriod = ''
  currentPage.value = 1
  loadMistakes()
}

/**
 * 清除自定义日期筛选
 */
const clearCustomDate = () => {
  customDateRange.value = null
  currentPage.value = 1
  loadMistakes()
}

/**
 * 分页大小改变
 */
const handleSizeChange = (val: number) => {
  pageSize.value = val
  currentPage.value = 1
  loadMistakes()
}

/**
 * 当前页改变
 */
const handleCurrentChange = (val: number) => {
  currentPage.value = val
  loadMistakes()
}

/**
 * 获取分类名称
 */
const getCategoryName = (value: string) => {
  const category = mistakeCategories.value.find(cat => cat.value === value)
  return category ? category.name : '未知分类'
}

/**
 * 获取时间周期文本
 */
const getTimePeriodText = (period: string) => {
  const map: Record<string, string> = {
    week: '最近一周',
    month: '最近一月',
    quarter: '最近三月',
    custom: '自定义时间'
  }
  return map[period] || '全部时间'
}

/**
 * 格式化日期范围
 */
const formatDateRange = (range: Date[]) => {
  if (!range || range.length !== 2) return ''
  const start = range[0].toLocaleDateString()
  const end = range[1].toLocaleDateString()
  return start + ' 至 ' + end
}

/**
 * 获取题型文本
 */
const getTypeText = (type: string) => {
  const map: Record<string, string> = {
    single: '单选题',
    multiple: '多选题',
    judge: '判断题',
    fill: '填空题',
    essay: '简答题'
  }
  return map[type] || '未知'
}

/**
 * 获取难度文本
 */
const getDifficultyText = (difficulty: string) => {
  const map: Record<string, string> = {
    easy: '简单',
    medium: '中等',
    hard: '困难'
  }
  return map[difficulty] || '未知'
}

/**
 * 获取状态文本
 */
const getStatusText = (status: string) => {
  const map: Record<string, string> = {
    unmastered: '未掌握',
    mastered: '已掌握',
    review: '需巩固'
  }
  return map[status] || '未知'
}

/**
 * 获取题型标签类型
 */
const getTypeTagType = (type: string) => {
  const map: Record<string, string> = {
    single: '',
    multiple: 'success',
    judge: 'warning',
    fill: 'danger',
    essay: 'info'
  }
  return map[type] || ''
}

/**
 * 获取难度标签类型
 */
const getDifficultyTagType = (difficulty: string) => {
  const map: Record<string, string> = {
    easy: 'success',
    medium: 'warning',
    hard: 'danger'
  }
  return map[difficulty] || ''
}

/**
 * 获取状态标签类型
 */
const getStatusTagType = (status: string) => {
  const map: Record<string, string> = {
    unmastered: 'danger',
    mastered: 'success',
    review: 'warning'
  }
  return map[status] || 'info'
}

// 初始化加载数据
onMounted(() => {
  loadStatistics()
  loadMistakes()
})

console.log('错题分析页面已加载')
</script>

<style lang="scss" scoped>
.mistakes-container {
  padding: 20px;

  .page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;

    .page-title {
      font-size: 24px;
      font-weight: 600;
      color: #333;
      margin: 0;
    }
  }

  .card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }

  .filter-section {
    .filter-form {
      .el-form-item {
        margin-bottom: 0;
      }
    }

    .filter-tags {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid #f0f0f0;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 8px;

      .filter-label {
        color: #666;
        font-size: 14px;
        margin-right: 8px;
      }

      .clear-all-btn {
        margin-left: 8px;
      }
    }

    .search-result-info {
      margin-top: 12px;
      padding-top: 12px;
      border-top: 1px solid #f0f0f0;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .result-count {
        color: #666;
        font-size: 14px;

        strong {
          color: #409eff;
          font-weight: 600;
        }
      }

      .filter-hint {
        color: #e6a23c;
        font-size: 12px;
      }

      .category-info {
        color: #666;
        font-size: 14px;

        strong {
          color: #67c23a;
          font-weight: 600;
        }
      }
    }
  }

  .stats-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    margin-bottom: 24px;

    .stat-card {
      text-align: center;
    }
  }

  .category-section {
    .section-title {
      font-size: 18px;
      font-weight: 600;
      color: #333;
      margin: 0 0 20px 0;
    }

    .category-tabs {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
      gap: 16px;

      .category-tab {
        background: #f8f9fa;
        border: 2px solid #e9ecef;
        border-radius: 12px;
        padding: 16px;
        cursor: pointer;
        transition: all 0.3s ease;

        &:hover {
          border-color: #409eff;
          background: #ecf5ff;
        }

        &.active {
          border-color: #409eff;
          background: #ecf5ff;

          .tab-name {
            color: #409eff;
            font-weight: 600;
          }
        }

        .tab-content {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-bottom: 12px;

          .tab-name {
            font-size: 16px;
            font-weight: 500;
            color: #333;
          }

          .tab-count {
            font-size: 20px;
            font-weight: 600;
            color: #409eff;
          }
        }

        .tab-progress {
          .el-progress {
            margin-bottom: 0;
          }
        }
      }
    }
  }

  .mistakes-list {
    .list-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;

      .section-title {
        font-size: 18px;
        font-weight: 600;
        color: #333;
        margin: 0;
      }

      .view-controls {
        display: flex;
        gap: 12px;
      }
    }

    .empty-state {
      padding: 40px 20px;
      text-align: center;
    }

    .mistake-table {
      margin-top: 20px;
    }

    .mistake-cards {
      display: flex;
      flex-direction: column;
      gap: 16px;

      .mistake-card {
        border: 1px solid #e4e7ed;
        border-radius: 8px;
        overflow: hidden;

        .card-header {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 16px;
          background: #f8f9fa;
          border-bottom: 1px solid #e4e7ed;

          .header-left {
            display: flex;
            align-items: center;
            gap: 8px;

            .mistake-info {
              color: #e6a23c;
              font-size: 12px;
              font-weight: 500;
            }
          }
        }

        .card-content {
          padding: 16px;

          .question-title {
            font-size: 16px;
            font-weight: 500;
            color: #333;
            margin: 0 0 12px 0;
            line-height: 1.5;
          }

          .answer-comparison {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 12px;

            .answer-item {
              padding: 8px 12px;
              border-radius: 6px;

              &.wrong {
                background: #fef0f0;
                border: 1px solid #fcdede;
              }

              &.correct {
                background: #f0f9ff;
                border: 1px solid #b3d8ff;
              }

              .answer-label {
                font-size: 12px;
                color: #666;
                margin-right: 8px;
              }

              .answer-value {
                font-weight: 500;
                color: #333;
              }
            }
          }

          .mistake-meta {
            margin-bottom: 12px;

            .detail-item {
              margin-bottom: 4px;
              font-size: 14px;

              .detail-label {
                color: #666;
                margin-right: 8px;
              }

              .knowledge-point {
                color: #409eff;
                font-weight: 500;
              }

              .last-wrong {
                color: #999;
              }
            }
          }

          .mistake-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
          }
        }

        .card-actions {
          padding: 12px 16px;
          background: #fafafa;
          border-top: 1px solid #e4e7ed;
          display: flex;
          gap: 12px;
        }
      }
    }

    .pagination-wrapper {
      display: flex;
      justify-content: center;
      margin-top: 20px;
    }
  }
}
</style>