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

<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 sm:grid-cols-2 lg:grid-cols-4">
            <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-200 hover:shadow-md transition-shadow duration-200">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-indigo-500 to-indigo-600 rounded-xl flex items-center justify-center shadow-lg">
                            <span class="text-white font-bold">总</span>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">总错题</p>
                            <p class="text-2xl font-bold text-gray-900 mt-1">{{ $summary['total'] ?? 0 }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-200 hover:shadow-md transition-shadow duration-200">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-blue-500 to-blue-600 rounded-xl flex items-center justify-center shadow-lg">
                            <span class="text-white font-bold">周</span>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">本周新增</p>
                            <p class="text-2xl font-bold text-gray-900 mt-1">{{ $summary['this_week'] ?? 0 }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-200 hover:shadow-md transition-shadow duration-200">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-yellow-500 to-orange-500 rounded-xl flex items-center justify-center shadow-lg">
                            <span class="text-white font-bold">待</span>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">待复习</p>
                            <p class="text-2xl font-bold text-orange-600 mt-1">{{ $summary['pending_review'] ?? 0 }}</p>
                        </div>
                    </div>
                </div>
            </div>
            <div class="bg-white overflow-hidden shadow-sm rounded-xl border border-gray-200 hover:shadow-md transition-shadow duration-200">
                <div class="p-6">
                    <div class="flex items-center">
                        <div class="w-12 h-12 bg-gradient-to-br from-green-500 to-green-600 rounded-xl flex items-center justify-center shadow-lg">
                            <span class="text-white font-bold">%</span>
                        </div>
                        <div class="ml-4">
                            <p class="text-sm font-medium text-gray-600">掌握率</p>
                            @php $rate = $summary['mastery_rate'] ?? null; @endphp
                            <p class="text-2xl font-bold text-green-600 mt-1">{{ $rate !== null ? number_format($rate * 100, 1) . '%' : '--' }}</p>
                        </div>
                    </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">
                        <h3 class="text-lg font-semibold text-gray-900">筛选条件</h3>
                    </div>
                    <div class="p-6 space-y-6">
                        {{-- 时间范围 --}}
                        <div>
                            <label class="text-sm font-medium text-gray-700 mb-3 block">时间范围</label>
                            <div class="flex gap-2">
                                <button wire:click="$set('filters.time_range', 'last_7')"
                                    class="flex-1 px-4 py-2 text-sm 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="flex-1 px-4 py-2 text-sm 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>
                            </div>
                        </div>

                        {{-- 错误类型 --}}
                        <div>
                            <label class="text-sm font-medium text-gray-700 mb-3 block">错误类型</label>
                            <div class="space-y-2">
                                @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>

                        <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>
                    </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))
                                <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>
                            @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)
                                    <div class="border border-gray-200 rounded-xl p-5 hover:border-gray-300 transition-colors" wire:key="m-{{ $mistake['id'] ?? $loop->index }}">
                                        {{-- 头部 --}}
                                        <div class="flex items-start gap-4">
                                            <input type="checkbox"
                                                wire:click="toggleSelection('{{ $mistake['id'] ?? '' }}')"
                                                @checked(in_array($mistake['id'] ?? '', $selectedMistakeIds, true))
                                                class="mt-1 w-5 h-5 rounded border-gray-300 text-indigo-600 focus:ring-indigo-500">

                                            <div class="flex-1 min-w-0">
                                                {{-- 标签行 --}}
                                                <div class="flex flex-wrap items-center gap-2 mb-4">
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-100 text-gray-800">
                                                        #{{ $mistake['id'] ?? '' }}
                                                    </span>
                                                    @if(!empty($mistake['question']['question_number']))
                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                                            第{{ $mistake['question']['question_number'] }}题
                                                        </span>
                                                    @endif
                                                    <span class="text-xs text-gray-500">
                                                        @php
                                                            $createdAt = $mistake['created_at'] ?? null;
                                                            if ($createdAt) {
                                                                try {
                                                                    $date = \Carbon\Carbon::parse($createdAt);
                                                                    echo $date->format('Y-m-d H:i');
                                                                } catch (\Exception $e) {
                                                                    echo $createdAt;
                                                                }
                                                            }
                                                        @endphp
                                                    </span>
                                                    @if(!empty($mistake['error_type']))
                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                                            {{ $mistake['error_type'] }}
                                                        </span>
                                                    @endif
                                                    @if(!empty($mistake['mistake_category']))
                                                        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                                            {{ $mistake['mistake_category'] }}
                                                        </span>
                                                    @endif
                                                </div>

                                                {{-- 题干 --}}
                                                @if(!empty($mistake['question']['stem']))
                                                <div class="bg-gray-50 rounded-lg p-4 mb-4 border border-gray-100">
                                                    <p class="text-xs font-medium text-gray-500 mb-2">题干</p>
                                                    <div class="prose prose-sm max-w-none text-gray-900">
                                                        <x-math-render :content="$mistake['question']['stem']" />
                                                    </div>
                                                </div>
                                                @endif

                                                {{-- 判卷结果 + 知识点 --}}
                                                <div class="flex flex-wrap items-center gap-3 mb-4">
                                                    @if(!empty($mistake['mark_detected']))
                                                        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium {{ $mistake['mark_detected'] === '✓' || $mistake['mark_detected'] === '√' ? 'bg-green-100 text-green-800' : 'bg-red-100 text-red-800' }}">
                                                            老师判卷: {{ $mistake['mark_detected'] }}
                                                        </span>
                                                    @endif
                                                    @if(isset($mistake['score']) && isset($mistake['full_score']))
                                                        @php
                                                            $score = floatval($mistake['score'] ?? 0);
                                                            $fullScore = floatval($mistake['full_score'] ?? 0);
                                                            $isFullScore = $fullScore > 0 && $score >= $fullScore;
                                                        @endphp
                                                        <span class="inline-flex items-center px-3 py-1.5 rounded-lg text-sm font-medium {{ $isFullScore ? 'bg-green-100 text-green-800' : 'bg-blue-100 text-blue-800' }}">
                                                            得分: {{ $mistake['score'] }}/{{ $mistake['full_score'] }}
                                                            @if($isFullScore)
                                                                ✓
                                                            @endif
                                                        </span>
                                                    @endif
                                                    @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-3 py-1.5 rounded-lg text-sm font-medium bg-indigo-100 text-indigo-800 hover:bg-indigo-200 transition-colors">
                                                            知识点: {{ $mistake['question']['kp_code'] }}
                                                        </a>
                                                    @endif
                                                    @if(!empty($mistake['skill_ids']))
                                                        @foreach($mistake['skill_ids'] as $skillId)
                                                            <span class="inline-flex items-center px-2 py-1 rounded text-xs font-medium bg-teal-100 text-teal-800">
                                                                {{ $skillId }}
                                                            </span>
                                                        @endforeach
                                                    @endif
                                                </div>

                                                {{-- 作答对比与解题步骤 --}}
                                                <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">
                                                    @if(!empty($mistake['student_answer']) && trim($mistake['student_answer']) !== '' && trim($mistake['student_answer']) !== '未作答')
                                                    <div class="bg-red-50 rounded-lg p-4 border border-red-100">
                                                        <p class="text-xs font-medium text-red-600 mb-2">
                                                            学生作答
                                                            @if(!empty($mistake['answer_confidence']))
                                                                <span class="text-gray-400">(置信度: {{ number_format($mistake['answer_confidence'] * 100, 1) }}%)</span>
                                                            @endif
                                                        </p>
                                                        <p class="text-sm text-gray-900">{{ $mistake['student_answer'] }}</p>
                                                    </div>
                                                    @elseif(!empty($mistake['mark_detected']) && trim($mistake['student_answer']) === '未作答')
                                                    {{-- 老师已评分但学生未作答的题目，不显示学生作答区域 --}}
                                                    @elseif(!empty($mistake['student_answer']) && trim($mistake['student_answer']) !== '')
                                                    <div class="bg-red-50 rounded-lg p-4 border border-red-100">
                                                        <p class="text-xs font-medium text-red-600 mb-2">
                                                            学生作答
                                                            @if(!empty($mistake['answer_confidence']))
                                                                <span class="text-gray-400">(置信度: {{ number_format($mistake['answer_confidence'] * 100, 1) }}%)</span>
                                                            @endif
                                                        </p>
                                                        <p class="text-sm text-gray-900">{{ $mistake['student_answer'] }}</p>
                                                    </div>
                                                    @endif

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

                                                    @if(!empty($mistake['question']['answer']))
                                                    <div class="bg-green-50 rounded-lg p-4 border border-green-100">
                                                        <p class="text-xs font-medium text-green-600 mb-2">正确答案</p>
                                                        <p class="text-sm text-gray-900">{{ $mistake['question']['answer'] }}</p>
                                                    </div>
                                                    @endif
                                                </div>

                                                {{-- AI分析 --}}
                                                @if(!empty($mistake['ai_analysis']['reason']) || !empty($mistake['ai_analysis']['solution']) || !empty($mistake['ai_analysis']['suggestions']))
                                                <details class="bg-amber-50 rounded-lg border border-amber-100 mb-4">
                                                    <summary class="px-4 py-3 text-sm font-medium text-amber-800 cursor-pointer hover:bg-amber-100 rounded-lg transition-colors">
                                                        查看AI分析
                                                        @if(!empty($mistake['ai_analysis']['model_used']))
                                                            <span class="text-xs text-gray-500 ml-2">({{ $mistake['ai_analysis']['model_used'] }})</span>
                                                        @endif
                                                    </summary>
                                                    <div class="px-4 pb-4 text-sm text-gray-700 space-y-2">
                                                        @if(!empty($mistake['ai_analysis']['reason']))
                                                            <p><span class="font-medium text-gray-900">错因：</span>{{ $mistake['ai_analysis']['reason'] }}</p>
                                                        @endif
                                                        @if(!empty($mistake['ai_analysis']['solution']))
                                                            <p><span class="font-medium text-gray-900">解法：</span>{{ $mistake['ai_analysis']['solution'] }}</p>
                                                        @endif
                                                        @if(!empty($mistake['ai_analysis']['suggestions']))
                                                            <p><span class="font-medium text-gray-900">建议：</span>{{ $mistake['ai_analysis']['suggestions'] }}</p>
                                                        @endif
                                                        @if(!empty($mistake['ai_analysis']['next_steps']))
                                                            <div>
                                                                <span class="font-medium text-gray-900">下一步：</span>
                                                                <ul class="list-disc list-inside mt-1">
                                                                    @foreach($mistake['ai_analysis']['next_steps'] as $step)
                                                                        <li>{{ is_array($step) ? json_encode($step) : $step }}</li>
                                                                    @endforeach
                                                                </ul>
                                                            </div>
                                                        @endif
                                                    </div>
                                                </details>
                                                @endif

                                                {{-- 操作按钮 --}}
                                                <div class="flex flex-wrap gap-2 pt-4 border-t border-gray-100">
                                                    <button wire:click="toggleFavorite('{{ $mistake['id'] ?? '' }}')"
                                                        class="inline-flex items-center px-3 py-1.5 text-xs 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-xs 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-xs font-medium rounded-lg bg-gray-100 text-gray-700 hover:bg-gray-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-xs 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="mt-4 bg-gray-50 rounded-lg p-4 border border-gray-100">
                                                        <p class="text-xs font-medium text-gray-500 mb-3">关联题目</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">
                                                                    <p class="text-gray-900 line-clamp-2">{{ $related['stem'] ?? '题目' }}</p>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                @endif
                                            </div>
                                        </div>
                                    </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">
                            <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                                @if(!empty($patterns['error_types']))
                                    <div>
                                        <p class="text-sm font-medium text-gray-900 mb-4">错误类型分布</p>
                                        <div class="space-y-3">
                                            @foreach($patterns['error_types'] as $et)
                                                <div class="flex items-center justify-between p-3 bg-gray-50 rounded-lg">
                                                    <span class="text-sm text-gray-700">{{ $et['type'] ?? '未知' }}</span>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-gray-200 text-gray-800">
                                                        {{ $et['count'] ?? 0 }}
                                                    </span>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                                @if(!empty($patterns['top_kps']))
                                    <div>
                                        <p class="text-sm font-medium text-gray-900 mb-4">薄弱知识点</p>
                                        <div class="space-y-3">
                                            @foreach($patterns['top_kps'] as $kp)
                                                <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
                                                    <span class="text-sm text-gray-700">{{ $kp['name'] ?? $kp['kp_code'] ?? '知识点' }}</span>
                                                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-red-100 text-red-800">
                                                        {{ $kp['mistake_count'] ?? 0 }}
                                                    </span>
                                                </div>
                                            @endforeach
                                        </div>
                                    </div>
                                @endif
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>
    @endif
</div>