{{--
  <x-deluxe-spark :data="$weeklyTrend" type="line" color="primary" height="40" :labels="$labels" />
  <x-deluxe-spark :data="$monthlyBreakdown" type="bar" color="success" height="60" :labels="$labels" />

  Inline SVG mini-chart — sin dependencias JS. Para trends y monthly breakdowns.

  Props:
    - data:   array<int|float> — valores (eje Y)
    - labels: ?array<string>   — etiquetas eje X (opcional)
    - type:   'line'|'bar'     — tipo de chart
    - color:  string           — bootstrap color (primary, success, warning, etc.)
    - height: int              — altura en px (default 40)
    - width:  string|int       — ancho (default '100%')
    - show-labels: bool        — mostrar labels eje X (default false)
    - show-values: bool        — mostrar valor encima de bar/punto final (default false)
    - format:  ?callable       — formateo de valores ej. fn($v) => '$'.number_format($v)
--}}
@props([
    'data' => [],
    'labels' => [],
    'type' => 'line',
    'color' => 'primary',
    'height' => 40,
    'width' => '100%',
    'showLabels' => false,
    'showValues' => false,
])

@php
    $values = array_values(array_map(fn($v) => is_numeric($v) ? (float) $v : 0, $data));
    $n = count($values);

    if ($n === 0) {
        $svg = '';
    } else {
        $max = max($values);
        $min = min($values);
        $range = max(1, $max - min(0, $min));
        $vbWidth = 100;
        $vbHeight = 30;
        $paddingY = 2;

        if ($type === 'line') {
            $points = [];
            foreach ($values as $i => $v) {
                $x = $n === 1 ? 50 : ($i / ($n - 1)) * $vbWidth;
                $y = $vbHeight - $paddingY - (($v - min(0, $min)) / $range) * ($vbHeight - 2 * $paddingY);
                $points[] = round($x, 2) . ',' . round($y, 2);
            }
            $polyline = implode(' ', $points);
            $lastPoint = end($points);
            [$lastX, $lastY] = explode(',', $lastPoint);
        }
    }
@endphp

@if($n === 0)
    <div class="text-center text-gray-400 fs-8 py-3" style="height: {{ $height }}px;">Sin datos</div>
@else
    <div style="width: {{ is_numeric($width) ? $width.'px' : $width }};">
        <svg viewBox="0 -3 {{ $vbWidth }} {{ $vbHeight + 6 }}" preserveAspectRatio="none"
             style="height: {{ $height }}px; width: 100%; display: block; overflow: visible;">
            @if($type === 'line')
                {{-- Area fill under line --}}
                <polyline points="0,{{ $vbHeight }} {{ $polyline }} {{ $vbWidth }},{{ $vbHeight }}"
                          fill="var(--bs-{{ $color }})" fill-opacity="0.15" />
                {{-- Line --}}
                <polyline points="{{ $polyline }}"
                          fill="none" stroke="var(--bs-{{ $color }})" stroke-width="1.5"
                          stroke-linejoin="round" stroke-linecap="round"
                          vector-effect="non-scaling-stroke" />
                {{-- Last point dot --}}
                <circle cx="{{ $lastX }}" cy="{{ $lastY }}" r="2" fill="var(--bs-{{ $color }})" />
            @elseif($type === 'bar')
                @php $barWidth = $vbWidth / max(1, $n); @endphp
                @foreach($values as $i => $v)
                    @php
                        $hPct = $range > 0 ? (($v - min(0, $min)) / $range) : 0;
                        $barH = max(0.5, ($vbHeight - 2 * $paddingY) * $hPct);
                        $x = $i * $barWidth + $barWidth * 0.15;
                        $w = $barWidth * 0.7;
                        $y = $vbHeight - $paddingY - $barH;
                    @endphp
                    <rect x="{{ round($x, 2) }}" y="{{ round($y, 2) }}"
                          width="{{ round($w, 2) }}" height="{{ round($barH, 2) }}"
                          fill="var(--bs-{{ $color }})" fill-opacity="0.85" rx="0.5" />
                @endforeach
            @endif
        </svg>
        @if($showLabels && !empty($labels))
            <div class="d-flex justify-content-between mt-1">
                @foreach($labels as $lbl)
                    <span class="text-gray-500 fs-9">{{ $lbl }}</span>
                @endforeach
            </div>
        @endif
        @if($showValues)
            <div class="d-flex justify-content-between mt-1 fs-9 text-gray-700 fw-bold">
                <span>{{ $values[0] ?? '—' }}</span>
                <span class="text-{{ $color }}">{{ end($values) }}</span>
            </div>
        @endif
    </div>
@endif