@php
    $sections = $diff['sections'] ?? [];
    $years    = $diff['years'] ?? [];
    $payload  = $multiYear['payload'] ?? null;
    $stack    = $multiYear['analyses'] ?? [];

    $fmtCell = function ($v, $unit = '') {
        if ($v === null || $v === '' || ! is_scalar($v)) return '—';
        if (is_numeric($v)) {
            $n = (float) $v;
            $abs = abs($n);
            $formatted = $abs >= 1000
                ? number_format($n, 0, '.', ' ')
                : (floor($n) == $n ? number_format($n, 0) : number_format($n, 2));
            return trim($formatted.' '.$unit);
        }
        return (string) $v;
    };
@endphp

{{-- Year-spaced picker — operator can refine which analyses to include. --}}
<form method="POST" action="{{ route('tenant.analyses.compare.multi-year', $analysis) }}"
      class="card p-5 mb-6">
    @csrf
    <div class="flex items-start gap-3 mb-3">
        <div class="w-9 h-9 rounded-xl bg-slate-100 dark:bg-slate-800 text-slate-700 dark:text-slate-300 flex items-center justify-center shrink-0">
            <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M3 3v18h18M7 14l4-4 4 4 5-7"/></svg>
        </div>
        <div class="min-w-0 flex-1">
            <h3 class="text-sm font-semibold text-slate-900 dark:text-white">{{ __('Choose the analyses to plot (2 to 5)') }}</h3>
            <p class="text-xs text-slate-500 dark:text-slate-400 mt-0.5">{{ __('The latest is checked by default. Add prior deliveries to see the trend.') }}</p>
        </div>
        <button class="btn-primary text-xs shrink-0">{{ __('Compute trend') }}</button>
    </div>

    <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-2">
        <label class="flex items-center gap-2 p-2 rounded-lg bg-slate-50 dark:bg-slate-800/40 ring-1 ring-slate-200 dark:ring-slate-700 text-xs">
            <input type="checkbox" name="analyses[]" value="{{ $analysis->id }}" checked disabled
                   class="rounded border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100">
            <input type="hidden" name="analyses[]" value="{{ $analysis->id }}">
            <span class="font-mono tabular-nums">{{ $analysis->finished_at?->format('Y-m-d') ?? '—' }}</span>
            <span class="text-[10px] text-slate-500 ms-auto">{{ __('anchor') }}</span>
        </label>
        @foreach($candidates->take(8) as $c)
            <label class="flex items-center gap-2 p-2 rounded-lg bg-slate-50 dark:bg-slate-800/40 ring-1 ring-slate-200 dark:ring-slate-700 text-xs cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-800">
                <input type="checkbox" name="analyses[]" value="{{ $c->id }}" {{ $loop->index < 4 ? 'checked' : '' }}
                       class="rounded border-slate-300 dark:border-slate-600 text-slate-900 dark:text-slate-100">
                <span class="font-mono tabular-nums">{{ $c->finished_at?->format('Y-m-d') ?? '—' }}</span>
            </label>
        @endforeach
    </div>
</form>

{{-- Trend table — KPI × year matrix. --}}
@if(empty($sections))
    <div class="card p-12 text-center">
        <div class="mx-auto w-12 h-12 rounded-2xl bg-slate-100 dark:bg-slate-800 text-slate-400 flex items-center justify-center mb-3">
            <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M9 17v-6a3 3 0 116 0v6m-3-9V4m-7 13h14"/></svg>
        </div>
        <div class="text-sm text-slate-700 dark:text-slate-200 font-medium">{{ __('Not enough analyses for a multi-year view yet.') }}</div>
    </div>
@else
    <div class="card overflow-hidden mb-6">
        <div class="overflow-x-auto">
            <table class="min-w-full text-sm">
                <thead class="bg-slate-50 dark:bg-slate-900/50 text-[11px] uppercase tracking-wider text-slate-500 dark:text-slate-400">
                    <tr>
                        <th class="text-start px-4 py-2.5 font-semibold">{{ __('Indicator') }}</th>
                        @foreach($years as $y)
                            <th class="text-end px-3 py-2.5 font-semibold font-mono tabular-nums">{{ $y }}</th>
                        @endforeach
                        <th class="text-end px-4 py-2.5 font-semibold">{{ __('Trend') }}</th>
                    </tr>
                </thead>
                @foreach($sections as $section)
                    <tbody class="border-t border-slate-200 dark:border-slate-700">
                        <tr class="bg-slate-50/50 dark:bg-slate-900/30">
                            <td colspan="{{ count($years) + 2 }}" class="px-4 py-1.5 text-[10px] uppercase tracking-[0.16em] font-semibold text-slate-500 dark:text-slate-400">{{ __($section['label']) }}</td>
                        </tr>
                        @foreach($section['rows'] as $row)
                            <tr class="border-t border-slate-100 dark:border-slate-800">
                                <td class="px-4 py-2.5 text-slate-900 dark:text-slate-100 align-top">
                                    <div class="inline-flex items-center gap-2">
                                        <span class="truncate" title="{{ $row['label'] }}">{{ $row['label'] }}</span>
                                        @if($row['anomaly'] ?? false)
                                            <span class="px-1.5 py-0.5 rounded-md text-[10px] font-semibold bg-amber-100 text-amber-800 dark:bg-amber-900/40 dark:text-amber-200">{{ __('Outlier') }}</span>
                                        @endif
                                    </div>
                                </td>
                                @foreach($row['values'] as $v)
                                    <td class="px-3 py-2.5 text-end font-mono tabular-nums text-slate-700 dark:text-slate-200">{{ $fmtCell($v, $row['unit'] ?? '') }}</td>
                                @endforeach
                                <td class="px-4 py-2.5 text-end">
                                    @if($row['direction'] === 'improved')
                                        <span class="inline-flex items-center gap-1 text-emerald-700 dark:text-emerald-300 text-xs font-semibold">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 17l5-5 4 4 6-7"/></svg>
                                            @if($row['pct'] !== null){{ '+'.number_format(abs((float) $row['pct']), abs((float) $row['pct']) >= 10 ? 0 : 1) }}%@endif
                                        </span>
                                    @elseif($row['direction'] === 'declined')
                                        <span class="inline-flex items-center gap-1 text-rose-700 dark:text-rose-300 text-xs font-semibold">
                                            <svg class="w-3 h-3" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M7 7l5 5 4-4 6 7"/></svg>
                                            @if($row['pct'] !== null){{ '-'.number_format(abs((float) $row['pct']), abs((float) $row['pct']) >= 10 ? 0 : 1) }}%@endif
                                        </span>
                                    @else
                                        <span class="text-xs text-slate-400">—</span>
                                    @endif
                                </td>
                            </tr>
                        @endforeach
                    </tbody>
                @endforeach
            </table>
        </div>
    </div>
@endif

{{-- Multi-year AI narrative (only after the operator clicks "Compute trend"). --}}
@if($payload)
    <section class="relative overflow-hidden rounded-3xl border border-slate-200 dark:border-slate-800 bg-white dark:bg-slate-950 mb-6 isolate">
        <div class="px-6 sm:px-10 py-7 sm:py-9">
            <div class="flex items-start gap-3 mb-5">
                <div class="w-11 h-11 rounded-2xl bg-slate-900 text-white dark:bg-slate-100 dark:text-slate-900 flex items-center justify-center shadow-sm shrink-0">
                    <svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M13 7h8m0 0v8m0-8l-8 8-4-4-6 6"/></svg>
                </div>
                <div class="min-w-0">
                    <div class="text-[10px] uppercase tracking-[0.18em] font-semibold text-slate-500 dark:text-slate-400">{{ __('Smart commentary') }}</div>
                    <h2 class="mt-1 text-xl font-semibold text-slate-900 dark:text-white">{{ __('Multi-year trend explained') }}</h2>
                </div>
            </div>
            <div class="narrative" dir="{{ app()->getLocale() === 'ar' ? 'rtl' : 'ltr' }}">
                {!! $payload['html'] !!}
            </div>
            <div class="mt-6 pt-3 border-t border-slate-100 dark:border-slate-800 text-[10px] uppercase tracking-wider text-slate-400 dark:text-slate-500 flex items-center gap-3 flex-wrap">
                @if(!empty($payload['model']))<span>{{ __('Model') }}: {{ $payload['model'] }}</span>@endif
                @if(!empty($payload['tokens']))<span>· {{ number_format($payload['tokens']) }} {{ __('tokens') }}</span>@endif
                @if(!empty($payload['provider']))<span>· {{ strtoupper($payload['provider']) }}</span>@endif
            </div>
        </div>
    </section>
@endif