@props([
    'current' => 0,
    'target'  => 1,
    'label'   => 'Progress',
    'color'   => 'blue',
])

@php
    $chartId = 'gauge_' . uniqid();
    $target  = max((float) $target, 1);
    $current = (float) $current;
    $pct     = min(round(($current / $target) * 100), 100);
    $remaining = max($target - $current, 0);

    $colorMap = [
        'blue'   => ['fill' => '#3b82f6', 'bg' => '#1e3a5f', 'text' => 'text-blue-400'],
        'green'  => ['fill' => '#22c55e', 'bg' => '#14532d', 'text' => 'text-green-400'],
        'amber'  => ['fill' => '#f59e0b', 'bg' => '#451a03', 'text' => 'text-amber-400'],
        'purple' => ['fill' => '#a855f7', 'bg' => '#3b0764', 'text' => 'text-purple-400'],
        'red'    => ['fill' => '#ef4444', 'bg' => '#450a0a', 'text' => 'text-red-400'],
    ];
    $c = $colorMap[$color] ?? $colorMap['blue'];
@endphp

<div class="bg-gray-800 border border-gray-700 rounded-xl p-6 flex flex-col items-center gap-4">
    <h3 class="text-sm font-medium text-gray-400 uppercase tracking-wide">{{ $label }}</h3>

    <div class="relative w-36 h-36">
        <canvas id="{{ $chartId }}"
                data-pct="{{ $pct }}"
                data-fill="{{ $c['fill'] }}"
                data-bg="{{ $c['bg'] }}">
        </canvas>
        <div class="absolute inset-0 flex flex-col items-center justify-center">
            <span class="text-2xl font-bold text-white">{{ $pct }}%</span>
            <span class="text-xs text-gray-400">attained</span>
        </div>
    </div>

    <div class="w-full grid grid-cols-2 gap-3 text-center">
        <div class="bg-gray-700/50 rounded-lg p-3">
            <p class="text-xs text-gray-400 mb-1">Current</p>
            <p class="text-lg font-bold text-white">{{ number_format($current) }}</p>
        </div>
        <div class="bg-gray-700/50 rounded-lg p-3">
            <p class="text-xs text-gray-400 mb-1">Target</p>
            <p class="text-lg font-bold text-white">{{ number_format($target) }}</p>
        </div>
    </div>
</div>

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

    const pct  = parseFloat(canvas.dataset.pct) || 0;
    const fill = canvas.dataset.fill;
    const bg   = canvas.dataset.bg;

    new Chart(canvas, {
        type: 'doughnut',
        data: {
            datasets: [{
                data: [pct, 100 - pct],
                backgroundColor: [fill, bg],
                borderWidth: 0,
                hoverOffset: 0,
            }]
        },
        options: {
            cutout: '72%',
            rotation: -90,
            circumference: 180,
            plugins: { legend: { display: false }, tooltip: { enabled: false } },
            animation: { animateRotate: true, duration: 800 }
        }
    });
})();
</script>
@endpush
