math_cms/resources/views/filament/pages/mistake-book.blade.php.backup

<div class="min-h-screen bg-gray-50 p-8">
    {{-- 页面标题区域 --}}
    <div class="mb-8">
        <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
            <div class="flex items-center justify-between mb-6">
                <div>
                    <h1 class="text-3xl font-bold text-gray-900 flex items-center">
                        <svg class="w-8 h-8 mr-3 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                        </svg>
                        错题本
                    </h1>
                    <p class="mt-2 text-sm text-gray-600 ml-11">查看学生错题记录与AI分析，生成针对性练习</p>
                </div>
            </div>

            {{-- 选择器区域 --}}
            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div class="flex flex-col gap-3 lg:flex-row lg:items-center">
                    @if(!$this->isTeacher)
                    <div class="form-control w-full lg:flex-1">
                        <label class="label"><span class="label-text font-medium">选择老师</span></label>
                        <select wire:model.live="teacherId" class="select select-bordered w-full h-11">
                            <option value="">请选择老师...</option>
                            @foreach($this->teachers as $teacher)
                                <option value="{{ $teacher->teacher_id }}">
                                    {{ trim($teacher->name ?? $teacher->teacher_id) . ($teacher->subject ? " ({$teacher->subject})" : '') }}
                                </option>
                            @endforeach
                        </select>
                    </div>
                    @endif

                    <div class="form-control w-full lg:flex-1">
                        <label class="label"><span class="label-text font-medium">选择学生</span></label>
                        <select wire:model.live="studentId" class="select select-bordered w-full h-11" @if(empty($teacherId)) disabled @endif>
                            <option value="">{{ empty($teacherId) ? '请先选择老师' : '请选择学生...' }}</option>
                            @foreach($this->students as $student)
                                <option value="{{ $student->student_id }}">
                                    {{ trim($student->name ?? $student->student_id) . " ({$student->grade} - {$student->class_name})" }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="w-full lg:w-auto flex items-center lg:pt-6">
                        <button wire:click="loadMistakeData" wire:loading.attr="disabled"
                            class="inline-flex items-center justify-center w-full h-11 px-6 border border-transparent text-sm font-medium rounded-lg shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500 transition-colors duration-200">
                            <svg wire:loading class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" fill="none" viewBox="0 0 24 24">
                                <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                                <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                            </svg>
                            刷新数据
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 错误提示 --}}
    @if ($errorMessage)
        <div class="mb-8">
            <div class="bg-red-50 border border-red-200 rounded-xl p-4">
                <div class="flex items-start">
                    <svg class="h-5 w-5 text-red-400" viewBox="0 0 20 20" fill="currentColor">
                        <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
                    </svg>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">加载错误</h3>
                        <p class="mt-1 text-sm text-red-700">{{ $errorMessage }}</p>
                    </div>
                </div>
            </div>
        </div>
    @endif

    @if ($actionMessage)
        <div class="mb-8">
            <div class="bg-green-50 border border-green-200 rounded-xl p-4">
                <p class="text-sm text-green-700">{{ $actionMessage }}</p>
            </div>
        </div>
    @endif

    {{-- 学习状态概览 --}}
    <div class="mb-8">
        <div class="grid grid-cols-1 gap-6 lg:grid-cols-3">
            {{-- 今日必复习 --}}
            <div class="lg:col-span-2 bg-gradient-to-br from-indigo-500 to-purple-600 rounded-xl shadow-sm p-6 text-white">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">今日必复习</h3>
                    <span class="bg-white/20 px-3 py-1 rounded-full text-sm">
                        {{ count($mistakes) }} 道错题
                    </span>
                </div>
                <div class="space-y-3">
                    @php
                        $urgentMistakes = collect($mistakes)->take(3);
                    @endphp
                    @if($urgentMistakes->isNotEmpty())
                        @foreach($urgentMistakes as $mistake)
                            @php
                                $daysSince = $mistake['created_at'] ? \Carbon\Carbon::parse($mistake['created_at'])->diffInDays(now()) : 0;
                                $urgency = $daysSince > 7 ? 'high' : ($daysSince > 3 ? 'medium' : 'low');
                            @endphp
                            <div class="bg-white/10 backdrop-blur rounded-lg p-4 hover:bg-white/20 transition-colors cursor-pointer">
                                <!-- 题目标签 -->
                                @php
                                    $hasValidInfo = false;
                                    $tags = [];
                                @endphp

                                @if(!empty($mistake['question']['question_number']))
                                    @php
                                        $hasValidInfo = true;
                                        $tags[] = '第' . $mistake['question']['question_number'] . '题';
                                    @endif

                                @if(!empty($mistake['question']['kp_code']))
                                    @php
                                        $hasValidInfo = true;
                                        $kpName = $knowledgePointOptions[$mistake['question']['kp_code']] ?? $mistake['question']['kp_code'];
                                        if($kpName && $kpName !== $mistake['question']['kp_code']) {
                                            $tags[] = $kpName;
                                        }
                                    @endif

                                @if(!empty($mistake['error_type']))
                                    @php
                                        $hasValidInfo = true;
                                        $tags[] = $mistake['error_type'];
                                    @endif

                                @if($hasValidInfo && !empty($tags))
                                    <div class="flex flex-wrap gap-1.5 mb-2">
                                        @foreach($tags as $tag)
                                            <span class="text-xs bg-white/20 px-2 py-0.5 rounded">{{ $tag }}</span>
                                        @endforeach
                                    </div>
                                @endif

                                <!-- 完整题干 -->
                                <div class="mb-3">
                                    <p class="text-sm leading-relaxed">
                                        {{ $mistake['question']['stem'] ?? '暂无题干' }}
                                    </p>
                                </div>

                                <!-- 底部按钮 -->
                                <div class="flex justify-end">
                                    <button class="text-xs bg-white/20 hover:bg-white/30 px-3 py-1 rounded transition-colors">
                                        查看详情
                                    </button>
                                </div>
                            </div>
                        @endforeach
                    @else
                        <div class="text-center py-8 text-white/80">
                            <svg class="w-16 h-16 mx-auto mb-4 text-white/50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                            </svg>
                            <p class="text-sm">暂无错题数据</p>
                            <p class="text-xs mt-1 text-white/60">请先选择学生并刷新数据</p>
                        </div>
                    @endif
                </div>
                @if($urgentMistakes->isNotEmpty())
                    <div class="mt-4 pt-4 border-t border-white/20">
                        <button wire:click="startQuickReview"
                            class="w-full bg-white text-indigo-600 px-4 py-2 rounded-lg text-sm font-medium hover:bg-gray-50 transition-colors">
                            开始快速复习 (前5题)
                        </button>
                    </div>
                @endif
            </div>

            {{-- 学习进度 --}}
            <div class="bg-white rounded-xl shadow-sm p-6 border border-gray-200">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">学习进度</h3>

                <!-- 掌握度显示 -->
                <div class="mb-6">
                    <div class="flex items-center justify-between mb-2">
                        <span class="text-sm text-gray-600">整体掌握度</span>
                        <span class="text-xs text-gray-500">基于所有知识点平均</span>
                    </div>
                    <div class="relative">
                        <div class="w-full bg-gray-200 rounded-full h-3">
                            @php
                                $masteryRate = $summary['mastery_rate'] ?? 0;
                                $masteryPercentage = $masteryRate * 100;
                            @endphp
                            <div class="bg-indigo-600 h-3 rounded-full transition-all duration-500"
                                 style="width: {{ $masteryPercentage }}%"></div>
                        </div>
                        <p class="text-2xl font-bold text-indigo-600 mt-2 text-center">
                            {{ number_format($masteryPercentage, 0) }}%
                        </p>
                    </div>
                </div>

                <!-- 统计信息 -->
                <div class="space-y-3">
                    <div class="flex items-center justify-between p-3 bg-orange-50 rounded-lg">
                        <span class="text-sm text-gray-600">待复习知识点</span>
                        <span class="text-xl font-bold text-orange-600">{{ $summary['pending_review'] ?? 0 }}</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
                        <span class="text-sm text-gray-600">总错题数</span>
                        <span class="text-xl font-bold text-red-600">{{ $summary['total'] ?? 0 }}</span>
                    </div>
                    <div class="flex items-center justify-between p-3 bg-blue-50 rounded-lg">
                        <span class="text-sm text-gray-600">本周新增</span>
                        <span class="text-xl font-bold text-blue-600">{{ $summary['this_week'] ?? 0 }}</span>
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- 加载状态 --}}
    @if ($isLoading)
        <div class="mb-8">
            <div class="bg-white rounded-xl shadow-sm p-12 border border-gray-200">
                <div class="flex flex-col items-center justify-center">
                    <svg class="animate-spin h-12 w-12 text-indigo-600" fill="none" viewBox="0 0 24 24">
                        <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
                        <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
                    </svg>
                    <p class="mt-4 text-sm text-gray-600">正在加载数据，请稍候...</p>
                </div>
            </div>
        </div>
    @else
        {{-- 主内容区域 --}}
        <div class="grid grid-cols-1 gap-6 xl:grid-cols-4">
            {{-- 左侧筛选 --}}
            <div class="xl:col-span-1">
                <div class="bg-white shadow-sm rounded-xl border border-gray-200 sticky top-4">
                    <div class="px-6 py-5 border-b border-gray-100">
                        <div class="flex items-center justify-between">
                            <h3 class="text-lg font-semibold text-gray-900">筛选条件</h3>
                            @if(!empty($filters['error_types']) || !empty($filters['kp_ids']) || !empty($filters['skill_ids']))
                                <button wire:click="clearFilters"
                                    class="text-sm text-indigo-600 hover:text-indigo-700 transition-colors">
                                    清除全部
                                </button>
                            @endif
                        </div>
                    </div>
                    <div class="p-6 space-y-6">
                        {{-- 快速排序 --}}
                        <div>
                            <label class="text-sm font-medium text-gray-700 mb-3 block">快速排序</label>
                            <select wire:model.live="filters.sort_by"
                                class="w-full px-3 py-2 text-sm border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-500 focus:border-indigo-500">
                                <option value="created_at_desc">最近错题</option>
                                <option value="urgency_desc">紧急优先</option>
                                <option value="score_asc">得分最低</option>
                                <option value="created_at_asc">最早错题</option>
                            </select>
                        </div>

                        {{-- 正确与否筛选 --}}
                        <div>
                            <label class="text-sm font-medium text-gray-700 mb-3 block">正确情况</label>
                            <div class="space-y-2">
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded-lg hover:bg-gray-50">
                                    <input type="radio" name="correct_filter" value="all"
                                        wire:model="filters.correct_filter"
                                        class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <span class="text-sm text-gray-700">全部题目</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded-lg hover:bg-gray-50">
                                    <input type="radio" name="correct_filter" value="incorrect"
                                        wire:model="filters.correct_filter"
                                        class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <span class="text-sm text-gray-700">仅错误题目</span>
                                </label>
                                <label class="flex items-center gap-3 cursor-pointer p-2 rounded-lg hover:bg-gray-50">
                                    <input type="radio" name="correct_filter" value="correct"
                                        wire:model="filters.correct_filter"
                                        class="w-4 h-4 border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                    <span class="text-sm text-gray-700">仅正确题目</span>
                                </label>
                            </div>
                        </div>

                        {{-- 状态筛选 --}}
                        <div>
                            <label class="text-sm font-medium text-gray-700 mb-3 block">状态</label>
                            <div class="flex gap-2">
                                <button wire:click="toggleFilter('filter', 'unreviewed')"
                                    class="flex-1 px-3 py-2 text-xs font-medium rounded-lg transition-colors
                                        {{ in_array('unreviewed', $filters['filter'] ?? []) ? 'bg-orange-100 text-orange-700 ring-2 ring-orange-200' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                                    未复习
                                </button>
                                <button wire:click="toggleFilter('filter', 'favorite')"
                                    class="flex-1 px-3 py-2 text-xs font-medium rounded-lg transition-colors
                                        {{ in_array('favorite', $filters['filter'] ?? []) ? 'bg-yellow-100 text-yellow-700 ring-2 ring-yellow-200' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                                    已收藏
                                </button>
                            </div>
                        </div>

                        {{-- 时间范围 --}}
                        <div>
                            <label class="text-sm font-medium text-gray-700 mb-3 block">时间范围</label>
                            <div class="grid grid-cols-3 gap-2">
                                <button wire:click="$set('filters.time_range', 'last_7')"
                                    class="px-3 py-2 text-xs font-medium rounded-lg transition-colors {{ $filters['time_range'] === 'last_7' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                                    7天
                                </button>
                                <button wire:click="$set('filters.time_range', 'last_30')"
                                    class="px-3 py-2 text-xs font-medium rounded-lg transition-colors {{ $filters['time_range'] === 'last_30' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                                    30天
                                </button>
                                <button wire:click="$set('filters.time_range', 'all')"
                                    class="px-3 py-2 text-xs font-medium rounded-lg transition-colors {{ $filters['time_range'] === 'all' ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }}">
                                    全部
                                </button>
                            </div>
                        </div>

                        {{-- 错误类型 --}}
                        <div>
                            <label class="text-sm font-medium text-gray-700 mb-3 block">错误类型</label>
                            <div class="space-y-2 max-h-48 overflow-y-auto">
                                @foreach(['计算错误', '概念错误', '方法错误', '审题错误', '步骤缺失', '书写不规范'] as $type)
                                    <label class="flex items-center gap-3 cursor-pointer p-2 rounded-lg hover:bg-gray-50">
                                        <input type="checkbox" value="{{ $type }}" wire:model="filters.error_types"
                                            class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                        <span class="text-sm text-gray-700">{{ $type }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>

                        <!-- 应用筛选按钮 -->
                        <div class="pt-4 border-t border-gray-100 space-y-2">
                            <button wire:click="applyFilters"
                                class="w-full px-4 py-2.5 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
                                应用筛选
                            </button>
                            <button wire:click="resetFilters"
                                class="w-full px-4 py-2 bg-gray-100 text-gray-700 text-sm font-medium rounded-lg hover:bg-gray-200 transition-colors">
                                重置
                            </button>
                        </div>
                    </div>
                </div>
            </div>

            {{-- 右侧错题列表 --}}
            <div class="xl:col-span-3 space-y-6">
                {{-- 错题列表 --}}
                <div class="bg-white shadow-sm rounded-xl border border-gray-200">
                    <div class="px-6 py-5 border-b border-gray-100 flex items-center justify-between">
                        <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                            <svg class="w-5 h-5 mr-2 text-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"></path>
                            </svg>
                            错题列表 ({{ $total }})
                        </h3>
                        <div class="flex items-center gap-3">
                            @if(!empty($selectedMistakeIds))
                                <div class="flex items-center gap-2">
                                    <button wire:click="generatePracticeFromSelection"
                                        class="inline-flex items-center px-4 py-2 bg-green-600 text-white text-sm font-medium rounded-lg hover:bg-green-700 transition-colors">
                                        生成练习 ({{ count($selectedMistakeIds) }})
                                    </button>
                                    <button wire:click="batchMarkReviewed"
                                        class="inline-flex items-center px-4 py-2 bg-blue-600 text-white text-sm font-medium rounded-lg hover:bg-blue-700 transition-colors">
                                        批量标记已复习
                                    </button>
                                </div>
                            @endif
                            @if(!empty($mistakes) && empty($selectedMistakeIds))
                                <button wire:click="startQuickReview"
                                    class="inline-flex items-center px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-lg hover:bg-indigo-700 transition-colors">
                                    <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                    </svg>
                                    快速复习 (前5题)
                                </button>
                            @endif
                        </div>
                    </div>

                    <div class="p-6">
                        @if(empty($mistakes))
                            <div class="text-center py-12">
                                <svg class="w-16 h-16 mx-auto text-gray-300 mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
                                </svg>
                                <p class="text-sm font-medium text-gray-900 mb-1">暂无错题数据</p>
                                <p class="text-xs text-gray-500">请先选择学生后刷新数据</p>
                            </div>
                        @else
                            <div class="space-y-4">
                                @foreach($mistakes as $mistake)
                                    @php
                                        $urgency = 'normal';
                                        if($mistake['created_at']) {
                                            $daysSince = \Carbon\Carbon::parse($mistake['created_at'])->diffInDays(now());
                                            $urgency = $daysSince > 7 ? 'high' : ($daysSince > 3 ? 'medium' : 'low');
                                        }
                                    @endphp
                                    <div class="group border {{ $urgency === 'high' ? 'border-red-200 bg-red-50/30' : ($urgency === 'medium' ? 'border-yellow-200 bg-yellow-50/20' : 'border-gray-200') }} rounded-xl hover:shadow-lg transition-all duration-200" wire:key="m-{{ $mistake['id'] ?? $loop->index }}">
                                        {{-- 错题卡片头部 - 紧凑布局 --}}
                                        <div class="p-4">
                                            <div class="flex items-start gap-3">
                                                {{-- 复选框和紧急度指示器 --}}
                                                <div class="flex items-center gap-2 pt-1">
                                                    @if($urgency !== 'normal')
                                                        <span class="w-2 h-2 rounded-full
                                                            @if($urgency === 'high') bg-red-500
                                                            @elseif($urgency === 'medium') bg-yellow-500
                                                            @endif
                                                            animate-pulse" title="{{ $urgency === 'high' ? '急需复习' : '建议复习' }}"></span>
                                                    @endif
                                                    <input type="checkbox"
                                                        wire:click="toggleSelection('{{ $mistake['id'] ?? '' }}')"
                                                        @checked(in_array($mistake['id'] ?? '', $selectedMistakeIds, true))
                                                        class="w-4 h-4 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">
                                                </div>

                                                {{-- 主要信息区域 --}}
                                                <div class="flex-1 min-w-0">
                                                    <!-- 顶部信息行 -->
                                                    <div class="flex items-center justify-between mb-2">
                                                        <div class="flex items-center gap-2">
                                                            <span class="text-xs font-mono text-gray-500">#{{ $mistake['id'] ?? '' }}</span>
                                                            @if(!empty($mistake['question']['question_number']))
                                                                <span class="inline-flex items-center px-2 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                                    第{{ $mistake['question']['question_number'] }}题
                                                                </span>
                                                            @endif
                                                            <!-- 得分率已移除 -->
                                                        </div>
                                                        <div class="flex items-center gap-2">
                                                            @php
                                                                $createdAt = $mistake['created_at'] ?? null;
                                                                if ($createdAt) {
                                                                    try {
                                                                        $date = \Carbon\Carbon::parse($createdAt);
                                                                        echo '<span class="text-xs text-gray-500">' . $date->diffForHumans() . '</span>';
                                                                    } catch (\Exception $e) {
                                                                        echo '<span class="text-xs text-gray-500">' . $createdAt . '</span>';
                                                                    }
                                                                }
                                                            @endphp
                                                            <!-- 快速操作按钮 -->
                                                            <div class="flex items-center gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
                                                                <button wire:click="toggleFavorite('{{ $mistake['id'] ?? '' }}')"
                                                                    class="p-1.5 rounded hover:bg-gray-100 transition-colors"
                                                                    title="{{ !empty($mistake['favorite']) ? '取消收藏' : '收藏' }}">
                                                                    <svg class="w-4 h-4 {{ !empty($mistake['favorite']) ? 'text-yellow-500 fill-current' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                                                                    </svg>
                                                                </button>
                                                                <button wire:click="markReviewed('{{ $mistake['id'] ?? '' }}')"
                                                                    class="p-1.5 rounded hover:bg-gray-100 transition-colors"
                                                                    title="{{ !empty($mistake['reviewed']) ? '取消复习标记' : '标记为已复习' }}">
                                                                    <svg class="w-4 h-4 {{ !empty($mistake['reviewed']) ? 'text-green-500 fill-current' : 'text-gray-400' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                                    </svg>
                                                                </button>
                                                            </div>
                                                        </div>
                                                    </div>

                                                    <!-- 题目预览 -->
                                                    @if(!empty($mistake['question']['stem']))
                                                    <div class="mb-3">
                                                        <p class="text-sm text-gray-900 line-clamp-2 leading-relaxed">
                                                            {{ \Illuminate\Support\Str::limit(strip_tags($mistake['question']['stem']), 150) }}
                                                        </p>
                                                    </div>
                                                    @endif

                                                    <!-- 标签行 -->
                                                    <div class="flex flex-wrap items-center gap-1.5 mb-3">
                                                        @if(!empty($mistake['question']['kp_code']))
                                                            <a href="{{ url('/admin/knowledge-point-detail') }}?kp_code={{ urlencode($mistake['question']['kp_code']) }}"
                                                               class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-700 hover:bg-indigo-200 transition-colors">
                                                                {{ $knowledgePointOptions[$mistake['question']['kp_code']] ?? $mistake['question']['kp_code'] }}
                                                            </a>
                                                        @endif
                                                        @if(!empty($mistake['error_type']))
                                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700">
                                                                {{ $mistake['error_type'] }}
                                                            </span>
                                                        @endif
                                                        @if(!empty($mistake['mistake_category']))
                                                            <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-orange-100 text-orange-700">
                                                                {{ $mistake['mistake_category'] }}
                                                            </span>
                                                        @endif
                                                        @php
                                                            $skillIds = $mistake['skill_ids'] ?? [];
                                                            if (is_array($skillIds) && !empty($skillIds)) {
                                                                $validSkills = array_filter($skillIds, function($id) {
                                                                    return $id && $id !== '无' && $id !== 'none' && $id !== null;
                                                                });
                                                                if (!empty($validSkills)) {
                                                                    foreach(array_slice($validSkills, 0, 2) as $skillId):
                                                        ?>
                                                                    <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-teal-100 text-teal-700">
                                                                        {{ $skillId }}
                                                                    </span>
                                                        @php
                                                                    endforeach;
                                                                }
                                                            }
                                                        ?>
                                                    </div>

                                                    <!-- 作答对比 - 紧凑展示 -->
                                                    <div class="grid grid-cols-2 gap-3 mb-3 text-sm">
                                                        @if(!empty($mistake['student_answer']) && trim($mistake['student_answer']) !== '' && trim($mistake['student_answer']) !== '未作答')
                                                        <div class="bg-red-50 rounded-lg p-3 border border-red-100">
                                                            <p class="text-xs font-medium text-red-600 mb-1 flex items-center">
                                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.498 0L4.316 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                                                                </svg>
                                                                你的答案
                                                            </p>
                                                            <p class="text-gray-900 line-clamp-2">{{ $mistake['student_answer'] }}</p>
                                                        </div>
                                                        @endif

                                                        @if(!empty($mistake['question']['answer']))
                                                        <div class="bg-green-50 rounded-lg p-3 border border-green-100">
                                                            <p class="text-xs font-medium text-green-600 mb-1 flex items-center">
                                                                <svg class="w-3 h-3 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                                                </svg>
                                                                正确答案
                                                            </p>
                                                            <p class="text-gray-900 line-clamp-2">{{ $mistake['question']['answer'] }}</p>
                                                        </div>
                                                        @endif
                                                    </div>

                                                    <!-- AI分析预览 -->
                                                    @if(!empty($mistake['ai_analysis']['reason']))
                                                        <div class="bg-amber-50 rounded-lg p-3 border border-amber-100">
                                                            <p class="text-xs font-medium text-amber-700 mb-1">AI分析</p>
                                                            <p class="text-sm text-gray-700 line-clamp-2">{{ $mistake['ai_analysis']['reason'] }}</p>
                                                        </div>
                                                    @endif
                                                </div>
                                            </div>
                                        </div>

                                        <!-- 展开区域 -->
                                        <details class="border-t border-gray-100">
                                            <summary class="px-4 py-2 text-sm text-gray-600 cursor-pointer hover:bg-gray-50 transition-colors">
                                                查看详情与操作
                                            </summary>
                                            <div class="px-4 pb-4 space-y-4">
                                                <!-- 完整题干 -->
                                                @if(!empty($mistake['question']['stem']))
                                                <div>
                                                    <p class="text-xs font-medium text-gray-500 mb-2">完整题干</p>
                                                    <div class="bg-gray-50 rounded-lg p-3 border border-gray-100">
                                                        <div class="prose prose-sm max-w-none text-gray-900">
                                                            <x-math-render :content="$mistake['question']['stem']" />
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif

                                                <!-- 解题步骤 -->
                                                @if(!empty($mistake['question']['solution']))
                                                <div>
                                                    <p class="text-xs font-medium text-gray-500 mb-2">解题步骤</p>
                                                    <div class="bg-blue-50 rounded-lg p-3 border border-blue-100">
                                                        <div class="prose prose-sm max-w-none text-gray-900">
                                                            {{ $mistake['question']['solution'] }}
                                                        </div>
                                                    </div>
                                                </div>
                                                @endif

                                                <!-- 完整AI分析 -->
                                                @if(!empty($mistake['ai_analysis']['solution']) || !empty($mistake['ai_analysis']['suggestions']))
                                                <div class="bg-amber-50 rounded-lg p-3 border border-amber-100">
                                                    <p class="text-xs font-medium text-amber-700 mb-2">详细分析与建议</p>
                                                    <div class="text-sm text-gray-700 space-y-2">
                                                        @if(!empty($mistake['ai_analysis']['solution']))
                                                            <div>
                                                                <span class="font-medium">解法：</span>
                                                                <p>{{ $mistake['ai_analysis']['solution'] }}</p>
                                                            </div>
                                                        @endif
                                                        @if(!empty($mistake['ai_analysis']['suggestions']))
                                                            <div>
                                                                <span class="font-medium">建议：</span>
                                                                <p>{{ $mistake['ai_analysis']['suggestions'] }}</p>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </div>
                                                @endif

                                                <!-- 操作按钮 -->
                                                <div class="flex flex-wrap gap-2 pt-3 border-t border-gray-100">
                                                    <button wire:click="toggleFavorite('{{ $mistake['id'] ?? '' }}')"
                                                        class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-lg {{ !empty($mistake['favorite']) ? 'bg-yellow-100 text-yellow-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }} transition-colors">
                                                        {{ !empty($mistake['favorite']) ? '★ 已收藏' : '☆ 收藏此题' }}
                                                    </button>
                                                    <button wire:click="markReviewed('{{ $mistake['id'] ?? '' }}')"
                                                        class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-lg {{ !empty($mistake['reviewed']) ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }} transition-colors">
                                                        {{ !empty($mistake['reviewed']) ? '✓ 已复习' : '标记为已复习' }}
                                                    </button>
                                                    <button wire:click="loadRelatedQuestions('{{ $mistake['id'] ?? '' }}')"
                                                        class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-lg bg-indigo-100 text-indigo-700 hover:bg-indigo-200 transition-colors">
                                                        查找相似题
                                                    </button>
                                                    @if(!empty($mistake['answer_area_crop_path']))
                                                        <a href="{{ $mistake['answer_area_crop_path'] }}" target="_blank"
                                                           class="inline-flex items-center px-3 py-1.5 text-sm font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-200 transition-colors">
                                                            查看原始图片
                                                        </a>
                                                    @endif
                                                </div>

                                                <!-- 关联题目 -->
                                                @if(!empty($relatedQuestions[$mistake['id'] ?? ''] ?? []))
                                                    <div class="bg-gray-50 rounded-lg p-3 border border-gray-100">
                                                        <p class="text-xs font-medium text-gray-500 mb-2">推荐练习</p>
                                                        <div class="space-y-2">
                                                            @foreach($relatedQuestions[$mistake['id']] as $related)
                                                                <div class="text-sm p-3 bg-white rounded-lg border border-gray-200 hover:shadow-sm transition-shadow">
                                                                    <p class="text-gray-900 line-clamp-2">{{ $related['stem'] ?? '题目' }}</p>
                                                                    @if(!empty($related['difficulty']))
                                                                        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium
                                                                            @if($related['difficulty'] === 'easy') bg-green-100 text-green-700
                                                                            @elseif($related['difficulty'] === 'medium') bg-yellow-100 text-yellow-700
                                                                            @else bg-red-100 text-red-700
                                                                            @endif mt-2">
                                                                            {{ $related['difficulty'] === 'easy' ? '简单' : ($related['difficulty'] === 'medium' ? '中等' : '困难') }}
                                                                        </span>
                                                                    @endif
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </details>
                                    </div>
                                @endforeach
                            </div>

                            {{-- 分页 --}}
                            @php
                                $maxPage = (int) ceil($total / $perPage);
                            @endphp
                            @if($maxPage > 1)
                            <div class="mt-6 flex items-center justify-between border-t border-gray-100 pt-4">
                                <div class="text-sm text-gray-500">
                                    共 {{ $total }} 条，第 {{ $page }}/{{ $maxPage }} 页
                                </div>
                                <div class="flex items-center gap-2">
                                    <button wire:click="prevPage" @disabled($page <= 1)
                                        class="px-3 py-1.5 text-sm font-medium rounded-lg {{ $page <= 1 ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }} transition-colors">
                                        上一页
                                    </button>
                                    @for($i = max(1, $page - 2); $i <= min($maxPage, $page + 2); $i++)
                                        <button wire:click="gotoPage({{ $i }})"
                                            class="px-3 py-1.5 text-sm font-medium rounded-lg {{ $i === $page ? 'bg-indigo-600 text-white' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }} transition-colors">
                                            {{ $i }}
                                        </button>
                                    @endfor
                                    <button wire:click="nextPage" @disabled($page >= $maxPage)
                                        class="px-3 py-1.5 text-sm font-medium rounded-lg {{ $page >= $maxPage ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : 'bg-gray-100 text-gray-700 hover:bg-gray-200' }} transition-colors">
                                        下一页
                                    </button>
                                </div>
                            </div>
                            @endif
                        @endif
                    </div>
                </div>

                {{-- 推荐练习题 --}}
                @if(!empty($recommendations))
                    <div class="bg-white shadow-sm rounded-xl border border-gray-200">
                        <div class="px-6 py-5 border-b border-gray-100">
                            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                </svg>
                                推荐练习题 ({{ count($recommendations) }})
                            </h3>
                        </div>
                        <div class="p-6">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                @foreach($recommendations as $rec)
                                    <div class="p-4 border border-gray-200 rounded-lg bg-gray-50">
                                        <p class="text-sm text-gray-900 line-clamp-2">{{ $rec['stem'] ?? '推荐题目' }}</p>
                                        @if(!empty($rec['kp_codes']))
                                            <span class="inline-flex items-center mt-2 px-2 py-0.5 rounded text-xs font-medium bg-indigo-100 text-indigo-800">
                                                {{ is_array($rec['kp_codes']) ? implode(',', $rec['kp_codes']) : $rec['kp_codes'] }}
                                            </span>
                                        @endif
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    </div>
                @endif

                {{-- 错误分析与学习建议 --}}
                @if(!empty($patterns['error_types']) || !empty($patterns['top_kps']))
                    <div class="bg-white shadow-sm rounded-xl border border-gray-200">
                        <div class="px-6 py-5 border-b border-gray-100">
                            <h3 class="text-lg font-semibold text-gray-900 flex items-center">
                                <svg class="w-5 h-5 mr-2 text-purple-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z"></path>
                                </svg>
                                错误分析与学习建议
                            </h3>
                        </div>
                        <div class="p-6">
                            @if(!empty($patterns['error_types']) || !empty($patterns['top_kps']))
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-6">
                                    @if(!empty($patterns['error_types']))
                                        <div>
                                            <p class="text-sm font-medium text-gray-900 mb-4 flex items-center">
                                                <svg class="w-4 h-4 mr-2 text-orange-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.728-.833-2.498 0L4.316 16.5c-.77.833.192 2.5 1.732 2.5z"></path>
                                                </svg>
                                                错误类型分布
                                            </p>
                                            <div class="space-y-2">
                                                @php
                                                    $totalErrors = collect($patterns['error_types'])->sum('count');
                                                @endphp
                                                @foreach($patterns['error_types'] as $et)
                                                    @php
                                                        $count = $et['count'] ?? 0;
                                                        $percentage = $totalErrors > 0 ? ($count / $totalErrors * 100) : 0;
                                                    @endphp
                                                    <div class="bg-gray-50 rounded-lg p-3 hover:bg-gray-100 transition-colors">
                                                        <div class="flex items-center justify-between mb-1">
                                                            <span class="text-sm font-medium text-gray-700">{{ $et['type'] ?? '未知错误' }}</span>
                                                            <span class="text-sm text-gray-500">{{ $count }}次 ({{ number_format($percentage, 0) }}%)</span>
                                                        </div>
                                                        <div class="w-full bg-gray-200 rounded-full h-2">
                                                            <div class="bg-orange-500 h-2 rounded-full transition-all duration-500" style="width: {{ $percentage }}%"></div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                    @if(!empty($patterns['top_kps']))
                                        <div>
                                            <p class="text-sm font-medium text-gray-900 mb-4 flex items-center">
                                                <svg class="w-4 h-4 mr-2 text-red-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11.049 2.927c.3-.921 1.603-.921 1.902 0l1.519 4.674a1 1 0 00.95.69h4.915c.969 0 1.371 1.24.588 1.81l-3.976 2.888a1 1 0 00-.363 1.118l1.518 4.674c.3.922-.755 1.688-1.538 1.118l-3.976-2.888a1 1 0 00-1.176 0l-3.976 2.888c-.783.57-1.838-.197-1.538-1.118l1.518-4.674a1 1 0 00-.363-1.118l-3.976-2.888c-.784-.57-.38-1.81.588-1.81h4.914a1 1 0 00.951-.69l1.519-4.674z"></path>
                                                </svg>
                                                薄弱知识点
                                            </p>
                                            <div class="space-y-2">
                                                @php
                                                    $maxMistakes = collect($patterns['top_kps'])->max('mistake_count') ?: 1;
                                                @endphp
                                                @foreach($patterns['top_kps'] as $kp)
                                                    @php
                                                        $count = $kp['mistake_count'] ?? 0;
                                                        $width = ($count / $maxMistakes) * 100;
                                                    @endphp
                                                    <div class="bg-red-50 rounded-lg p-3 hover:bg-red-100 transition-colors">
                                                        <div class="flex items-center justify-between mb-1">
                                                            <span class="text-sm font-medium text-gray-700">{{ $kp['name'] ?? $kp['kp_code'] ?? '知识点' }}</span>
                                                            <span class="text-sm text-red-600">{{ $count }}题</span>
                                                        </div>
                                                        <div class="w-full bg-red-200 rounded-full h-2">
                                                            <div class="bg-red-500 h-2 rounded-full transition-all duration-500" style="width: {{ $width }}%"></div>
                                                        </div>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endif

                            <!-- 学习建议卡片 -->
                            <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-xl p-6 border border-blue-100">
                                <h4 class="text-lg font-semibold text-gray-900 mb-4 flex items-center">
                                    <svg class="w-5 h-5 mr-2 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    学习建议
                                </h4>
                                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                                    <div class="flex items-start">
                                        <span class="flex-shrink-0 w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-xs font-medium mr-3">1</span>
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">优先复习高错频知识点</p>
                                            <p class="text-xs text-gray-600 mt-1">集中练习错误次数最多的3个知识点</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <span class="flex-shrink-0 w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-xs font-medium mr-3">2</span>
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">制定复习计划</p>
                                            <p class="text-xs text-gray-600 mt-1">建议每天复习5-10道错题，形成规律</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <span class="flex-shrink-0 w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-xs font-medium mr-3">3</span>
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">重点突破错误类型</p>
                                            <p class="text-xs text-gray-600 mt-1">针对主要错误类型进行专项练习</p>
                                        </div>
                                    </div>
                                    <div class="flex items-start">
                                        <span class="flex-shrink-0 w-6 h-6 bg-green-100 text-green-600 rounded-full flex items-center justify-center text-xs font-medium mr-3">4</span>
                                        <div>
                                            <p class="text-sm font-medium text-gray-900">定期回顾与测试</p>
                                            <p class="text-xs text-gray-600 mt-1">每周回顾本周错题，检验掌握程度</p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    @endif
</div>