math_cms/resources/views/components/mistake-book-panel.blade.php

@props(['data' => [], 'studentId' => '', 'teacherId' => ''])

@php
    $stats = $data['stats'] ?? [];
    $recent = $data['recent'] ?? [];
    $weakSkills = $data['weak_skills'] ?? [];
    $weakKps = $data['weak_kps'] ?? [];
    $errorTypes = $data['error_types'] ?? [];
@endphp

<div class="bg-white shadow-sm rounded-xl border border-gray-200">
    <div class="px-6 py-5 border-b border-gray-100 flex flex-col gap-3 lg:flex-row lg:items-center lg:justify-between">
        <div>
            <p class="text-sm text-slate-500 mb-1">MistakeBook</p>
            <h3 class="text-xl font-semibold text-slate-900">错题本速览</h3>
            <p class="text-sm text-slate-500">最近错题 · 易错技能 · 薄弱知识点</p>
        </div>
        <div class="flex flex-wrap gap-2">
            <a
                href="{{ url('/admin/mistake-book') }}{{ $studentId ? ('?student_id=' . $studentId . ($teacherId ? '&teacher_id=' . $teacherId : '')) : '' }}{{ !$studentId && $teacherId ? ('?teacher_id=' . $teacherId) : '' }}"
                class="btn btn-primary btn-sm"
                target="_blank"
            >
                打开错题本
            </a>
        </div>
    </div>
    <div class="px-6 py-5 space-y-4">
        <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-3">
            <div class="stat bg-slate-50 rounded-lg border border-slate-200">
                <div class="stat-title text-slate-500">总错题</div>
                <div class="stat-value text-slate-900 text-2xl">{{ $stats['total'] ?? 0 }}</div>
            </div>
            <div class="stat bg-slate-50 rounded-lg border border-slate-200">
                <div class="stat-title text-slate-500">本周错题</div>
                <div class="stat-value text-amber-600 text-2xl">{{ $stats['this_week'] ?? 0 }}</div>
            </div>
            <div class="stat bg-slate-50 rounded-lg border border-slate-200">
                <div class="stat-title text-slate-500">待复习</div>
                <div class="stat-value text-indigo-600 text-2xl">{{ $stats['pending_review'] ?? 0 }}</div>
            </div>
            <div class="stat bg-slate-50 rounded-lg border border-slate-200">
                <div class="stat-title text-slate-500">掌握率</div>
                <div class="stat-value text-emerald-600 text-2xl">
                    {{ isset($stats['mastery_rate']) ? number_format($stats['mastery_rate'] * 100, 1) . '%' : '--' }}
                </div>
            </div>
        </div>

        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
            <div class="lg:col-span-1 bg-slate-50 border border-slate-200 rounded-lg p-4">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="font-semibold text-slate-800">最近错题</h4>
                    <span class="badge badge-ghost">最新</span>
                </div>
                <div class="space-y-3">
                    @forelse(array_slice($recent, 0, 4) as $item)
                        <div class="p-3 bg-white rounded-lg border border-slate-200">
                            <div class="flex items-center justify-between">
                                <p class="text-xs text-slate-400">{{ $item['created_at'] ?? '' }}</p>
                                @if(!empty($item['error_type']))
                                    <span class="badge badge-warning badge-outline">{{ $item['error_type'] }}</span>
                                @endif
                            </div>
                            <p class="text-sm text-slate-800 mt-1">
                                {{ \Illuminate\Support\Str::limit(strip_tags($item['question']['stem'] ?? $item['question']['content'] ?? '错题'), 80) }}
                            </p>
                            @if(!empty($item['kp_ids']))
                                <div class="flex flex-wrap gap-1 mt-2">
                                    @foreach(array_slice($item['kp_ids'], 0, 2) as $kp)
                                        <span class="badge badge-ghost">KP {{ $kp }}</span>
                                    @endforeach
                                </div>
                            @endif
                        </div>
                    @empty
                        <p class="text-sm text-slate-500">暂无错题记录</p>
                    @endforelse
                </div>
            </div>

            <div class="bg-slate-50 border border-slate-200 rounded-lg 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>
                <div class="space-y-2">
                    @forelse(array_slice($weakSkills, 0, 4) as $skill)
                        @php
                            $score = $skill['score'] ?? $skill['count'] ?? 0;
                            $score = is_numeric($score) ? (float) $score : 0;
                        @endphp
                        <div>
                            <div class="flex items-center justify-between text-sm text-slate-700">
                                <span>{{ $skill['name'] ?? ($skill['skill'] ?? '技能') }}</span>
                                <span class="text-xs text-slate-500">{{ $score }}</span>
                            </div>
                            <progress class="progress progress-warning w-full" value="{{ min(100, $score * 10) }}" max="100"></progress>
                        </div>
                    @empty
                        <p class="text-sm text-slate-500">暂无技能数据</p>
                    @endforelse
                </div>
            </div>

            <div class="bg-slate-50 border border-slate-200 rounded-lg p-4">
                <div class="flex items-center justify-between mb-3">
                    <h4 class="font-semibold text-slate-800">薄弱知识点 Top 5</h4>
                    <span class="badge badge-error badge-outline">KP</span>
                </div>
                <div class="space-y-2">
                    @forelse(array_slice($weakKps, 0, 5) as $kp)
                        @php
                            $score = $kp['score'] ?? $kp['mistake_count'] ?? $kp['count'] ?? 0;
                            $score = is_numeric($score) ? (float) $score : 0;
                        @endphp
                        <div class="flex items-center justify-between">
                            <div>
                                <p class="text-sm font-medium text-slate-800">{{ $kp['name'] ?? ($kp['kp'] ?? $kp['kp_code'] ?? '知识点') }}</p>
                                <p class="text-xs text-slate-500">{{ $kp['kp_code'] ?? $kp['kp'] ?? '' }}</p>
                            </div>
                            <div class="text-right">
                                <p class="text-sm text-slate-700">错误 {{ $kp['mistake_count'] ?? $kp['count'] ?? 0 }}</p>
                                <div class="w-28 bg-slate-200 h-1.5 rounded-full mt-1">
                                    <div class="h-1.5 rounded-full bg-red-500" style="width: {{ min(100, (1 - min($score, 1)) * 100) }}%"></div>
                                </div>
                            </div>
                        </div>
                    @empty
                        <p class="text-sm text-slate-500">暂无知识点数据</p>
                    @endforelse
                </div>
            </div>
        </div>

        <div class="bg-slate-50 border border-slate-200 rounded-lg p-4">
            <div class="flex items-center justify-between">
                <h4 class="font-semibold text-slate-800">错误类型分布</h4>
                <span class="badge badge-ghost">AI</span>
            </div>
            <div class="flex flex-wrap gap-2 mt-3">
                @forelse($errorTypes as $error)
                    <span class="badge badge-outline">
                        {{ $error['name'] ?? $error['type'] ?? '错误' }} · {{ $error['count'] ?? $error['value'] ?? 0 }}
                    </span>
                @empty
                    <p class="text-sm text-slate-500">暂无错误类型数据</p>
                @endforelse
            </div>
        </div>
    </div>
</div>