@props([
    'title' => '',
    'value' => 0,
    'data'  => [],
    'color' => 'blue',
    'unit'  => '',
])

@php
    $chartId = 'sparkline_' . uniqid();
    $colorMap = [
        'blue'   => ['border' => '#3b82f6', 'bg' => 'rgba(59,130,246,0.15)',  'icon' => 'text-blue-400',   'badge' => 'bg-blue-500/20'],
        'green'  => ['border' => '#22c55e', 'bg' => 'rgba(34,197,94,0.15)',   'icon' => 'text-green-400',  'badge' => 'bg-green-500/20'],
        'red'    => ['border' => '#ef4444', 'bg' => 'rgba(239,68,68,0.15)',   'icon' => 'text-red-400',    'badge' => 'bg-red-500/20'],
        'amber'  => ['border' => '#f59e0b', 'bg' => 'rgba(245,158,11,0.15)', 'icon' => 'text-amber-400',  'badge' => 'bg-amber-500/20'],
        'purple' => ['border' => '#a855f7', 'bg' => 'rgba(168,85,247,0.15)', 'icon' => 'text-purple-400', 'badge' => 'bg-purple-500/20'],
    ];
    $c = $colorMap[$color] ?? $colorMap['blue'];
    $hasData = !empty($data) && count($data) > 1;
@endphp

<div class="bg-gray-800 border border-gray-700 rounded-xl p-5 flex flex-col gap-3">
    <div class="flex items-center justify-between">
        <span class="text-xs font-medium text-gray-400 uppercase tracking-wide">{{ $title }}</span>
        <span class="w-8 h-8 {{ $c['badge'] }} rounded-lg flex items-center justify-center">
            <i class="fas fa-chart-line {{ $c['icon'] }} text-sm"></i>
        </span>
    </div>

    <div class="flex items-end gap-1">
        <span class="text-3xl font-bold text-white">{{ number_format($value) }}</span>
        @if($unit)
            <span class="text-sm text-gray-400 mb-1">{{ $unit }}</span>
        @endif
    </div>

    @if($hasData)
        <div class="relative h-14">
            <canvas id="{{ $chartId }}"
                    data-values="{{ json_encode(array_values($data)) }}"
                    data-border="{{ $c['border'] }}"
                    data-bg="{{ $c['bg'] }}">
            </canvas>
        </div>
    @else
        <div class="h-14 flex items-center justify-center">
            <span class="text-xs text-gray-600">No data available</span>
        </div>
    @endif
</div>

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

    const values = JSON.parse(canvas.dataset.values || '[]');
    if (!values.length) return;

    new Chart(canvas, {
        type: 'line',
        data: {
            labels: values.map((_, i) => i),
            datasets: [{
                data: values,
                borderColor: canvas.dataset.border,
                backgroundColor: canvas.dataset.bg,
                borderWidth: 2,
                pointRadius: 0,
                fill: true,
                tension: 0.4,
            }]
        },
        options: {
            responsive: true,
            maintainAspectRatio: false,
            plugins: { legend: { display: false }, tooltip: { enabled: false } },
            scales: {
                x: { display: false },
                y: { display: false, beginAtZero: true }
            },
            animation: { duration: 600 }
        }
    });
})();
</script>
@endpush
