@props([
    'series' => [],        // [['label' => 'Mon', 'value' => 1200], …]
    'height' => 220,
    'formatter' => null,   // callable for the value labels
    'slot' => 1,           // categorical slot (1–4)
    'label' => 'Value',
])

@php
    /*
     * Column chart for change over time.
     *
     * Server-rendered SVG on purpose: the dashboard must paint on the first
     * response, and a POS runs on hardware where a charting bundle is a real
     * cost. Bars carry a 2px surface gap, 4px rounded data-ends anchored to
     * the baseline, and a native tooltip per mark.
     */
    $rows = collect($series)->values();
    $max = max(1, (float) $rows->max('value'));
    $count = max(1, $rows->count());

    $width = 640;
    $padTop = 16;
    $padBottom = 28;
    $padLeft = 8;
    $plotHeight = $height - $padTop - $padBottom;

    $slotWidth = ($width - $padLeft * 2) / $count;
    $barWidth = max(3, min(46, $slotWidth - 6));   // the 2px+ surface gap

    $format = $formatter ?? fn ($value) => number_format((float) $value);

    // Only label the peak and the latest column — a number on every bar is noise.
    $peakIndex = $rows->search(fn ($row) => (float) $row['value'] === $max);
    $lastIndex = $count - 1;
@endphp

<div class="viz">
    <x-chart.palette />

    @if ($rows->isEmpty() || $max <= 0)
        <div class="flex h-40 items-center justify-center text-sm text-slate-400">
            No data for this period.
        </div>
    @else
        <svg viewBox="0 0 {{ $width }} {{ $height }}" class="w-full" style="height: {{ $height }}px"
             role="img" aria-label="{{ $label }} by period">

            {{-- Recessive gridlines --}}
            @foreach ([0, 0.25, 0.5, 0.75, 1] as $fraction)
                @php $y = $padTop + $plotHeight * (1 - $fraction); @endphp
                <line x1="{{ $padLeft }}" y1="{{ $y }}" x2="{{ $width - $padLeft }}" y2="{{ $y }}"
                      stroke="var(--viz-grid)" stroke-width="1" />
            @endforeach

            @foreach ($rows as $index => $row)
                @php
                    $value = (float) $row['value'];
                    $barHeight = max(2, $plotHeight * ($value / $max));
                    $x = $padLeft + $index * $slotWidth + ($slotWidth - $barWidth) / 2;
                    $y = $padTop + $plotHeight - $barHeight;
                @endphp

                <rect
                    class="viz-bar"
                    x="{{ round($x, 2) }}" y="{{ round($y, 2) }}"
                    width="{{ round($barWidth, 2) }}" height="{{ round($barHeight, 2) }}"
                    rx="4" ry="4"
                    fill="var(--series-{{ $slot }})"
                >
                    <title>{{ $row['label'] }}: {{ $format($value) }}</title>
                </rect>

                {{-- Direct labels on the peak and the most recent column only. --}}
                @if ($index === $peakIndex || $index === $lastIndex)
                    <text x="{{ round($x + $barWidth / 2, 2) }}" y="{{ round($y - 5, 2) }}"
                          text-anchor="middle" font-size="10" font-weight="600" fill="var(--viz-text)">
                        {{ $format($value) }}
                    </text>
                @endif

                {{-- Thin out x labels once the bars get crowded. --}}
                @if ($count <= 14 || $index % (int) ceil($count / 12) === 0)
                    <text x="{{ round($x + $barWidth / 2, 2) }}" y="{{ $height - 8 }}"
                          text-anchor="middle" font-size="10" fill="var(--viz-text-muted)">
                        {{ $row['label'] }}
                    </text>
                @endif
            @endforeach
        </svg>

        {{-- Table view: the relief the palette's contrast WARN requires. --}}
        <details class="mt-2">
            <summary class="cursor-pointer text-xs text-slate-400 hover:text-slate-600">View as table</summary>

            <table class="table mt-2 text-xs">
                <thead><tr><th>Period</th><th class="num">{{ $label }}</th></tr></thead>
                <tbody>
                    @foreach ($rows as $row)
                        <tr>
                            <td>{{ $row['label'] }}</td>
                            <td class="num">{{ $format($row['value']) }}</td>
                        </tr>
                    @endforeach
                </tbody>
            </table>
        </details>
    @endif
</div>