@props([
    'series' => [],        // [['date' => 'Y-m-d', 'value' => int], ...]
    'label' => '',
    'format' => 'number',  // number | bytes | money
    'accent' => 'electric',
])

@php
    /*
     | Inline SVG area chart. No charting library: this draws one shape from a
     | list of numbers, and pulling in ~100KB of JavaScript to do that would
     | cost more than the feature is worth — on an admin page that also has to
     | work with JS disabled.
     */
    $points = collect($series);
    $values = $points->pluck('value');

    $max = max(1, (int) $values->max());
    $total = (int) $values->sum();
    $latest = (int) ($values->last() ?? 0);

    $width = 600;
    $height = 120;
    $count = max(1, $points->count() - 1);

    $coords = $points->values()->map(function (array $point, int $index) use ($max, $width, $height, $count) {
        return [
            'x' => round($index / $count * $width, 2),
            // SVG y grows downward, so invert. 4px inset keeps the peak from
            // being clipped by the viewBox edge.
            'y' => round($height - ($point['value'] / $max) * ($height - 8) - 4, 2),
            'date' => $point['date'],
            'value' => $point['value'],
        ];
    });

    $line = $coords->map(fn ($c) => "{$c['x']},{$c['y']}")->implode(' ');
    $area = "0,{$height} ".$line." {$width},{$height}";

    $id = 'chart-'.Str::random(6);

    $stroke = $accent === 'cyan' ? 'var(--color-cyan-400)' : 'var(--color-electric-400)';

    $display = match ($format) {
        'bytes' => format_bytes($total),
        'money' => format_money($total),
        default => number_format($total),
    };
@endphp

<div {{ $attributes->merge(['class' => 'zylo-panel p-5']) }}>
    <div class="flex items-baseline justify-between gap-3">
        <p class="text-xs font-medium uppercase tracking-wide text-silver-500">{{ $label }}</p>
        <p class="font-display text-lg font-semibold text-silver-100">{{ $display }}</p>
    </div>

    @if ($total === 0)
        <p class="mt-6 mb-2 text-center text-xs text-silver-600">No data in this period.</p>
    @else
        <svg viewBox="0 0 {{ $width }} {{ $height }}" preserveAspectRatio="none"
             class="mt-4 h-28 w-full" role="img"
             aria-label="{{ $label }} over the last {{ $points->count() }} days">
            <defs>
                <linearGradient id="{{ $id }}" x1="0" y1="0" x2="0" y2="1">
                    <stop offset="0%" stop-color="{{ $stroke }}" stop-opacity="0.35"/>
                    <stop offset="100%" stop-color="{{ $stroke }}" stop-opacity="0"/>
                </linearGradient>
            </defs>

            <polygon points="{{ $area }}" fill="url(#{{ $id }})"/>
            <polyline points="{{ $line }}" fill="none" stroke="{{ $stroke }}"
                      stroke-width="2" stroke-linejoin="round" stroke-linecap="round"
                      vector-effect="non-scaling-stroke"/>
        </svg>

        {{-- The same numbers as text. A chart alone is unreadable to a screen
             reader, and preserveAspectRatio="none" distorts any inline label. --}}
        <details class="mt-3">
            <summary class="cursor-pointer text-xs text-silver-500 hover:text-silver-300">
                View as data
            </summary>
            <div class="mt-2 max-h-40 overflow-y-auto">
                <table class="w-full text-xs">
                    <caption class="sr-only">{{ $label }} by day</caption>
                    <tbody class="divide-y divide-line">
                        @foreach ($coords->reverse()->take(14) as $c)
                            <tr>
                                <td class="py-1 text-silver-500">{{ $c['date'] }}</td>
                                <td class="py-1 text-right text-silver-300">
                                    @if ($format === 'bytes') {{ format_bytes($c['value']) }}
                                    @elseif ($format === 'money') {{ format_money($c['value']) }}
                                    @else {{ number_format($c['value']) }}
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                </table>
            </div>
        </details>
    @endif
</div>