@props(['slices', 'label' => 'Répartition', 'stacked' => false])
@php
    // $slices : liste de ['name', 'value'] triée ; au-delà de 6 parts, le reste est regroupé en « Autres ».
    $palette = ['#12388a', '#f97316', '#0ea5e9', '#16a34a', '#a855f7', '#eab308', '#94a3b8'];
    $slices = collect($slices)->values();
    if ($slices->count() > 7) {
        $slices = $slices->take(6)->push(['name' => 'Autres', 'value' => $slices->slice(6)->sum('value')]);
    }
    $total = (int) $slices->sum('value');
    $r = 70; $c = 2 * M_PI * $r; $offset = 0;
@endphp
<div @class(['flex flex-col items-center gap-4', 'sm:flex-row sm:items-center' => ! $stacked])>
    <svg viewBox="0 0 200 200" role="img" aria-label="{{ $label }}" class="h-44 w-44 shrink-0">
        <title>{{ $label }}</title>
        <circle cx="100" cy="100" r="{{ $r }}" fill="none" stroke="#f1f5f9" stroke-width="30" />
        @if ($total > 0)
            @foreach ($slices as $i => $slice)
                @php $len = $c * $slice['value'] / $total; @endphp
                @if ($len > 0)
                    <circle cx="100" cy="100" r="{{ $r }}" fill="none" stroke="{{ $palette[$i % count($palette)] }}" stroke-width="30"
                            stroke-dasharray="{{ round($len, 2) }} {{ round($c - $len, 2) }}" stroke-dashoffset="{{ round(-$offset, 2) }}" transform="rotate(-90 100 100)">
                        <title>{{ $slice['name'] }} : {{ \App\Support\Money::format($slice['value']) }} ({{ round($slice['value'] * 100 / $total) }} %)</title>
                    </circle>
                @endif
                @php $offset += $len; @endphp
            @endforeach
        @endif
        <text x="100" y="96" text-anchor="middle" font-size="11" fill="#64748b">Total</text>
        <text x="100" y="116" text-anchor="middle" font-size="18" font-weight="700" fill="#0f172a">{{ \App\Support\Money::compact($total) }}</text>
    </svg>
    <ul class="w-full min-w-0 space-y-1.5 text-sm">
        @forelse ($slices as $i => $slice)
            <li class="flex items-center justify-between gap-2">
                <span class="flex min-w-0 items-center gap-2"><span class="h-3 w-3 shrink-0 rounded-sm" style="background: {{ $palette[$i % count($palette)] }}"></span><span class="truncate">{{ $slice['name'] }}</span></span>
                <span class="shrink-0 tabular-nums"><span class="text-slate-500">{{ \App\Support\Money::compact($slice['value']) }}</span> <span class="ml-1 font-semibold">{{ $total > 0 ? round($slice['value'] * 100 / $total) : 0 }} %</span></span>
            </li>
        @empty
            <li class="text-slate-400">Aucune vente sur la période.</li>
        @endforelse
    </ul>
</div>