{{--
    Columnas SVG server-rendered (una serie).
    Espera: $data  = [['label' => '03/07', 'value' => 123, 'tip' => '...'], …]
            $color = hex de la serie
            $unit  = sustantivo para el tooltip por defecto ('peticiones', 'usuarios')
    Specs: barras ≤24px con remate superior redondeado 4px (base cuadrada),
    grid hairline sólido, ticks limpios, etiqueta directa sólo en el máximo.
--}}
@php
    $values = array_column($data, 'value');
    $n      = count($data);
    $max    = $n ? max($values) : 0;

    // Techo "limpio" del eje Y en 4 divisiones (1/2/5 × 10^k)
    if ($max <= 4) {
        $step = 1;
        $divs = max($max, 1);
    } else {
        $divs = 4;
        $raw  = $max / $divs;
        $pow  = pow(10, floor(log10($raw)));
        $step = 10 * $pow;
        foreach ([1, 2, 5] as $f) {
            if ($f * $pow >= $raw) { $step = $f * $pow; break; }
        }
    }
    $niceMax = $step * $divs;

    $W = 760; $H = 240;
    $padL = 46; $padR = 10; $padT = 16; $padB = 26;
    $plotW = $W - $padL - $padR;
    $plotH = $H - $padT - $padB;
    $baseY = $padT + $plotH;

    $band = $n ? $plotW / $n : $plotW;
    $barW = max(2, min(24, $band * 0.72));
    $skip = max(1, (int) ceil($n / 12));   // densidad de etiquetas X
    $maxIdx = $max > 0 ? array_search($max, $values) : null;

    $fmt = fn ($v) => number_format($v, 0, ',', '.');
@endphp

@if($max === 0)
    <div class="text-muted py-4 text-center" style="font-size:.85rem;">
        Sin datos en este rango todavía.
    </div>
@else
    <svg viewBox="0 0 {{ $W }} {{ $H }}" role="img" aria-label="{{ $ariaLabel ?? 'Gráfico de columnas' }}"
         style="width:100%;height:auto;display:block;font-family:inherit;">

        {{-- Grid + ticks Y (hairline sólido, recesivo) --}}
        @for($t = 0; $t <= $divs; $t++)
            @php $y = $baseY - ($t * $step / $niceMax) * $plotH; @endphp
            <line x1="{{ $padL }}" y1="{{ $y }}" x2="{{ $W - $padR }}" y2="{{ $y }}"
                  stroke="{{ $t === 0 ? '#c3c2b7' : '#e1e0d9' }}" stroke-width="1"
                  vector-effect="non-scaling-stroke" />
            <text x="{{ $padL - 6 }}" y="{{ $y + 3 }}" text-anchor="end"
                  font-size="10" fill="#898781" style="font-variant-numeric:tabular-nums;">{{ $fmt($t * $step) }}</text>
        @endfor

        {{-- Columnas --}}
        @foreach($data as $i => $point)
            @php
                $v    = $point['value'];
                $x    = $padL + $i * $band + ($band - $barW) / 2;
                $barH = ($v / $niceMax) * $plotH;
                $topY = $baseY - $barH;
                $r    = min(4, $barW / 2, $barH);
                $tip  = $point['tip'] ?? ($point['label'] . ' — ' . $fmt($v) . ' ' . ($unit ?? ''));
            @endphp

            @if($v > 0)
                <path d="M{{ $x }},{{ $baseY }}
                         L{{ $x }},{{ $topY + $r }}
                         Q{{ $x }},{{ $topY }} {{ $x + $r }},{{ $topY }}
                         L{{ $x + $barW - $r }},{{ $topY }}
                         Q{{ $x + $barW }},{{ $topY }} {{ $x + $barW }},{{ $topY + $r }}
                         L{{ $x + $barW }},{{ $baseY }} Z"
                      fill="{{ $color }}" />
            @endif

            {{-- Etiqueta directa: sólo el máximo --}}
            @if($i === $maxIdx)
                <text x="{{ $x + $barW / 2 }}" y="{{ $topY - 5 }}" text-anchor="middle"
                      font-size="10" font-weight="600" fill="#52514e">{{ $fmt($v) }}</text>
            @endif

            {{-- Etiqueta X --}}
            @if($i % $skip === 0)
                <text x="{{ $padL + $i * $band + $band / 2 }}" y="{{ $H - 8 }}" text-anchor="middle"
                      font-size="10" fill="#898781">{{ $point['label'] }}</text>
            @endif

            {{-- Zona de hover (toda la banda, tooltip JS) --}}
            <rect x="{{ $padL + $i * $band }}" y="{{ $padT }}" width="{{ $band }}" height="{{ $plotH }}"
                  fill="transparent" data-tip="{{ $tip }}" />
        @endforeach
    </svg>
@endif