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

<div class="min-h-screen bg-[#f5f7fb] p-6">
    <div class="max-w-7xl mx-auto space-y-6">
        <div class="rounded-2xl bg-gradient-to-r from-sky-50 via-white to-indigo-50 border border-slate-100 shadow-sm p-6">
            <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                <div class="lg:col-span-1">
                    <p class="text-xs uppercase tracking-[0.2em] text-slate-400">MistakeBook</p>
                    <h1 class="text-3xl font-bold text-slate-900 mt-1">错题本 · 诊断与重练</h1>
                    <p class="text-sm text-slate-500 mt-1">完全复用上传卷子/智能出卷的师生联动：先选老师，再选学生，再刷新数据。</p>
                </div>
                <div class="lg:col-span-2">
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
                        {{-- 选择老师（老师登录时隐藏） --}}
                        @if(!$this->isTeacher)
                        <div class="form-control w-full">
                            <label class="label">
                                <span class="label-text font-medium">选择老师 <span class="text-error">*</span></span>
                            </label>
                            <select
                                wire:model.live="teacherId"
                                class="select select-bordered w-full select-lg"
                            >
                                <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">
                            <label class="label">
                                <span class="label-text font-medium">选择学生 <span class="text-error">*</span></span>
                            </label>
                            <select
                                wire:model.live="studentId"
                                class="select select-bordered w-full select-lg"
                                @if(empty($teacherId)) disabled @endif
                            >
                                <option value="">
                                    @if(empty($teacherId))
                                        请先选择老师
                                    @else
                                        请选择学生...
                                    @endif
                                </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>
                    <div class="mt-3 flex items-center justify-between">
                        <div class="text-xs text-slate-500">按照上传卷子/智能出卷同款逻辑联动师生</div>
                        <button
                            wire:click="loadMistakeData"
                            class="btn btn-primary btn-md"
                        >
                            <span wire:loading.remove>刷新</span>
                            <span wire:loading class="loading loading-spinner loading-xs"></span>
                        </button>
                    </div>
                </div>
            </div>
        </div>

        @if ($actionMessage)
            <div class="alert {{ $actionMessageType === 'danger' ? 'alert-error' : ($actionMessageType === 'warning' ? 'alert-warning' : 'alert-success') }} shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <span>{{ $actionMessage }}</span>
            </div>
        @endif

        @if ($errorMessage)
            <div class="alert alert-error shadow-sm">
                <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-6 w-6" fill="none" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                    <h3 class="font-bold">加载失败</h3>
                    <div class="text-xs">{{ $errorMessage }}</div>
                </div>
            </div>
        @endif

        <div class="grid grid-cols-1 lg:grid-cols-4 gap-4">
            <div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-5 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-sky-100 text-sky-600 flex items-center justify-center font-semibold">总</div>
                <div>
                    <p class="text-xs text-slate-500">总错题</p>
                    <p class="text-3xl font-bold text-slate-900">{{ $summary['total'] ?? 0 }}</p>
                </div>
            </div>
            <div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-5 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-indigo-100 text-indigo-600 flex items-center justify-center font-semibold">7d</div>
                <div>
                    <p class="text-xs text-slate-500">本周错题</p>
                    <p class="text-3xl font-bold text-slate-900">{{ $summary['this_week'] ?? 0 }}</p>
                </div>
            </div>
            <div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-5 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-amber-100 text-amber-600 flex items-center justify-center font-semibold">待</div>
                <div>
                    <p class="text-xs text-slate-500">待复习</p>
                    <p class="text-3xl font-bold text-amber-600">{{ $summary['pending_review'] ?? 0 }}</p>
                </div>
            </div>
            <div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-5 flex items-center gap-3">
                <div class="w-10 h-10 rounded-full bg-emerald-100 text-emerald-600 flex items-center justify-center font-semibold">AI</div>
                <div class="flex-1">
                    <p class="text-xs text-slate-500">掌握率</p>
                    @php $masteryRate = $summary['mastery_rate'] ?? null; @endphp
                    <p class="text-3xl font-bold text-emerald-700">
                        {{ $masteryRate !== null ? number_format($masteryRate * 100, 1) . '%' : '--' }}
                    </p>
                    <div class="mt-1 h-2 bg-slate-200 rounded-full overflow-hidden">
                        <div class="h-2 bg-emerald-500" style="width: {{ $masteryRate ? $masteryRate * 100 : 0 }}%"></div>
                    </div>
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-12 gap-6">
            <div class="lg:col-span-4 space-y-4">
                <div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-5 space-y-4">
                    <div class="flex items-center justify-between">
                        <h3 class="font-semibold text-slate-900">多维筛选</h3>
                        <button class="btn btn-primary btn-sm" wire:click="applyFilters">应用</button>
                    </div>
                    <div class="space-y-3">
                        <div class="form-control">
                            <label class="label pb-1">
                                <span class="label-text font-medium text-slate-800">知识点</span>
                                <span class="text-xs text-slate-400">多选</span>
                            </label>
                            <select
                                multiple
                                size="6"
                                wire:model="filters.kp_ids"
                                class="select select-bordered w-full bg-white"
                            >
                                @foreach($filterOptions['knowledge_points'] as $kp)
                                    <option value="{{ $kp['code'] }}">{{ $kp['name'] }} ({{ $kp['code'] }})</option>
                                @endforeach
                            </select>
                        </div>
                        <div class="form-control">
                            <label class="label pb-1">
                                <span class="label-text font-medium text-slate-800">技能</span>
                                <span class="text-xs text-slate-400">联动</span>
                            </label>
                            @php
                                $selectedKps = $filters['kp_ids'] ?? [];
                                $skillOptions = collect($filterOptions['skills'] ?? [])
                                    ->when(!empty($selectedKps), function($c) use ($selectedKps) {
                                        return $c->filter(fn($item) => empty($item['kp_code']) || in_array($item['kp_code'], $selectedKps));
                                    })
                                    ->values()
                                    ->all();
                            @endphp
                            <select
                                multiple
                                size="6"
                                wire:model="filters.skill_ids"
                                class="select select-bordered w-full bg-white"
                            >
                                @foreach($skillOptions as $skill)
                                    <option value="{{ $skill['id'] }}">
                                        {{ $skill['name'] ?? $skill['id'] }}
                                        @if(!empty($skill['kp_code']))
                                            · {{ $skill['kp_code'] }}
                                        @endif
                                    </option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <p class="label-text font-medium mb-2">错误类型</p>
                            <div class="grid grid-cols-2 gap-2">
                                @foreach(['计算错误', '概念错误', '方法错误', '审题错误', '表达错误'] as $type)
                                    <label class="flex items-center gap-2 rounded-lg px-2 py-1 bg-slate-50 border border-slate-200">
                                        <input
                                            type="checkbox"
                                            class="checkbox checkbox-sm checkbox-primary"
                                            value="{{ $type }}"
                                            wire:model="filters.error_types"
                                        >
                                        <span class="text-sm text-slate-700">{{ $type }}</span>
                                    </label>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <p class="label-text font-medium mb-2">时间范围</p>
                            <div class="grid grid-cols-3 gap-2">
                                <button class="btn btn-sm {{ $filters['time_range'] === 'last_7' ? 'btn-primary' : 'btn-outline' }}" wire:click="$set('filters.time_range', 'last_7')">7天</button>
                                <button class="btn btn-sm {{ $filters['time_range'] === 'last_30' ? 'btn-primary' : 'btn-outline' }}" wire:click="$set('filters.time_range', 'last_30')">30天</button>
                                <button class="btn btn-sm {{ $filters['time_range'] === 'custom' ? 'btn-primary' : 'btn-outline' }}" wire:click="$set('filters.time_range', 'custom')">自定义</button>
                            </div>
                            @if($filters['time_range'] === 'custom')
                                <div class="mt-3 space-y-2">
                                    <input type="date" class="input input-bordered w-full" wire:model="filters.start_date">
                                    <input type="date" class="input input-bordered w-full" wire:model="filters.end_date">
                                    <button class="btn btn-ghost btn-xs" wire:click="clearCustomRange">清空</button>
                                </div>
                            @endif
                        </div>
                        <button
                            wire:click="applyFilters"
                            class="btn btn-primary btn-md w-full"
                        >
                            <span wire:loading.remove>应用筛选</span>
                            <span wire:loading class="loading loading-spinner"></span>
                        </button>
                    </div>
                </div>

                <div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-5 space-y-3">
                    <div class="flex items-center justify-between">
                        <h3 class="font-semibold text-slate-900">推荐补救路径</h3>
                        <button class="btn btn-ghost btn-sm text-indigo-600" wire:click="refreshPatterns">刷新</button>
                    </div>
                    @if(!empty($patterns['recommend_path']))
                        <ul class="timeline timeline-vertical">
                            @foreach($patterns['recommend_path'] as $step)
                                <li>
                                    <div class="timeline-middle">
                                        <div class="w-2.5 h-2.5 rounded-full bg-indigo-500"></div>
                                    </div>
                                    <div class="timeline-end timeline-box bg-white border border-indigo-100 text-sm text-slate-700">
                                        {{ $step['title'] ?? ($step['kp'] ?? '学习步骤') }}
                                        @if(!empty($step['description']))
                                            <p class="text-xs text-slate-500 mt-1">{{ $step['description'] }}</p>
                                        @endif
                                    </div>
                                    <hr class="bg-indigo-200"/>
                                </li>
                            @endforeach
                        </ul>
                    @else
                        <p class="text-sm text-slate-500">暂无推荐路径，稍后重试</p>
                    @endif
                </div>
            </div>

            <div class="lg:col-span-8 space-y-5">
                <div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-5">
                    <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <h3 class="text-lg font-semibold text-slate-900">错题列表</h3>
                            <p class="text-sm text-slate-500">题干、作答、AI 解析与操作</p>
                        </div>
                        <div class="flex flex-wrap gap-2 items-center">
                            <button class="btn btn-md btn-secondary" wire:click="generatePracticeFromSelection">
                                📚 基于错题生成练习
                            </button>
                            <div class="badge badge-outline">
                                已选 {{ count($selectedMistakeIds) }} / {{ count($mistakes) }}
                            </div>
                        </div>
                    </div>

                    @if ($isLoading)
                        <div class="flex items-center justify-center py-10 text-slate-500">
                            <span class="loading loading-spinner loading-lg mr-3"></span>
                            正在加载错题...
                        </div>
                    @elseif(empty($mistakes))
                        <div class="text-center py-12 text-slate-500">
                            <svg class="mx-auto h-12 w-12 text-slate-300" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6l4 2m6-2a9 9 0 11-18 0 9 9 0 0118 0z" />
                            </svg>
                            <p class="mt-3">暂无错题，先选择老师和学生</p>
                        </div>
                    @else
                        <div class="space-y-4 mt-4">
                            @foreach($mistakes as $mistake)
                                <div class="rounded-xl border border-slate-200 bg-white shadow-sm p-4 space-y-4" wire:key="mistake-{{ $mistake['id'] ?? $loop->index }}">
                                    <div class="flex flex-col gap-3 md:flex-row md:items-start md:justify-between">
                                        <div class="flex items-center gap-3">
                                            <input
                                                type="checkbox"
                                                class="checkbox checkbox-primary"
                                                wire:click="toggleSelection('{{ $mistake['id'] ?? '' }}')"
                                                @checked(in_array($mistake['id'] ?? '', $selectedMistakeIds, true))
                                            >
                                            <div>
                                                <p class="text-xs text-slate-400">{{ $mistake['id'] ?? 'ID' }}</p>
                                                <p class="text-sm text-slate-500">
                                                    {{ $mistake['created_at'] ?? '' }}
                                                </p>
                                            </div>
                                        </div>
                                        <div class="flex flex-wrap gap-2">
                                            @foreach(($mistake['kp_ids'] ?? []) as $kp)
                                                <span class="badge badge-ghost">KP {{ $kp }}</span>
                                            @endforeach
                                            @foreach(($mistake['skill_ids'] ?? []) as $skill)
                                                <span class="badge badge-outline badge-info">{{ $skill }}</span>
                                            @endforeach
                                            @if(!empty($mistake['error_type']))
                                                <span class="badge badge-warning badge-outline">{{ $mistake['error_type'] }}</span>
                                            @endif
                                            @if(isset($mistake['correct']))
                                                <span class="badge {{ $mistake['correct'] ? 'badge-success' : 'badge-error' }}">
                                                    {{ $mistake['correct'] ? '已掌握' : '错误' }}
                                                </span>
                                            @endif
                                            @if(!empty($mistake['reviewed']))
                                                <span class="badge badge-success badge-outline">已复习</span>
                                            @endif
                                            @if(!empty($mistake['favorite']))
                                                <span class="badge badge-primary badge-outline">已收藏</span>
                                            @endif
                                        </div>
                                    </div>

                                    <div class="rounded-lg bg-slate-50 p-4 border border-slate-100">
                                        <p class="text-sm font-semibold text-slate-800 mb-2">题干</p>
                                        <div class="prose max-w-none question-content text-slate-800">
                                            <x-math-render :content="$mistake['question']['stem'] ?? ($mistake['question']['content'] ?? '暂无题干')" class="text-base" />
                                        </div>
                                    </div>

                                    <div class="grid grid-cols-1 md:grid-cols-3 gap-3">
                                        <div class="bg-white border border-slate-200 rounded-lg p-3">
                                            <p class="text-xs text-slate-500 mb-1">学生作答</p>
                                            <p class="text-sm text-slate-800 break-words">{{ $mistake['student_answer'] ?? '无' }}</p>
                                        </div>
                                        <div class="bg-white border border-slate-200 rounded-lg p-3">
                                            <p class="text-xs text-slate-500 mb-1">正确答案</p>
                                            <p class="text-sm text-emerald-700 break-words">
                                                {{ $mistake['question']['answer'] ?? ($mistake['correct_answer'] ?? '未知') }}
                                            </p>
                                        </div>
                                        <div class="bg-white border border-slate-200 rounded-lg p-3">
                                            <p class="text-xs text-slate-500 mb-1">错误类型</p>
                                            <p class="text-sm text-amber-700">
                                                {{ $mistake['error_type'] ?? '未分类' }}
                                            </p>
                                        </div>
                                    </div>

                                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                        <div class="bg-gradient-to-br from-amber-50 to-white border border-amber-100 rounded-lg p-4 space-y-2">
                                            <p class="text-sm font-semibold text-amber-800">错误原因分析</p>
                                            <p class="text-sm text-amber-700">{{ $mistake['ai_analysis']['reason'] ?? $mistake['ai_analysis'] ?? '暂无分析' }}</p>
                                            <p class="text-sm font-semibold text-amber-800">对应技能</p>
                                            <p class="text-sm text-amber-700">{{ $mistake['ai_analysis']['skill'] ?? ($mistake['skill_desc'] ?? '未识别') }}</p>
                                        </div>
                                        <div class="bg-gradient-to-br from-emerald-50 to-white border border-emerald-100 rounded-lg p-4 space-y-2">
                                            <p class="text-sm font-semibold text-emerald-800">正确解法</p>
                                            <p class="text-sm text-emerald-700">{{ $mistake['ai_analysis']['solution'] ?? '可向AI请求解析' }}</p>
                                            <p class="text-sm font-semibold text-emerald-800">避免类似错误</p>
                                            <p class="text-sm text-emerald-700">{{ $mistake['ai_analysis']['tip'] ?? ($mistake['ai_analysis']['suggestion'] ?? '加强审题与演算步骤复查') }}</p>
                                        </div>
                                    </div>

                                    <div class="divider my-2"></div>
                                    <div class="flex flex-wrap gap-2">
                                        <button class="btn btn-sm btn-ghost" wire:click="toggleFavorite('{{ $mistake['id'] ?? '' }}')">
                                            {{ !empty($mistake['favorite']) ? '取消收藏' : '收藏' }}
                                        </button>
                                        <button class="btn btn-sm btn-ghost" wire:click="markReviewed('{{ $mistake['id'] ?? '' }}')">
                                            标记已复习
                                        </button>
                                        <button class="btn btn-sm btn-ghost" wire:click="addToRetryList('{{ $mistake['id'] ?? '' }}')">
                                            加入重练清单
                                        </button>
                                        <button class="btn btn-sm btn-outline" wire:click="loadRelatedQuestions('{{ $mistake['id'] ?? '' }}')">
                                            查看关联题
                                        </button>
                                    </div>

                                    @if(!empty($relatedQuestions[$mistake['id'] ?? ''] ?? []))
                                        <div class="bg-slate-50 border border-slate-200 rounded-lg p-3 space-y-2">
                                            <p class="text-sm font-semibold text-slate-800">关联题目</p>
                                            <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                                                @foreach($relatedQuestions[$mistake['id']] as $related)
                                                    <div class="p-3 bg-white border border-slate-200 rounded-lg">
                                                        <p class="text-xs text-slate-400 mb-1">ID: {{ $related['id'] ?? '' }}</p>
                                                        <p class="text-sm text-slate-800 overflow-hidden max-h-14">{{ $related['stem'] ?? $related['content'] ?? '相关题目' }}</p>
                                                        <p class="text-xs text-slate-500 mt-2">
                                                            难度: {{ $related['difficulty'] ?? '中等' }}
                                                            @if(!empty($related['kp_codes']))
                                                                · KP: {{ is_array($related['kp_codes']) ? implode(',', $related['kp_codes']) : $related['kp_codes'] }}
                                                            @endif
                                                        </p>
                                                    </div>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endif
                                </div>
                            @endforeach
                        </div>
                    @endif
                </div>

                @if(!empty($recommendations))
                    <div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-5 space-y-4">
                        <div class="flex items-center justify-between">
                            <div>
                                <h3 class="text-lg font-semibold text-slate-900">重练题单</h3>
                                <p class="text-sm text-slate-500">基于错题推荐的新题，支持导出</p>
                            </div>
                            <a href="{{ url('/admin/question-management') }}" class="btn btn-outline btn-sm" target="_blank">打开题库</a>
                        </div>
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                            @foreach($recommendations as $rec)
                                <div class="p-4 border border-slate-200 rounded-lg bg-slate-50">
                                    <p class="text-xs text-slate-400 mb-1">题目 ID: {{ $rec['id'] ?? '' }}</p>
                                    <p class="text-sm text-slate-800 overflow-hidden max-h-16">{{ $rec['stem'] ?? $rec['content'] ?? '推荐题目' }}</p>
                                    <div class="flex flex-wrap gap-2 mt-2">
                                        @if(!empty($rec['kp_codes']))
                                            <span class="badge badge-ghost">KP {{ is_array($rec['kp_codes']) ? implode(',', $rec['kp_codes']) : $rec['kp_codes'] }}</span>
                                        @endif
                                        @if(!empty($rec['skills']))
                                            <span class="badge badge-outline badge-info">{{ is_array($rec['skills']) ? implode(',', $rec['skills']) : $rec['skills'] }}</span>
                                        @endif
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    </div>
                @endif

                <div class="rounded-2xl bg-white border border-slate-200 shadow-sm p-5 space-y-6">
                    <div class="flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
                        <div>
                            <h3 class="text-lg font-semibold text-slate-900">智能分析</h3>
                            <p class="text-sm text-slate-500">错误类型雷达图 · 弱点技能排名 · 薄弱知识点</p>
                        </div>
                        <button class="btn btn-ghost btn-sm" wire:click="refreshPatterns">
                            重新拉取
                        </button>
                    </div>

                    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4">
                        @if(!empty($patterns['error_types']))
                            <div class="bg-slate-50 rounded-xl border border-slate-200 p-4">
                                <div class="flex items-center justify-between mb-3">
                                    <h4 class="font-semibold text-slate-800">错误类型雷达图</h4>
                                    <span class="badge badge-ghost">AI</span>
                                </div>
                                <canvas id="mistakeRadarChart" class="w-full h-64"></canvas>
                            </div>
                        @endif
                        @if(!empty($patterns['top_skills']))
                            <div class="bg-slate-50 rounded-xl border border-slate-200 p-4">
                                <div class="flex items-center justify-between mb-3">
                                    <h4 class="font-semibold text-slate-800">弱点技能排名</h4>
                                    <span class="badge badge-warning badge-outline">Top</span>
                                </div>
                                <canvas id="skillBarChart" class="w-full h-64"></canvas>
                            </div>
                        @endif
                    </div>

                    @if(!empty($patterns['top_kps']))
                        <div class="bg-slate-50 rounded-xl border border-slate-200 p-4">
                            <h4 class="font-semibold text-slate-800 mb-3">薄弱知识点热力</h4>
                            <div class="space-y-2">
                                @foreach(($patterns['top_kps'] ?? []) as $kp)
                                    <div>
                                        <div class="flex items-center justify-between text-sm text-slate-700">
                                            <span>{{ $kp['name'] ?? ($kp['kp'] ?? $kp['kp_code'] ?? '知识点') }}</span>
                                            <span class="text-xs text-slate-500">错误 {{ $kp['count'] ?? $kp['mistake_count'] ?? 0 }}</span>
                                        </div>
                                        @php
                                            $score = ($kp['score'] ?? $kp['accuracy'] ?? 0);
                                            if ($score > 1) $score = $score / 100;
                                            $width = max(10, min(100, (1 - (float) $score) * 100));
                                        @endphp
       				            <progress class="progress progress-error w-full" value="{{ $width }}" max="100"></progress>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endif
                </div>
            </div>
        </div>
    </div>
</div>

@push('scripts')
    <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
    <script>
        document.addEventListener('livewire:navigated', initMistakeCharts);
        document.addEventListener('livewire:load', initMistakeCharts);

        function initMistakeCharts() {
            const radarCanvas = document.getElementById('mistakeRadarChart');
            const barCanvas = document.getElementById('skillBarChart');

            if ((!radarCanvas && !barCanvas)) {
                return;
            }

            const errorTypes = @json($patterns['error_types'] ?? []);
            const skills = @json($patterns['top_skills'] ?? []);

            const radarLabels = errorTypes.map(e => e.name || e.type || '错误');
            const radarData = errorTypes.map(e => e.count || e.value || 0);

            const skillLabels = skills.map(s => s.name || s.skill || '技能');
            const skillData = skills.map(s => s.score || s.count || 0);

            if (window.mistakeRadarChart) {
                window.mistakeRadarChart.destroy();
            }
            if (window.skillBarChart) {
                window.skillBarChart.destroy();
            }

            if (radarCanvas && radarLabels.length) {
                window.mistakeRadarChart = new Chart(radarCanvas.getContext('2d'), {
                    type: 'radar',
                    data: {
                        labels: radarLabels,
                        datasets: [{
                            label: '错误频次',
                            data: radarData,
                            backgroundColor: 'rgba(248, 180, 0, 0.2)',
                            borderColor: '#f59e0b',
                            borderWidth: 2,
                            pointBackgroundColor: '#f97316'
                        }]
                    },
                    options: {
                        plugins: { legend: { display: false } },
                        scales: {
                            r: {
                                beginAtZero: true,
                                ticks: { stepSize: 1 }
                            }
                        }
                    }
                });
            }

            if (barCanvas && skillLabels.length) {
                window.skillBarChart = new Chart(barCanvas.getContext('2d'), {
                    type: 'bar',
                    data: {
                        labels: skillLabels,
                        datasets: [{
                            label: '弱点指数',
                            data: skillData,
                            backgroundColor: 'rgba(59, 130, 246, 0.2)',
                            borderColor: '#3b82f6',
                            borderWidth: 1,
                            borderRadius: 6
                        }]
                    },
                    options: {
                        plugins: { legend: { display: false }, tooltip: { mode: 'index' } },
                        scales: {
                            x: { ticks: { color: '#475569' } },
                            y: { beginAtZero: true }
                        }
                    }
                });
            }
        }
    </script>
@endpush