<div>
    <div class="grid grid-cols-1 md:grid-cols-3 gap-4 mb-6">
        <div class="stats shadow bg-base-100">
            <div class="stat">
                <div class="stat-figure text-secondary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1"></path></svg>
                </div>
                <div class="stat-title">关联关系总数</div>
                <div class="stat-value text-secondary">{{ count($relations) }}</div>
                <div class="stat-desc">图谱中的边</div>
            </div>
        </div>
        
        <div class="stats shadow bg-base-100">
            <div class="stat">
                <div class="stat-figure text-primary">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><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 class="stat-title">前置依赖</div>
                <div class="stat-value text-primary">{{ collect($relations)->where('relation_type', 'PREREQUISITE')->count() }}</div>
                <div class="stat-desc">学习依赖关系</div>
            </div>
        </div>

        <div class="stats shadow bg-base-100">
            <div class="stat">
                <div class="stat-figure text-accent">
                    <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-8 h-8 stroke-current"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7h12m0 0l-4-4m4 4l-4 4m0 6H4m0 0l4 4m-4-4l4-4"></path></svg>
                </div>
                <div class="stat-title">相关关系</div>
                <div class="stat-value text-accent">{{ collect($relations)->where('relation_type', 'RELATED')->count() }}</div>
                <div class="stat-desc">概念关联</div>
            </div>
        </div>
    </div>

    <div class="overflow-x-auto bg-base-100 rounded-box shadow-lg">
        <table class="table table-zebra w-full">
            <thead class="bg-base-200 text-base-content/70">
                <tr>
                    <th>源知识点</th>
                    <th class="text-center">关系类型</th>
                    <th>目标知识点</th>
                    <th>权重</th>
                    <th>描述</th>
                </tr>
            </thead>
            <tbody>
                @forelse($relations as $relation)
                <tr class="hover">
                    <td>
                        <div class="font-bold">{{ $relation['source_kp'] }}</div>
                    </td>
                    <td class="text-center">
                        <div class="flex flex-col items-center gap-1">
                            @php
                                $badgeClass = match($relation['relation_type']) {
                                    'PREREQUISITE' => 'badge-primary',
                                    'RELATED' => 'badge-accent',
                                    'TRANSFER' => 'badge-secondary',
                                    default => 'badge-ghost'
                                };
                            @endphp
                            <span class="badge {{ $badgeClass }} badge-sm">{{ $relation['relation_type'] }}</span>
                            <span class="text-[10px] uppercase tracking-wider opacity-50">{{ $relation['relation_direction'] }}</span>
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-4 h-4 opacity-50">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M19.5 13.5L12 21m0 0l-7.5-7.5M12 21V3" />
                            </svg>
                        </div>
                    </td>
                    <td>
                        <div class="font-bold">{{ $relation['target_kp'] }}</div>
                    </td>
                    <td>
                        <div class="radial-progress text-primary text-xs" style="--value:{{ $relation['weight'] * 100 }}; --size:2rem;">{{ $relation['weight'] }}</div>
                    </td>
                    <td class="text-sm opacity-70 max-w-xs truncate">
                        {{ $relation['description'] ?: '-' }}
                    </td>
                </tr>
                @empty
                <tr>
                    <td colspan="5" class="text-center py-10">
                        <div class="flex flex-col items-center justify-center gap-2 text-base-content/50">
                            <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-10 h-10">
                              <path stroke-linecap="round" stroke-linejoin="round" d="M13.828 10.172a4 4 0 00-5.656 0l-4 4a4 4 0 105.656 5.656l1.102-1.101m-.758-4.899a4 4 0 005.656 0l4-4a4 4 0 00-5.656-5.656l-1.1 1.1" />
                            </svg>
                            <span>暂无关联关系。</span>
                        </div>
                    </td>
                </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>
