@props([
    'completedByCategory' => [],
    'axes' => ['Technical Skills', 'Soft Skills', 'Leadership', 'Health & Wellness', 'Professional Development'],
])

@php
    $data = array_map(fn($axis) => min($completedByCategory[$axis] ?? 0, 10), $axes);
    $allZero = array_sum($data) === 0;
    $chartId = 'skillSpiderChart_' . uniqid();
@endphp

<div class="bg-white rounded-xl p-6 shadow-lg border border-gray-100">
    <div class="flex items-center gap-2 mb-4">
        <div class="w-8 h-8 bg-cyan-100 rounded-lg flex items-center justify-center">
            <i class="fas fa-spider text-cyan-600 text-sm"></i>
        </div>
        <h3 class="text-lg font-semibold text-gray-800">Skill Profile</h3>
    </div>

    @if($allZero)
        <div class="flex flex-col items-center justify-center py-8 text-center">
            <div class="w-16 h-16 bg-gray-100 rounded-full flex items-center justify-center mb-3">
                <i class="fas fa-chart-radar text-gray-400 text-2xl"></i>
            </div>
            <p class="text-gray-500 text-sm">Complete your first training to see your skill profile</p>
        </div>
    @else
        <canvas id="{{ $chartId }}" class="max-h-64 w-full"></canvas>
    @endif
</div>

@if(!$allZero)
@push('scripts')
<script>
(function () {
    const ctx = document.getElementById('{{ $chartId }}');
    if (!ctx) return;

    const axes = @json($axes);
    const data = @json($data);

    new Chart(ctx.getContext('2d'), {
        type: 'radar',
        data: {
            labels: axes,
            datasets: [{
                label: 'Your Skills',
                data: data,
                backgroundColor: 'rgba(6, 182, 212, 0.2)',
                borderColor: 'rgba(6, 182, 212, 1)',
                pointBackgroundColor: 'rgba(6, 182, 212, 1)',
                pointBorderColor: '#fff',
                pointHoverBackgroundColor: '#fff',
                pointHoverBorderColor: 'rgba(6, 182, 212, 1)',
                borderWidth: 2,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: true,
            scales: {
                r: {
                    beginAtZero: true,
                    max: 10,
                    ticks: {
                        stepSize: 2,
                        font: { size: 10 },
                        color: '#9ca3af',
                    },
                    grid: { color: 'rgba(0,0,0,0.05)' },
                    pointLabels: {
                        font: { size: 11 },
                        color: '#374151',
                    },
                }
            },
            plugins: {
                legend: { display: false },
                tooltip: {
                    callbacks: {
                        label: ctx => `${ctx.raw} completion(s)`,
                    }
                }
            }
        }
    });
})();
</script>
@endpush
@endif
