@props(['analysisData'])

@if(!empty($analysisData))
<div class="bg-white rounded-lg shadow-sm border border-gray-200 p-4">
    <div class="flex items-center justify-between mb-3">
        <h2 class="text-sm font-semibold text-gray-900">📈 学习分析</h2>
        <span class="text-xs text-gray-500">整体掌握度: {{ number_format(($analysisData['overall_mastery'] ?? 0) * 100, 1) }}%</span>
    </div>

    <!-- 掌握度进度条 -->
    <div class="mb-3">
        <div class="flex justify-between text-xs text-gray-600 mb-1">
            <span>掌握度</span>
            <span>{{ number_format(($analysisData['overall_mastery'] ?? 0) * 100, 1) }}%</span>
        </div>
        <div class="w-full bg-gray-200 rounded-full h-2">
            <div class="h-2 rounded-full
                {{ ($analysisData['overall_mastery'] ?? 0) < 0.6 ? 'bg-red-400' :
                   (($analysisData['overall_mastery'] ?? 0) < 0.8 ? 'bg-yellow-400' : 'bg-green-400') }}"
                 style="width: {{ ($analysisData['overall_mastery'] ?? 0) * 100 }}%"></div>
        </div>
    </div>

    <!-- 知识点列表 -->
    @if(isset($analysisData['knowledge_points']) && !empty($analysisData['knowledge_points']))
    <div>
        <p class="text-xs font-medium text-gray-700 mb-2">知识点掌握情况:</p>
        <div class="flex flex-wrap gap-2">
            @foreach($analysisData['knowledge_points'] as $kp)
            <div class="border rounded px-2 py-1
                {{ ($kp['mastery_level'] ?? 0) < 0.6 ? 'border-red-200 bg-red-50' :
                   (($kp['mastery_level'] ?? 0) < 0.8 ? 'border-yellow-200 bg-yellow-50' :
                   'border-green-200 bg-green-50') }}">
                <span class="text-xs font-medium text-gray-900">{{ $kp['kp_code'] ?? 'N/A' }}</span>
                <span class="text-xs
                    {{ ($kp['mastery_level'] ?? 0) < 0.6 ? 'text-red-600' :
                       (($kp['mastery_level'] ?? 0) < 0.8 ? 'text-yellow-600' : 'text-green-600') }}">
                    {{ number_format(($kp['mastery_level'] ?? 0) * 100, 0) }}%
                </span>
            </div>
            @endforeach
        </div>
    </div>
    @endif
</div>
@endif