@props([
    'label',
    'value',
    'icon'  => null,
    'color' => 'brand',
    'trend' => null,        // numeric: +12.5 / -8.2 / null
    'trendLabel' => null,   // texto extra opcional
    'hint'  => null,
    'sparkline' => null,    // array de números opcional
    'sparkColor' => null,
])

@php
    $palette = [
        'brand'   => ['bg' => 'bg-brand-50',    'text' => 'text-brand-600',   'spark' => '#6366f1'],
        'emerald' => ['bg' => 'bg-emerald-50',  'text' => 'text-emerald-600', 'spark' => '#10b981'],
        'amber'   => ['bg' => 'bg-amber-50',    'text' => 'text-amber-600',   'spark' => '#f59e0b'],
        'rose'    => ['bg' => 'bg-rose-50',     'text' => 'text-rose-600',    'spark' => '#f43f5e'],
        'sky'     => ['bg' => 'bg-sky-50',      'text' => 'text-sky-600',     'spark' => '#0ea5e9'],
        'violet'  => ['bg' => 'bg-violet-50',   'text' => 'text-violet-600',  'spark' => '#8b5cf6'],
        'orange'  => ['bg' => 'bg-orange-50',   'text' => 'text-orange-600',  'spark' => '#f97316'],
        'slate'   => ['bg' => 'bg-ink-100',     'text' => 'text-ink-700',     'spark' => '#64748b'],
    ];
    $tones = $palette[$color] ?? $palette['brand'];
    $sparkColor = $sparkColor ?? $tones['spark'];
    $chartId = 'spark-'.uniqid();
@endphp

<div class="card card-pad relative overflow-hidden hover:shadow-soft-md transition-shadow">
    <div class="flex items-start justify-between gap-3">
        <div class="min-w-0 flex-1">
            <p class="text-xs font-medium text-ink-500 uppercase tracking-wider">{{ $label }}</p>
            <p class="mt-2 text-[28px] leading-none font-bold text-ink-900 font-display tracking-tight truncate">{{ $value }}</p>

            <div class="mt-2 flex items-center gap-2 text-xs">
                @if ($trend !== null)
                    <span @class([
                        'inline-flex items-center gap-0.5 font-semibold px-1.5 py-0.5 rounded-md',
                        'bg-emerald-50 text-emerald-700' => (float) $trend > 0,
                        'bg-rose-50 text-rose-700'        => (float) $trend < 0,
                        'bg-ink-100 text-ink-600'         => (float) $trend == 0,
                    ])>
                        @if ((float) $trend > 0)
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M14.707 12.707a1 1 0 01-1.414 0L10 9.414l-3.293 3.293a1 1 0 01-1.414-1.414l4-4a1 1 0 011.414 0l4 4a1 1 0 010 1.414z" clip-rule="evenodd"/></svg>
                        @elseif ((float) $trend < 0)
                            <svg class="w-3 h-3" fill="currentColor" viewBox="0 0 20 20"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"/></svg>
                        @endif
                        {{ (float) $trend > 0 ? '+' : '' }}{{ $trend }}%
                    </span>
                @endif
                @if ($trendLabel)
                    <span class="text-ink-400">{{ $trendLabel }}</span>
                @elseif ($hint)
                    <span class="text-ink-400">{{ $hint }}</span>
                @endif
            </div>
        </div>

        @if ($icon)
            <div class="rounded-xl p-2.5 {{ $tones['bg'] }} {{ $tones['text'] }} flex-shrink-0">
                {!! $icon !!}
            </div>
        @endif
    </div>

    @if ($sparkline)
        <div id="{{ $chartId }}" class="mt-3 -mb-1 h-12"></div>
        @push('scripts')
            <script>
                document.addEventListener('DOMContentLoaded', function () {
                    const el = document.querySelector('#{{ $chartId }}');
                    if (!el || typeof ApexCharts === 'undefined') return;
                    new ApexCharts(el, {
                        chart: { type: 'area', height: 50, sparkline: { enabled: true } },
                        stroke: { curve: 'smooth', width: 2 },
                        fill: { type: 'gradient', gradient: { shadeIntensity: 1, opacityFrom: 0.3, opacityTo: 0, stops: [0, 100] } },
                        series: [{ data: @json(array_values((array) $sparkline)) }],
                        colors: ['{{ $sparkColor }}'],
                        tooltip: { enabled: false },
                    }).render();
                });
            </script>
        @endpush
    @endif
</div>