{{-- Longitudinal maxile line — port of ags_parent MaxileGrowthChart.jsx.
     Vars: $points = [['date'=>'Y-m-d','maxile'=>int], ...], $current, $color, $label --}}
@php
    $color = $color ?? '#88C808';
    $label = $label ?? 'Maxile over time';
    $points = array_values($points ?? []);
@endphp

@if (count($points) < 2)
    <div class="text-sm text-gray-500 dark:text-gray-400 rounded-lg border border-gray-200 dark:border-gray-700 p-3">
        Not enough history yet to chart growth — it fills in as sessions are completed.
    </div>
@else
    @php
        $W = 320; $H = 170; $padL = 30; $padR = 12; $padT = 14; $padB = 26;
        $maxiles = array_map(fn ($p) => $p['maxile'], $points);
        $lo = (int) (floor(min($maxiles) / 100) * 100);
        $hi = (int) (ceil(max($maxiles) / 100) * 100);
        $span = max(100, $hi - $lo);
        $n = count($points);
        $x = fn ($i) => $padL + ($i * ($W - $padL - $padR)) / max(1, $n - 1);
        $y = fn ($v) => $padT + ($H - $padT - $padB) * (1 - ($v - $lo) / $span);
        $line = collect($points)->map(fn ($p, $i) => $x($i) . ',' . $y($p['maxile']))->implode(' ');
        $grade = fn ($v) => $v <= 0 ? 'K' : 'G' . round($v / 100);
        $bands = range($lo, $hi, 100);
    @endphp
    <div class="rounded-lg border border-gray-200 dark:border-gray-700 p-3">
        <div class="mb-1 flex items-center gap-2">
            <span class="font-bold text-sm" style="color:{{ $color }}">↗</span>
            <span class="font-bold text-sm text-gray-800 dark:text-gray-100">{{ $label }}</span>
            <span class="ml-auto text-xs font-semibold text-gray-400">estimated</span>
        </div>
        <svg viewBox="0 0 {{ $W }} {{ $H }}" width="100%" style="display:block">
            @foreach ($bands as $v)
                <line x1="{{ $padL }}" y1="{{ $y($v) }}" x2="{{ $W - $padR }}" y2="{{ $y($v) }}" stroke="#e5e7eb" stroke-width="0.5" />
                <text x="4" y="{{ $y($v) + 3 }}" font-size="9" font-weight="700" fill="#9ca3af">{{ $grade($v) }}</text>
            @endforeach
            <polyline points="{{ $line }}" fill="none" stroke="{{ $color }}" stroke-width="2" stroke-linejoin="round" stroke-linecap="round" />
            @foreach ($points as $i => $p)
                <circle cx="{{ $x($i) }}" cy="{{ $y($p['maxile']) }}" r="3" fill="{{ $color }}" stroke="#fff" stroke-width="1.2" />
            @endforeach
            <text x="{{ $padL }}" y="{{ $H - 8 }}" font-size="9" fill="#9ca3af" text-anchor="start">{{ $points[0]['date'] }}</text>
            <text x="{{ $W - $padR }}" y="{{ $H - 8 }}" font-size="9" fill="#9ca3af" text-anchor="end">{{ $points[$n - 1]['date'] }}</text>
        </svg>
        @if (! is_null($current ?? null))
            <div class="text-center text-sm font-bold text-gray-800 dark:text-gray-100 mt-1">
                Currently at {{ $grade($current) }} level · Maxile {{ $current }}
            </div>
        @endif
    </div>
@endif