@props([
    'datasets' => [],   // [['label' => 'Training', 'data' => [...]], ...]
    'labels'   => [],   // array of week label strings
    'title'    => 'Trend Overview',
])

@php
    $chartId = 'trendChart_' . uniqid();

    // Default colors per dataset index
    $palette = [
        ['border' => '#3b82f6', 'bg' => 'rgba(59,130,246,0.08)'],   // blue
        ['border' => '#a855f7', 'bg' => 'rgba(168,85,247,0.08)'],   // purple
        ['border' => '#10b981', 'bg' => 'rgba(16,185,129,0.08)'],   // green
        ['border' => '#f59e0b', 'bg' => 'rgba(245,158,11,0.08)'],   // amber
    ];
@endphp

<div class="bg-white/80 backdrop-blur-sm rounded-xl p-6 shadow-lg border border-gray-100">
    <h3 class="text-lg font-semibold text-gray-800 mb-4">
        <i class="fas fa-chart-line text-blue-500 mr-2"></i>{{ $title }}
    </h3>

    @if(!empty($labels) && !empty($datasets))
        <div class="relative h-64">
            <canvas id="{{ $chartId }}"
                    data-labels="{{ json_encode($labels) }}"
                    data-datasets="{{ json_encode($datasets) }}">
            </canvas>
        </div>
    @else
        <div class="flex flex-col items-center justify-center h-40 text-gray-400">
            <i class="fas fa-chart-line text-4xl mb-3 text-gray-300"></i>
            <p class="text-sm">No trend data available yet.</p>
        </div>
    @endif
</div>

@push('scripts')
<script>
(function () {
    const canvas = document.getElementById('{{ $chartId }}');
    if (!canvas || typeof Chart === 'undefined') return;

    const labels   = JSON.parse(canvas.dataset.labels   || '[]');
    const datasets = JSON.parse(canvas.dataset.datasets || '[]');

    const palette = [
        { border: '#3b82f6', bg: 'rgba(59,130,246,0.08)' },
        { border: '#a855f7', bg: 'rgba(168,85,247,0.08)' },
        { border: '#10b981', bg: 'rgba(16,185,129,0.08)' },
        { border: '#f59e0b', bg: 'rgba(245,158,11,0.08)' },
    ];

    const chartDatasets = datasets.map((ds, i) => {
        const color = palette[i % palette.length];
        return {
            label: ds.label,
            data: ds.data,
            borderColor: color.border,
            backgroundColor: color.bg,
            borderWidth: 2.5,
            pointRadius: 3,
            pointHoverRadius: 5,
            fill: true,
            tension: 0.4,
        };
    });

    new Chart(canvas, {
        type: 'line',
        data: { labels, datasets: chartDatasets },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            interaction: { mode: 'index', intersect: false },
            plugins: {
                legend: {
                    position: 'top',
                    labels: { usePointStyle: true, pointStyleWidth: 8, font: { size: 12 } }
                },
                tooltip: { mode: 'index', intersect: false }
            },
            scales: {
                x: {
                    grid: { display: false },
                    ticks: { font: { size: 11 }, maxRotation: 45 }
                },
                y: {
                    beginAtZero: true,
                    grid: { color: 'rgba(0,0,0,0.05)' },
                    ticks: { font: { size: 11 }, precision: 0 }
                }
            },
            animation: { duration: 800, easing: 'easeInOutQuart' }
        }
    });
})();
</script>
@endpush
