math_cms/resources/views/filament/pages/student-dashboard.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="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>
                        学生仪表板
                    </h1>
                    <p class="mt-2 text-sm text-gray-600 ml-11">
                        全面展示学生的学习分析数据，包括掌握度、技能熟练度、提分预测和学习路径
                    </p>
                </div>
            </div>

            {{-- 选择器区域 --}}
            <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    {{-- 选择老师 --}}
                    <div class="form-control w-full">
                        <label class="label">
                            <span class="label-text font-medium">选择老师</span>
                        </label>
                        <select
                            wire:model.live="teacherId"
                            class="select select-bordered w-full"
                        >
                            <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>
                        <label class="label">
                            <span class="label-text text-xs text-gray-500">选择要查看的老师</span>
                        </label>
                    </div>

                    {{-- 选择学生 --}}
                    <div class="form-control w-full">
                        <label class="label">
                            <span class="label-text font-medium">选择学生</span>
                        </label>
                        <select
                            wire:model.live="studentId"
                            class="select select-bordered w-full"
                            @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>
                        <label class="label">
                            <span class="label-text text-xs text-gray-500">选择要查看的学生</span>
                        </label>
                    </div>
                </div>

                <div class="mt-4 pb-0.5 flex space-x-2">
                    <button
                        wire:click="loadDashboardData"
                        wire:loading.attr="disabled"
                        class="inline-flex items-center px-6 py-2.5 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" xmlns="http://www.w3.org/2000/svg" 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>

    @php
        $mindmapAvg = collect($mindmapMasteryData ?? [])
            ->pluck('mastery_level')
            ->filter(fn ($v) => is_numeric($v))
            ->avg() ?? 0;
        $mindmapError = collect($mindmapMasteryData ?? [])
            ->map(fn ($item) => is_array($item) ? max(0, 1 - ($item['accuracy_rate'] ?? 0)) : 0)
            ->avg() ?? 0;
    @endphp

    <div
        class="mb-10 space-y-4"
        x-data="studentMindmapPanel('{{ $this->getId() }}')"
        x-init="initEventListener(); initMindmap()"
        data-knowledge-mindmap-root
    >
        <div class="relative overflow-hidden rounded-2xl border border-slate-200 shadow-sm bg-white">
            <div
                wire:ignore
                id="student-mindmap"
                class="knowledge-mindmap-canvas relative h-[64vh] min-h-[560px] w-full"
            >
            </div>
        </div>

        {{-- 内联知识点详情 --}}
        <template x-if="selectedNode">
            <div class="grid grid-cols-1 gap-4 lg:grid-cols-3">
                <div class="lg:col-span-2 rounded-xl border border-slate-200 bg-white p-4 shadow-sm">
                    <div class="flex items-start justify-between">
                        <div>
                            <p class="text-sm text-slate-500">选中知识点</p>
                            <h3 class="text-xl font-semibold text-slate-900" x-text="selectedNode.label || selectedNode.code"></h3>
                            <p class="text-sm text-slate-500 mt-1" x-text="`ID: ${selectedNode.id || ''} · Code: ${selectedNode.code || ''}`"></p>
                        </div>
                        <div class="text-right">
                            <p class="text-sm text-slate-500">掌握度</p>
                            <p class="text-2xl font-bold" x-text="(selectedNode.mastery * 100).toFixed(1) + '%'"></p>
                            <p class="text-xs text-slate-500" x-show="selectedNode.accuracy">准确率 <span x-text="(selectedNode.accuracy * 100).toFixed(1) + '%'"></span></p>
                            <p class="text-xs text-slate-500" x-show="selectedNode.attempts">练习次数 <span x-text="selectedNode.attempts"></span></p>
                        </div>
                    </div>
                    <div class="mt-4">
                        <p class="text-sm font-semibold text-slate-700 mb-2">技能要点</p>
                        <div class="flex flex-wrap gap-2">
                            <template x-if="selectedNode.skills && selectedNode.skills.length">
                                <template x-for="skill in selectedNode.skills" :key="skill">
                                    <span class="rounded-full bg-slate-100 px-3 py-1 text-xs font-medium text-slate-700" x-text="skill"></span>
                                </template>
                            </template>
                            <span x-show="!selectedNode.skills || !selectedNode.skills.length" class="text-sm text-slate-500">暂无技能要点</span>
                        </div>
                        <div class="mt-4">
                            <a
                                class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-medium text-white hover:bg-indigo-700"
                                :href="selectedNode.code ? `/admin/knowledge-point-detail?kp_code=${encodeURIComponent(selectedNode.code)}` : '#'"
                                target="_blank"
                            >
                                查看知识点详情
                            </a>
                        </div>
                    </div>
                </div>
                <div class="rounded-xl border border-slate-200 bg-white p-4 shadow-sm space-y-2">
                    <p class="text-sm font-semibold text-slate-700">快速信息</p>
                    <div class="text-sm text-slate-600 space-y-1">
                        <p><span class="font-medium text-slate-900">ID：</span><span x-text="selectedNode.id"></span></p>
                        <p><span class="font-medium text-slate-900">Code：</span><span x-text="selectedNode.code"></span></p>
                        <p><span class="font-medium text-slate-900">推荐关注：</span><span x-text="selectedNode.recommended ? '是' : '否'"></span></p>
                    </div>
                </div>
            </div>
        </template>

        <x-mindmap.detail-drawer
            :open="$mindmapDrawerOpen"
            :details="$mindmapNodeDetails"
            closeAction="closeMindmapDrawer"
            selectAction="openMindmapDrawer"
            panelTitle="知识点详情"
        />
    </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">
                    <div class="flex-shrink-0">
                        <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>
                    <div class="ml-3">
                        <h3 class="text-sm font-medium text-red-800">加载错误</h3>
                        <div class="mt-2 text-sm text-red-700">
                            <p>{{ $errorMessage }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    @endif

    {{-- 加载状态 --}}
    @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" xmlns="http://www.w3.org/2000/svg" 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="mb-8">
            <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-4">
                {{-- 掌握度概览 --}}
                @if (isset($dashboardData['mastery']['overview']))
                    <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 justify-between">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        <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">
                                            <svg class="w-6 h-6 text-white" 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>
                                        </div>
                                    </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">
                                            {{ number_format($dashboardData['mastery']['overview']['average_mastery_level'] * 100, 1) }}%
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                            <div class="flex justify-between text-xs">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    已掌握: {{ $dashboardData['mastery']['overview']['mastered_knowledge_points'] }}
                                </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">
                                    薄弱: {{ $dashboardData['mastery']['overview']['weak_knowledge_points'] }}
                                </span>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- 技能熟练度概览 --}}
                @if (isset($dashboardData['skill']['summary']))
                    <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 justify-between">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        <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">
                                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                            </svg>
                                        </div>
                                    </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">
                                            {{ number_format($dashboardData['skill']['summary']['average_proficiency_level'] * 100, 1) }}%
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                            <div class="flex justify-between text-xs">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-blue-100 text-blue-800">
                                    技能: {{ $dashboardData['skill']['summary']['total_skills'] }}
                                </span>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-purple-100 text-purple-800">
                                    练习: {{ $dashboardData['skill']['summary']['total_questions_attempted'] }}
                                </span>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- 提分潜力 --}}
                @if (isset($dashboardData['prediction']['quick']))
                    <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 justify-between">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        <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">
                                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                                            </svg>
                                        </div>
                                    </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">
                                            +{{ $dashboardData['prediction']['quick']['quick_prediction']['improvement_potential'] ?? 0 }}
                                            <span class="text-lg text-gray-500">分</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                            <div class="flex justify-between text-xs">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-orange-100 text-orange-800">
                                    学习: {{ $dashboardData['prediction']['quick']['quick_prediction']['estimated_study_hours'] ?? 0 }}小时
                                </span>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-yellow-100 text-yellow-800">
                                    置信度: {{ number_format(($dashboardData['prediction']['quick']['quick_prediction']['confidence_level'] ?? 0) * 100, 0) }}%
                                </span>
                            </div>
                        </div>
                    </div>
                @endif

                {{-- 专题测试 / 智能出卷入口 --}}
                @if(!empty($studentId))
                    <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 flex items-center justify-between">
                            <div class="flex items-center">
                                <div class="flex-shrink-0">
                                    <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">
                                        <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8c-1.1 0-2 .9-2 2v8h4v-8c0-1.1-.9-2-2-2zm0 0V4m0 16h.01M6 12h.01M18 12h.01" />
                                        </svg>
                                    </div>
                                </div>
                                <div class="ml-4">
                                    <p class="text-sm font-medium text-gray-600">专题测试</p>
                                    <p class="text-lg font-semibold text-gray-900">智能出卷</p>
                                    <p class="text-sm text-gray-500">携带学生ID直达出卷，题目偏向薄弱点</p>
                                </div>
                            </div>
                            <a
                                href="{{ url('/admin/intelligent-exam-generation') }}?student_id={{ $studentId }}"
                                class="inline-flex items-center px-4 py-2 rounded-lg bg-indigo-600 text-white text-sm font-medium hover:bg-indigo-700"
                            >
                                前往出卷
                            </a>
                        </div>
                    </div>
                @endif

                {{-- 学习路径 --}}
                @if (isset($dashboardData['learning_path']['analytics']))
                    <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 justify-between">
                                <div class="flex items-center">
                                    <div class="flex-shrink-0">
                                        <div class="w-12 h-12 bg-gradient-to-br from-purple-500 to-purple-600 rounded-xl flex items-center justify-center shadow-lg">
                                            <svg class="w-6 h-6 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7"></path>
                                            </svg>
                                        </div>
                                    </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">
                                            {{ $dashboardData['learning_path']['analytics']['active_paths'] ?? 0 }}
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="bg-gray-50 px-6 py-4 border-t border-gray-100">
                            <div class="flex justify-between text-xs">
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800">
                                    已完成: {{ $dashboardData['learning_path']['analytics']['completed_paths'] ?? 0 }}
                                </span>
                                <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800">
                                    效率: {{ number_format(($dashboardData['learning_path']['analytics']['average_efficiency_score'] ?? 0) * 100, 0) }}%
                                </span>
                            </div>
                        </div>
                    </div>
                @endif
            </div>
        </div>

        {{-- 主要内容区域 --}}
        <div class="mb-8">
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                {{-- 掌握度分析 --}}
                <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-indigo-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>
                            知识点掌握度
                        </h3>
                        <button
                            wire:click="batchUpdateSkills"
                            class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-lg text-indigo-700 bg-indigo-100 hover:bg-indigo-200 transition-colors duration-150"
                        >
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            刷新
                        </button>
                    </div>
                <div class="p-6">
                    @if (isset($dashboardData['mastery']['overview']['total_knowledge_points']))
                        <div class="space-y-4">
                            <div class="flex items-center justify-between text-sm">
                                <span class="text-gray-600">总知识点数</span>
                                <span class="font-medium text-gray-900">{{ $dashboardData['mastery']['overview']['total_knowledge_points'] }}</span>
                            </div>
                            <div class="w-full bg-gray-200 rounded-full h-2">
                                <div class="bg-indigo-600 h-2 rounded-full" style="width: {{ $dashboardData['mastery']['overview']['average_mastery_level'] * 100 }}%"></div>
                            </div>
                            <div class="grid grid-cols-3 gap-4 mt-4">
                                <div class="text-center">
                                    <div class="text-2xl font-semibold text-green-600">{{ $dashboardData['mastery']['overview']['mastered_knowledge_points'] }}</div>
                                    <div class="text-xs text-gray-500">已掌握 (≥85%)</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-semibold text-blue-600">{{ $dashboardData['mastery']['overview']['good_knowledge_points'] }}</div>
                                    <div class="text-xs text-gray-500">良好 (70-85%)</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-2xl font-semibold text-red-600">{{ $dashboardData['mastery']['overview']['weak_knowledge_points'] }}</div>
                                    <div class="text-xs text-gray-500">薄弱 (<50%)</div>
                                </div>
                            </div>
                            @if (!empty($dashboardData['mastery']['overview']['weak_knowledge_points_list']))
                                <div class="mt-6">
                                    <h4 class="text-sm font-medium text-gray-900 mb-3">薄弱知识点</h4>
                                    <div class="space-y-2">
                                        @foreach (array_slice($dashboardData['mastery']['overview']['weak_knowledge_points_list'], 0, 5) as $weak)
                                            <div class="flex items-center justify-between p-3 bg-red-50 rounded-lg">
                                                <div class="flex items-center">
                                                    <div class="w-2 h-2 bg-red-500 rounded-full mr-3"></div>
                                                    <span class="text-sm font-medium text-gray-900">{{ $weak['kp_code'] ?? $weak['knowledge_point_code'] ?? 'N/A' }}</span>
                                                </div>
                                                <div class="flex items-center space-x-3">
                                                    <span class="text-sm text-gray-600">{{ number_format(($weak['mastery_level'] ?? $weak['mastery'] ?? 0) * 100, 1) }}%</span>
                                                    <button
                                                        wire:click="recalculateMastery('{{ $weak['kp_code'] ?? $weak['knowledge_point_code'] ?? '' }}')"
                                                        class="text-xs text-indigo-600 hover:text-indigo-800"
                                                    >
                                                        重新计算
                                                    </button>
                                                </div>
                                            </div>
                                        @endforeach
                                    </div>
                                </div>
                            @endif
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            暂无掌握度数据
                        </div>
                    @endif
                </div>
            </div>

                {{-- 技能熟练度 --}}
                <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-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                            技能熟练度
                        </h3>
                        <button
                            wire:click="batchUpdateSkills"
                            class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-lg text-green-700 bg-green-100 hover:bg-green-200 transition-colors duration-150"
                        >
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"></path>
                            </svg>
                            批量更新
                        </button>
                    </div>
                <div class="p-6">
                    @php
                        $skillData = $dashboardData['skill']['proficiency']['data'] ?? [];
                        if (!is_array($skillData)) {
                            $skillData = [];
                        }
                    @endphp
                    @if (!empty($skillData))
                        <div class="space-y-4">
                            @foreach (array_slice($skillData, 0, 5) as $skill)
                                <div class="flex items-center justify-between">
                                    <div class="flex items-center flex-1">
                                        <div class="w-2 h-2 bg-green-500 rounded-full mr-3"></div>
                                        <div class="flex-1">
                                            <div class="text-sm font-medium text-gray-900">{{ $skill['skill_name'] ?? 'N/A' }}</div>
                                            <div class="w-full bg-gray-200 rounded-full h-1.5 mt-1">
                                                <div class="bg-green-500 h-1.5 rounded-full" style="width: {{ (($skill['proficiency_level'] ?? 0) * 100) }}%"></div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="ml-4 text-right">
                                        <div class="text-sm font-semibold text-gray-900">{{ number_format(($skill['proficiency_level'] ?? 0) * 100, 1) }}%</div>
                                        <div class="text-xs text-gray-500">{{ $skill['total_questions_attempted'] ?? 0 }}题</div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            暂无技能数据
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- 技能熟练度雷达图 - 已隐藏（功能已实现但暂时隐藏以简化界面） --}}
        {{-- <div class="mb-8">
            <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-blue-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">
                    <livewire:skill-proficiency-radar :student-id="$studentId" />
                </div>
            </div>
        </div> --}}

        {{-- 提分预测和学习路径 - 已实现 --}}
        <div class="mb-8">
            <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
                {{-- 提分预测 --}}
                <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-yellow-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"></path>
                            </svg>
                            提分预测
                        </h3>
                        <button
                            wire:click="generateQuickPrediction"
                            class="inline-flex items-center px-3 py-1.5 border border-transparent text-xs font-medium rounded-lg text-yellow-700 bg-yellow-100 hover:bg-yellow-200 transition-colors duration-150"
                        >
                            <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                            </svg>
                            快速预测
                        </button>
                    </div>
                <div class="p-6">
                    {{-- 快速预测结果 --}}
                    @if (isset($dashboardData['prediction']['quick']) && !empty($dashboardData['prediction']['quick']['quick_prediction']))
                        @php
                            $quickPrediction = $dashboardData['prediction']['quick']['quick_prediction'];
                        @endphp

                        {{-- 主要预测信息卡片 --}}
                        <div class="bg-gradient-to-r from-blue-50 to-indigo-50 rounded-lg p-6 mb-6 border border-blue-200">
                            <div class="flex items-center justify-between mb-4">
                                <div>
                                    <h4 class="text-lg font-semibold text-gray-900">智能提分预测</h4>
                                    <p class="text-sm text-gray-600 mt-1">基于当前学习数据的AI分析</p>
                                </div>
                                <div class="text-right">
                                    <div class="text-2xl font-bold text-green-600">
                                        +{{ number_format($quickPrediction['improvement_potential'] ?? 0, 1) }}分
                                    </div>
                                    <div class="text-sm text-gray-500">预期提分</div>
                                </div>
                            </div>

                            <div class="grid grid-cols-3 gap-4 mb-4">
                                <div class="text-center">
                                    <div class="text-lg font-semibold text-gray-900">
                                        {{ $quickPrediction['current_score'] ?? 0 }}分
                                    </div>
                                    <div class="text-xs text-gray-500">当前分数</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-lg font-semibold text-blue-600">
                                        {{ $quickPrediction['predicted_score'] ?? 0 }}分
                                    </div>
                                    <div class="text-xs text-gray-500">预测分数</div>
                                </div>
                                <div class="text-center">
                                    <div class="text-lg font-semibold text-purple-600">
                                        {{ $quickPrediction['estimated_study_hours'] ?? 0 }}h
                                    </div>
                                    <div class="text-xs text-gray-500">建议学习时间</div>
                                </div>
                            </div>

                            <div class="flex items-center justify-between">
                                <div class="flex items-center space-x-2">
                                    <span class="text-sm text-gray-600">置信度:</span>
                                    <div class="flex items-center">
                                        <div class="w-20 bg-gray-200 rounded-full h-2 mr-2">
                                            <div class="bg-blue-600 h-2 rounded-full" style="width: {{ ($quickPrediction['confidence_level'] ?? 0) * 100 }}%"></div>
                                        </div>
                                        <span class="text-sm font-medium text-gray-900">{{ number_format(($quickPrediction['confidence_level'] ?? 0) * 100, 0) }}%</span>
                                    </div>
                                </div>
                                <div class="text-xs text-gray-500">
                                    {{ $quickPrediction['weak_knowledge_points_count'] ?? 0 }}个薄弱知识点
                                </div>
                            </div>
                        </div>

                        {{-- 优先学习主题 --}}
                        @if (!empty($quickPrediction['priority_topics']))
                            <div class="mb-6">
                                <h5 class="text-sm font-medium text-gray-900 mb-3 flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-yellow-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>
                                    优先学习主题 (前5个)
                                </h5>
                                <div class="space-y-2">
                                    @foreach (array_slice($quickPrediction['priority_topics'], 0, 5) as $topic)
                                        <div class="flex items-center justify-between p-3 bg-yellow-50 rounded-lg border border-yellow-200">
                                            <div class="flex items-center space-x-3">
                                                <div class="w-8 h-8 bg-yellow-100 rounded-full flex items-center justify-center">
                                                    <span class="text-xs font-medium text-yellow-800">{{ substr($topic['kp_code'] ?? '', -2) }}</span>
                                                </div>
                                                <div>
                                                    <div class="text-sm font-medium text-gray-900">{{ $topic['kp_code'] ?? 'N/A' }}</div>
                                                    <div class="text-xs text-gray-500">掌握度: {{ number_format(($topic['mastery_level'] ?? 0) * 100, 1) }}%</div>
                                                </div>
                                            </div>
                                            <div class="text-right">
                                                <div class="text-sm font-medium text-gray-900">优先级</div>
                                                <div class="text-xs text-gray-500">{{ number_format($topic['priority_score'] ?? 0, 2) }}</div>
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                        {{-- 学习建议 --}}
                        @if (!empty($quickPrediction['recommended_actions']))
                            <div>
                                <h5 class="text-sm font-medium text-gray-900 mb-3 flex items-center">
                                    <svg class="w-4 h-4 mr-2 text-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                                    </svg>
                                    个性化学习建议
                                </h5>
                                <div class="space-y-3">
                                    @foreach (array_slice($quickPrediction['recommended_actions'], 0, 3) as $recommendation)
                                        <div class="p-3 bg-blue-50 rounded-lg border border-blue-200">
                                            <div class="flex items-center justify-between mb-2">
                                                <span class="text-sm font-medium text-gray-900">{{ $recommendation['kp_code'] ?? 'N/A' }}</span>
                                                <span class="text-xs text-gray-500">
                                                    {{ number_format(($recommendation['current_mastery'] ?? 0) * 100, 0) }}% → {{ number_format(($recommendation['target_mastery'] ?? 0) * 100, 0) }}%
                                                </span>
                                            </div>
                                            <div class="flex flex-wrap gap-1">
                                                @foreach (($recommendation['actions'] ?? []) as $action)
                                                    <span class="inline-flex items-center px-2 py-1 rounded-full text-xs bg-blue-100 text-blue-800">
                                                        {{ $action }}
                                                    </span>
                                                @endforeach
                                            </div>
                                        </div>
                                    @endforeach
                                </div>
                            </div>
                        @endif

                    {{-- 历史预测记录 --}}
                    @elseif (!empty($dashboardData['prediction']['list']['predictions']))
                        @php
                            $historicalPredictions = $dashboardData['prediction']['list']['predictions'];
                        @endphp
                        <div class="space-y-4">
                            <h5 class="text-sm font-medium text-gray-900 mb-3">历史预测记录</h5>
                            @foreach (array_slice($historicalPredictions, 0, 3) as $prediction)
                                <div class="p-4 border border-gray-200 rounded-lg">
                                    <div class="flex items-center justify-between mb-2">
                                        <div class="text-sm font-medium text-gray-900">{{ $prediction['target_entity'] ?? 'N/A' }}</div>
                                        <span class="text-xs text-gray-500">{{ $prediction['prediction_date'] ?? date('m-d') }}</span>
                                    </div>
                                    <div class="flex items-center justify-between">
                                        <div class="text-sm text-gray-600">
                                            当前: {{ $prediction['current_score'] ?? 0 }}分 →
                                            <span class="font-semibold text-gray-900">{{ $prediction['predicted_score'] ?? 0 }}分</span>
                                        </div>
                                        <div class="text-sm font-semibold text-green-600">
                                            +{{ number_format(($prediction['predicted_score'] ?? 0) - ($prediction['current_score'] ?? 0), 1) }}分
                                        </div>
                                    </div>
                                </div>
                            @endforeach
                        </div>
                    @else
                        <div class="text-center py-8 text-gray-500">
                            <div class="mb-4">
                                <svg class="w-12 h-12 mx-auto text-gray-300" 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>
                            </div>
                            <p class="text-sm font-medium text-gray-900 mb-1">暂无预测数据</p>
                            <p class="text-xs text-gray-500 mb-4">点击"快速预测"按钮生成AI预测分析</p>
                            <button
                                wire:click="generateQuickPrediction"
                                class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-lg text-white bg-blue-600 hover:bg-blue-700 transition-colors duration-200"
                            >
                                <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                </svg>
                                生成快速预测
                            </button>
                        </div>
                    @endif
                </div>
            </div>
        </div>

        {{-- 掌握度热力图 - 已隐藏（功能已实现但暂时隐藏以简化界面） --}}
        {{-- <div class="mb-8">
            <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-red-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"></path>
                        </svg>
                        知识点掌握度热力图
                    </h3>
                </div>
                <div class="p-6">
                    <livewire:mastery-heatmap :student-id="$studentId" />
                </div>
            </div>
        </div> --}}

        {{-- 知识点依赖关系图 - 已隐藏（功能已实现但暂时隐藏以简化界面） --}}
        {{-- <div class="mb-8">
            <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-blue-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 20h5v-2a3 3 0 00-5.356-1.857M17 20H7m10 0v-2c0-.656-.126-1.283-.356-1.857M7 20H2v-2a3 3 0 015.356-1.857M7 20v-2c0-.656.126-1.283.356-1.857m0 0a5.002 5.002 0 019.288 0M15 7a3 3 0 11-6 0 3 3 0 016 0zm6 3a2 2 0 11-4 0 2 2 0 014 0zM7 10a2 2 0 11-4 0 2 2 0 014 0z"></path>
                        </svg>
                        知识点依赖关系图
                    </h3>
                </div>
                <div class="p-6">
                    <livewire:knowledge-dependency-graph :student-id="$studentId" />
                </div>
            </div>
        </div> --}}

        {{-- 推荐学习路径 - 已隐藏（功能已实现但暂时隐藏以简化界面） --}}
        {{-- @if (isset($dashboardData['learning_path']['recommendations']['recommendations']))
            <div class="mb-8">
                <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-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"></path>
                            </svg>
                            推荐学习路径
                        </h3>
                    </div>
                <div class="p-6">
                    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
                        @foreach ($dashboardData['learning_path']['recommendations']['recommendations'] as $recommendation)
                            <div class="p-4 border border-gray-200 rounded-lg hover:border-indigo-300 transition-colors">
                                <div class="flex items-center mb-3">
                                    <div class="w-8 h-8 bg-indigo-100 rounded-full flex items-center justify-center mr-3">
                                        <svg class="w-4 h-4 text-indigo-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path>
                                        </svg>
                                    </div>
                                    <div class="flex-1">
                                        <div class="text-sm font-medium text-gray-900">{{ $recommendation['target_kp_name'] }}</div>
                                        <div class="text-xs text-gray-500">{{ $recommendation['target_kp_code'] }}</div>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <div class="flex items-center justify-between text-xs text-gray-600 mb-1">
                                        <span>当前掌握度</span>
                                        <span class="font-medium">{{ number_format($recommendation['current_mastery'] * 100, 1) }}%</span>
                                    </div>
                                    <div class="w-full bg-gray-200 rounded-full h-1.5">
                                        <div class="bg-indigo-500 h-1.5 rounded-full" style="width: {{ $recommendation['current_mastery'] * 100 }}%"></div>
                                    </div>
                                </div>
                                <p class="text-xs text-gray-600 mb-3">{{ $recommendation['reason'] }}</p>
                                <button class="w-full text-xs bg-indigo-600 text-white py-2 px-3 rounded-md hover:bg-indigo-700 transition-colors">
                                    生成学习路径
                                </button>
                            </div>
                        @endforeach
                    </div>
                </div>
            </div>
        @endif --}}

    </div>
</div>
@endif

@push('styles')
    <style>
        .knowledge-mindmap-canvas {
            background: #ffffff;
        }
    </style>
@endpush

@push('scripts')
    <script src="https://gw.alipayobjects.com/os/lib/antv/g6/4.8.24/dist/g6.min.js"></script>
    <script src="{{ asset('js/g6-custom-node.js') }}"></script>
    <script src="{{ asset('js/knowledge-mindmap-graph.js') }}"></script>
    <script>
        document.addEventListener('alpine:init', () => {
            window.studentMindmapPanel = (livewireId = null) => ({
                graphInstance: null,
                stats: { nodes: 0, extraEdges: 0 },
                livewireId,
                selectedNode: null,

                initEventListener() {
                    window.addEventListener('mindmap-node-selected', (evt) => {
                        const model = evt.detail || {};
                        const code = model?.meta?.code || model?.id;
                        const mastery = model?.meta?.mastery_level ?? this.graphInstance?.masteryData?.[code]?.mastery_level ?? 0;
                        const accuracy = model?.meta?.accuracy_rate ?? this.graphInstance?.masteryData?.[code]?.accuracy_rate ?? null;
                        const attempts = model?.meta?.total_attempts ?? this.graphInstance?.masteryData?.[code]?.total_attempts ?? null;
                        this.selectedNode = {
                            id: model?.id,
                            code,
                            label: model?.label,
                            mastery,
                            accuracy,
                            attempts,
                            recommended: model?.meta?.recommended ?? false,
                            skills: model?.meta?.skills || this.graphInstance?.masteryData?.[code]?.skills || [],
                        };
                    });
                },

                async initMindmap() {
                    if (!window.KnowledgeMindmapGraph) {
                        return;
                    }

                    this.graphInstance = new KnowledgeMindmapGraph({
                        containerId: 'student-mindmap',
                        livewireMethod: 'openMindmapDrawer',
                        highlightLowMastery: true,
                        livewireId: this.livewireId,
                        onNodeSelect: (model) => {
                            const code = model?.meta?.code || model?.id;
                            const mastery = model?.meta?.mastery_level ?? this.graphInstance?.masteryData?.[code]?.mastery_level ?? 0;
                            const accuracy = model?.meta?.accuracy_rate ?? this.graphInstance?.masteryData?.[code]?.accuracy_rate ?? null;
                            const attempts = model?.meta?.total_attempts ?? this.graphInstance?.masteryData?.[code]?.total_attempts ?? null;
                            this.selectedNode = {
                                id: model?.id,
                                code,
                                label: model?.label,
                                mastery,
                                accuracy,
                                attempts,
                                recommended: model?.meta?.recommended ?? false,
                                skills: model?.meta?.skills || this.graphInstance?.masteryData?.[code]?.skills || [],
                            };
                        },
                    });
                    this.graphInstance.masteryData = @js($mindmapMasteryData ?? []);
                    await this.graphInstance.init();
                    this.stats = this.graphInstance.stats;
                },
            });
        });
    </script>
@endpush

{{-- 通知脚本 --}}
<script>
    document.addEventListener('notify', (event) => {
        const message = event.detail.message;
        const type = event.detail.type || 'info';
        alert(message);
    });
</script>