{{-- Spider/radar of field mastery — port of ags_parent RadarChart.jsx.
     Vars: $items = [['name'=>, 'value'=>float|null], ...], $unit='M', $color --}}
@php
    $unit  = $unit  ?? 'M';
    $color = $color ?? '#88C808';
    $SIZE = 340; $CX = 170; $CY = 170; $R_MAX = 120;
    $items = array_values($items ?? []);
    $values = array_map(fn ($it) => $it['value'] === null ? 0 : (float) $it['value'], $items);
    $peak = max(array_merge([100], $values));
    $ceiling = (int) (ceil($peak / 100) * 100);
    $ringCount = max(1, (int) ($ceiling / 100));
    $N = max(3, count($items));
    $angle = fn ($i) => -M_PI / 2 + (2 * M_PI * $i) / $N;
    $xy = function ($i, $value) use ($angle, $CX, $CY, $R_MAX, $ceiling) {
        $r = ($value / max(1, $ceiling)) * $R_MAX;
        return [$CX + $r * cos($angle($i)), $CY + $r * sin($angle($i))];
    };
    $profile = [];
    foreach (range(0, $N - 1) as $i) {
        $profile[] = implode(',', $xy($i, $items[$i] ?? false ? $values[$i] : 0));
    }
@endphp

<svg viewBox="0 0 {{ $SIZE }} {{ $SIZE }}" width="100%" style="display:block;max-width:440px;margin:0 auto">
    @for ($k = 0; $k < $ringCount; $k++)
        @php($v = ($k + 1) * 100)
        @php($pts = collect(range(0, $N - 1))->map(fn ($i) => implode(',', $xy($i, $v)))->implode(' '))
        <polygon points="{{ $pts }}" fill="none" stroke="#e5e7eb" stroke-width="0.5" opacity="0.6" />
    @endfor

    @for ($i = 0; $i < $N; $i++)
        @php([$x, $y] = $xy($i, $ceiling))
        <line x1="{{ $CX }}" y1="{{ $CY }}" x2="{{ $x }}" y2="{{ $y }}" stroke="#e5e7eb" stroke-width="0.7" />
    @endfor

    <polygon points="{{ implode(' ', $profile) }}" fill="{{ $color }}" fill-opacity="0.2"
             stroke="{{ $color }}" stroke-width="1.6" stroke-linejoin="round" />

    @foreach ($items as $i => $it)
        @php([$x, $y] = $xy($i, $values[$i]))
        <circle cx="{{ $x }}" cy="{{ $y }}" r="3.5" fill="{{ $color }}" stroke="#fff" stroke-width="1.5" />
        @php([$lx, $ly] = $xy($i, $ceiling + 22))
        @php($cos = cos($angle($i)))
        @php($anchor = abs($cos) < 0.25 ? 'middle' : ($cos > 0 ? 'start' : 'end'))
        @php($short = mb_strlen($it['name']) > 18 ? mb_substr($it['name'], 0, 17) . '…' : $it['name'])
        <text x="{{ $lx }}" y="{{ $ly - 5 }}" text-anchor="{{ $anchor }}" font-size="10.5" font-weight="700" fill="#2B2B2B">{{ $short }}</text>
        <text x="{{ $lx }}" y="{{ $ly + 8 }}" text-anchor="{{ $anchor }}" font-size="10" font-weight="700" fill="{{ $color }}">{{ $it['value'] !== null ? $unit . round($it['value']) : '—' }}</text>
    @endforeach
</svg>
<div style="margin-top:4px;font-size:11px;color:#6b7280;text-align:center">Rings mark every 100 Maxile (one grade level).</div>