{{-- Expects: $kpi (App\Models\Kpi), $chart (array from App\Support\KpiChart::build) --}}
<div class="rounded-md bg-white p-4">
    <p class="mb-1 text-sm font-semibold text-gray-900">{{ $kpi->name }} — last 12 months</p>
    <p class="mb-3 text-xs text-gray-500">{{ $kpi->thresholdSummary() }}@if ($kpi->unit_label) · unit: {{ $kpi->unit_label }}@endif</p>

    @if (($chart['type'] === 'line' && empty($chart['points'])) || ($chart['type'] === 'milestone' && empty($chart['markers'])))
        <p class="py-4 text-sm text-gray-500">No entries in the last 12 months.</p>
    @elseif ($chart['type'] === 'line')
        <svg viewBox="0 0 {{ $chart['width'] }} {{ $chart['height'] }}" role="img" aria-label="{{ $chart['aria'] }}"
             class="h-auto w-full max-w-3xl" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif">
            {{-- Threshold zone bands (10% status washes) --}}
            @foreach ($chart['bands'] as $band)
                <rect x="{{ $chart['plot']['x'] }}" y="{{ $band['y'] }}" width="{{ $chart['plot']['w'] }}" height="{{ $band['h'] }}"
                      fill="{{ $band['color'] }}" fill-opacity="0.10" />
            @endforeach

            {{-- Gridlines + y ticks --}}
            @foreach ($chart['gridlines'] as $grid)
                <line x1="{{ $chart['plot']['x'] }}" y1="{{ $grid['y'] }}" x2="{{ $chart['plot']['x'] + $chart['plot']['w'] }}" y2="{{ $grid['y'] }}"
                      stroke="{{ \App\Support\KpiChart::GRIDLINE }}" stroke-width="1" />
                <text x="{{ $chart['plot']['x'] - 6 }}" y="{{ $grid['y'] + 3 }}" text-anchor="end"
                      font-size="10" fill="{{ \App\Support\KpiChart::INK_MUTED }}">{{ $grid['label'] }}</text>
            @endforeach

            {{-- Threshold / target reference lines --}}
            @foreach ($chart['refLines'] as $ref)
                <line x1="{{ $chart['plot']['x'] }}" y1="{{ $ref['y'] }}" x2="{{ $chart['plot']['x'] + $chart['plot']['w'] }}" y2="{{ $ref['y'] }}"
                      stroke="{{ \App\Support\KpiChart::INK_MUTED }}" stroke-width="1" stroke-dasharray="4 3" />
                <text x="{{ $chart['plot']['x'] + $chart['plot']['w'] + 4 }}" y="{{ $ref['y'] + 3 }}"
                      font-size="9" fill="{{ \App\Support\KpiChart::INK_SECONDARY }}">{{ $ref['label'] }}</text>
            @endforeach

            {{-- Value line (gaps split the path; pathLength normalizes the draw-in animation) --}}
            @foreach ($chart['paths'] as $path)
                <path d="{{ $path }}" pathLength="1" class="kpi-line"
                      fill="none" stroke="{{ $chart['lineColor'] }}" stroke-width="2"
                      stroke-linecap="round" stroke-linejoin="round" />
            @endforeach

            {{-- Points, status-colored with a 2px surface ring --}}
            @foreach ($chart['points'] as $point)
                <circle cx="{{ $point['x'] }}" cy="{{ $point['y'] }}" r="4.5" class="kpi-pop" style="--i: {{ $loop->index }}"
                        fill="{{ $point['color'] }}" stroke="#ffffff" stroke-width="2">
                    <title>{{ $point['title'] }}</title>
                </circle>
            @endforeach

            {{-- End value label (selective direct label) --}}
            @if ($chart['endLabel'])
                <text x="{{ $chart['endLabel']['x'] }}" y="{{ $chart['endLabel']['y'] }}"
                      font-size="11" font-weight="600" fill="{{ \App\Support\KpiChart::INK_PRIMARY }}">{{ $chart['endLabel']['text'] }}</text>
            @endif

            {{-- Month labels --}}
            @foreach ($chart['monthLabels'] as $label)
                <text x="{{ $label['x'] }}" y="{{ $label['y'] }}" text-anchor="middle"
                      font-size="9" fill="{{ \App\Support\KpiChart::INK_MUTED }}">{{ $label['label'] }}</text>
            @endforeach
        </svg>
    @else
        {{-- Milestone timeline: met / missed markers per month --}}
        <svg viewBox="0 0 {{ $chart['width'] }} {{ $chart['height'] }}" role="img" aria-label="{{ $chart['aria'] }}"
             class="h-auto w-full max-w-3xl" font-family="system-ui, -apple-system, 'Segoe UI', sans-serif">
            <line x1="{{ $chart['plot']['x'] }}" y1="{{ $chart['baseline'] }}" x2="{{ $chart['plot']['x'] + $chart['plot']['w'] }}" y2="{{ $chart['baseline'] }}"
                  stroke="{{ \App\Support\KpiChart::GRIDLINE }}" stroke-width="1" />
            @foreach ($chart['markers'] as $marker)
                <g class="kpi-pop" style="--i: {{ $loop->index }}">
                    <title>{{ $marker['title'] }}</title>
                    <circle cx="{{ $marker['x'] }}" cy="{{ $marker['y'] }}" r="9"
                            fill="{{ $marker['color'] }}" stroke="#ffffff" stroke-width="2" />
                    <text x="{{ $marker['x'] }}" y="{{ $marker['y'] + 3.5 }}" text-anchor="middle"
                          font-size="10" font-weight="700" fill="#ffffff">{{ $marker['glyph'] }}</text>
                </g>
            @endforeach
            @foreach ($chart['monthLabels'] as $label)
                <text x="{{ $label['x'] }}" y="{{ $label['y'] }}" text-anchor="middle"
                      font-size="9" fill="{{ \App\Support\KpiChart::INK_MUTED }}">{{ $label['label'] }}</text>
            @endforeach
        </svg>
    @endif
</div>