@props([
    'series' => [],   // [['label' => 'Cash', 'value' => 12000], …] — max 4 slices
    'formatter' => null,
    'centerLabel' => null,
    'centerValue' => null,
])

@php
    /*
     * Share-of-total, capped at four slices.
     *
     * A fifth hue would have to be generated, which the palette forbids, so
     * anything past the top four folds into "Other". Every slice is also
     * labelled in the legend, so identity never depends on colour.
     */
    $rows = collect($series)->sortByDesc('value')->values();

    if ($rows->count() > 4) {
        $head = $rows->take(3);
        $otherTotal = $rows->skip(3)->sum('value');
        $rows = $head->push(['label' => 'Other', 'value' => $otherTotal])->values();
    }

    $total = (float) $rows->sum('value');
    $format = $formatter ?? fn ($value) => number_format((float) $value);

    $size = 160;
    $radius = 62;
    $stroke = 22;
    $circumference = 2 * M_PI * $radius;

    $offset = 0;
    $segments = [];

    foreach ($rows as $index => $row) {
        $fraction = $total > 0 ? (float) $row['value'] / $total : 0;

        $segments[] = [
            'label' => $row['label'],
            'value' => (float) $row['value'],
            'percent' => round($fraction * 100, 1),
            'slot' => ($index % 4) + 1,
            // A 2px surface gap between adjacent arcs.
            'dash' => max(0, $circumference * $fraction - 2).' '.$circumference,
            'offset' => -$offset,
        ];

        $offset += $circumference * $fraction;
    }
@endphp

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

    @if ($total <= 0)
        <div class="flex h-32 items-center justify-center text-sm text-slate-400">No data for this period.</div>
    @else
        <div class="flex flex-wrap items-center gap-6">
            <svg viewBox="0 0 {{ $size }} {{ $size }}" style="width:{{ $size }}px;height:{{ $size }}px"
                 role="img" aria-label="Share of total">
                <g transform="rotate(-90 {{ $size / 2 }} {{ $size / 2 }})">
                    @foreach ($segments as $segment)
                        <circle
                            cx="{{ $size / 2 }}" cy="{{ $size / 2 }}" r="{{ $radius }}"
                            fill="none"
                            stroke="var(--series-{{ $segment['slot'] }})"
                            stroke-width="{{ $stroke }}"
                            stroke-dasharray="{{ $segment['dash'] }}"
                            stroke-dashoffset="{{ $segment['offset'] }}"
                        >
                            <title>{{ $segment['label'] }}: {{ $format($segment['value']) }} ({{ $segment['percent'] }}%)</title>
                        </circle>
                    @endforeach
                </g>

                @if ($centerValue)
                    <text x="{{ $size / 2 }}" y="{{ $size / 2 - 2 }}" text-anchor="middle"
                          font-size="17" font-weight="700" fill="var(--viz-text)">{{ $centerValue }}</text>
                    <text x="{{ $size / 2 }}" y="{{ $size / 2 + 14 }}" text-anchor="middle"
                          font-size="10" fill="var(--viz-text-muted)">{{ $centerLabel }}</text>
                @endif
            </svg>

            {{-- Legend: always present, always labelled. --}}
            <ul class="min-w-0 flex-1 space-y-1.5 text-sm">
                @foreach ($segments as $segment)
                    <li class="flex items-center gap-2">
                        <span class="h-2.5 w-2.5 shrink-0 rounded-sm"
                              style="background: var(--series-{{ $segment['slot'] }})"></span>

                        <span class="min-w-0 flex-1 truncate text-slate-600 dark:text-slate-300">{{ $segment['label'] }}</span>

                        <span class="tabular shrink-0 font-semibold text-slate-900 dark:text-white">
                            {{ $format($segment['value']) }}
                        </span>

                        <span class="tabular w-12 shrink-0 text-right text-xs text-slate-400">{{ $segment['percent'] }}%</span>
                    </li>
                @endforeach
            </ul>
        </div>
    @endif
</div>