<div>
    @push('styles')
        <style>
            .mastery-card {
                transition: all 0.3s ease;
            }
            .mastery-progress {
                height: 8px;
                border-radius: 4px;
                background: #e5e7eb;
            }
        </style>
    @endpush

    <div class="space-y-6">
        <!-- 页面标题 -->
        <div class="flex justify-between items-center">
            <div>
                <h2 class="text-2xl font-bold text-gray-900">学生掌握度分析</h2>
                <p class="mt-1 text-sm text-gray-500">
                    基于学生答题数据，分析知识点掌握情况
                </p>
            </div>
        </div>

        <!-- 学生选择器 -->
        <div class="bg-white p-6 rounded-lg border shadow-sm">
            <div class="flex items-center gap-4">
                <div class="flex-1">
                    <select
                        wire:model.live="selectedStudentId"
                        class="form-select w-full px-3 py-2 border rounded-lg"
                    >
                        <option value="">-- 选择学生 --</option>
                        @foreach($this->students() as $student)
                            <option value="{{ $student['student_id'] }}">
                                {{ $student['name'] ?? $student['student_id'] }}
                            </option>
                        @endforeach
                    </select>
                </div>
                @if($selectedStudentId)
                    <div class="text-sm text-gray-600">
                        当前分析学生：<span class="font-semibold">{{ $selectedStudentId }}</span>
                    </div>
                @endif
            </div>
        </div>

        @if($selectedStudentId)
            <!-- 概览统计 -->
            <div class="grid grid-cols-1 md:grid-cols-4 gap-4">
                <div class="bg-white p-4 rounded-lg border text-center">
                    <div class="text-3xl font-bold text-blue-600">{{ count($masteryData) }}</div>
                    <div class="text-sm text-gray-600 mt-1">已学习知识点</div>
                </div>

                <div class="bg-white p-4 rounded-lg border text-center">
                    <div class="text-3xl font-bold text-green-600">
                        {{ count(array_filter($masteryData, fn($m) => $m['mastery'] >= 0.8)) }}
                    </div>
                    <div class="text-sm text-gray-600 mt-1">掌握良好(≥80%)</div>
                </div>

                <div class="bg-white p-4 rounded-lg border text-center">
                    <div class="text-3xl font-bold text-red-600">{{ count($weaknesses) }}</div>
                    <div class="text-sm text-gray-600 mt-1">薄弱知识点</div>
                </div>

                <div class="bg-white p-4 rounded-lg border text-center">
                    @php
                        $avgMastery = count($masteryData) > 0
                            ? round(array_sum(array_column($masteryData, 'mastery')) / count($masteryData) * 100, 1)
                            : 0;
                    @endphp
                    <div class="text-3xl font-bold text-purple-600">{{ $avgMastery }}%</div>
                    <div class="text-sm text-gray-600 mt-1">平均掌握度</div>
                </div>
            </div>

            <!-- 掌握度详情 -->
            <div class="bg-white p-6 rounded-lg border shadow-sm">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">知识点掌握度详情</h3>

                @if(count($masteryData) > 0)
                    <div class="space-y-4 max-h-96 overflow-y-auto">
                        @foreach($masteryData as $item)
                            <div class="mastery-card p-4 border rounded-lg">
                                <div class="flex items-start justify-between mb-2">
                                    <div class="flex-1">
                                        <div class="font-medium text-gray-900">{{ $item['kp_name'] ?? $item['kp_code'] }}</div>
                                        <div class="text-xs text-gray-600 mt-1">{{ $item['kp_code'] }}</div>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-lg font-bold" style="color: {{ getMasteryColor($item['mastery']) }}">
                                            {{ number_format($item['mastery'] * 100, 1) }}%
                                        </div>
                                        <div class="text-xs text-gray-600">{{ $item['mastery_level'] }}</div>
                                    </div>
                                </div>

                                <div class="mastery-progress">
                                    <div
                                        style="width: {{ $item['mastery'] * 100 }}%; background: {{ getMasteryColor($item['mastery']) }}; height: 100%;"
                                    ></div>
                                </div>

                                @if($item['mastery'] < 0.7)
                                    <div class="mt-2 flex items-center gap-2">
                                        <span class="text-xs px-2 py-0.5 bg-red-200 text-red-700 rounded">需重点关注</span>
                                        <span class="text-xs text-gray-600">
                                            建议练习{{ ceil((0.8 - $item['mastery']) * 10) }}次
                                        </span>
                                    </div>
                                @endif
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center text-gray-500 py-8">暂无掌握度数据</div>
                @endif
            </div>

            <!-- 薄弱点分析 -->
            <div class="bg-white p-6 rounded-lg border shadow-sm">
                <h3 class="text-lg font-semibold text-gray-900 mb-4">薄弱点分析</h3>

                @if(count($weaknesses) > 0)
                    <div class="space-y-3">
                        @foreach($weaknesses as $weakness)
                            <div class="border border-red-200 rounded-lg p-3 bg-red-50">
                                <div class="flex items-start justify-between">
                                    <div class="flex-1">
                                        <div class="font-medium text-gray-900">
                                            {{ $weakness['kp_name'] ?? $weakness['kp_code'] }}
                                        </div>
                                        <div class="text-xs text-gray-600 mt-1">{{ $weakness['kp_code'] }}</div>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-sm font-bold text-red-600">
                                            {{ number_format($weakness['mastery'] * 100, 1) }}%
                                        </div>
                                    </div>
                                </div>

                                <div class="mt-3 space-y-2">
                                    <div class="text-xs text-gray-600">
                                        <strong>建议：</strong>
                                        @if($weakness['mastery'] < 0.3)
                                            重新学习基础知识，从基础题开始练习
                                        @elseif($weakness['mastery'] < 0.5)
                                            重点练习基础题型，复习相关概念
                                        @elseif($weakness['mastery'] < 0.7)
                                            加强练习，增加题型熟悉度
                                        @endif
                                    </div>
                                </div>
                            </div>
                        @endforeach
                    </div>
                @else
                    <div class="text-center text-green-600 py-8">
                        <svg class="w-12 h-12 mx-auto mb-2" 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>
                        <div>学生表现优秀，暂无敌弱知识点！</div>
                    </div>
                @endif
            </div>

            @if(!empty($knowledgePointHierarchy['parent_mastery_levels']) || !empty(array_filter($knowledgePointHierarchy['child_knowledge_points'] ?? [])))
                <!-- 【新增】父子知识点层级关系 -->
                <div class="bg-white p-6 rounded-lg border shadow-sm">
                    <h3 class="text-lg font-semibold text-gray-900 mb-4">知识点层级关系</h3>
                    <p class="text-sm text-gray-600 mb-4">
                        子知识点掌握度对父知识点掌握度的影响分析
                    </p>

                    <div class="space-y-6">
                        @foreach($knowledgePointHierarchy['parent_mastery_levels'] as $parentKpCode => $parentMastery)
                            <div class="border rounded-lg p-4 bg-blue-50">
                                <div class="flex items-center justify-between mb-3">
                                    <div>
                                        <h4 class="font-medium text-gray-900">{{ $parentKpCode }}</h4>
                                        <div class="text-xs text-gray-600 mt-1">父知识点（子节点平均值）</div>
                                    </div>
                                    <div class="text-right">
                                        <div class="text-xl font-bold text-blue-600">
                                            {{ number_format($parentMastery * 100, 1) }}%
                                        </div>
                                        <div class="text-xs text-gray-600">父节点掌握度</div>
                                    </div>
                                </div>

                                @if(isset($knowledgePointHierarchy['child_knowledge_points'][$parentKpCode]))
                                    <div class="space-y-2">
                                        <div class="text-sm font-medium text-gray-700">子知识点详情：</div>
                                        @foreach($knowledgePointHierarchy['child_knowledge_points'][$parentKpCode] as $childKp)
                                            <div class="flex items-center justify-between p-2 bg-white rounded border">
                                                <div class="flex-1">
                                                    <div class="text-sm font-medium text-gray-900">
                                                        {{ $childKp['kp_name'] ?? $childKp['kp_code'] }}
                                                    </div>
                                                    <div class="text-xs text-gray-600">{{ $childKp['kp_code'] }}</div>
                                                </div>
                                                <div class="text-right">
                                                    <div class="text-sm font-bold" style="color: {{ $childKp['mastery_level'] >= 0.7 ? '#10b981' : ($childKp['mastery_level'] >= 0.5 ? '#f59e0b' : '#ef4444') }}">
                                                        {{ number_format($childKp['mastery_level'] * 100, 1) }}%
                                                    </div>
                                                    <div class="text-xs text-gray-600">
                                                        练习{{ $childKp['total_attempts'] }}次
                                                    </div>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                @endif
                            </div>
                        @endforeach

                        <!-- 根节点下的子知识点（没有父节点） -->
                        @if(isset($knowledgePointHierarchy['child_knowledge_points']['ROOT']))
                            <div class="border rounded-lg p-4 bg-gray-50">
                                <div class="flex items-center justify-between mb-3">
                                    <div>
                                        <h4 class="font-medium text-gray-900">根节点知识点</h4>
                                        <div class="text-xs text-gray-600 mt-1">无父节点的知识点</div>
                                    </div>
                                </div>

                                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                                    @foreach($knowledgePointHierarchy['child_knowledge_points']['ROOT'] as $childKp)
                                        <div class="p-3 bg-white rounded border">
                                            <div class="flex items-center justify-between mb-2">
                                                <div class="text-sm font-medium text-gray-900">
                                                    {{ $childKp['kp_name'] ?? $childKp['kp_code'] }}
                                                </div>
                                                <div class="text-sm font-bold" style="color: {{ $childKp['mastery_level'] >= 0.7 ? '#10b981' : ($childKp['mastery_level'] >= 0.5 ? '#f59e0b' : '#ef4444') }}">
                                                    {{ number_format($childKp['mastery_level'] * 100, 1) }}%
                                                </div>
                                            </div>
                                            <div class="text-xs text-gray-600">
                                                {{ $childKp['kp_code'] }} • 练习{{ $childKp['total_attempts'] }}次
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif
                    </div>
                </div>
            @endif
        @else
            <!-- 未选择学生的提示 -->
            <div class="bg-white p-6 rounded-lg border shadow-sm text-center py-12">
                <svg class="w-16 h-16 text-gray-400 mx-auto mb-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z"></path>
                </svg>
                <div class="text-lg font-medium text-gray-900 mb-2">请选择学生</div>
                <div class="text-sm text-gray-500">
                    从上方下拉菜单中选择一个学生，查看详细的掌握度分析
                </div>
            </div>
        @endif
    </div>
</div>
