@props([
    'rows' => [],                          // rows from MetricComparisonService::rows()
    'title' => null,                       // card heading (null → no header bar)
    'subtitle' => null,
    // Compact variant: half-height rows (inline attainment, short sparkline) for
    // pages that stack several panels and cannot spend 70px a row. Every column
    // still renders — nothing is dropped to save the space.
    'dense' => false,
])

@php
    // Attainment cell styling: a coloured % with a thin track bar. Distinct from
    // the growth chips (signed arrows) so "94% of target" never reads like "+94%".
    $attain = function (?int $pct): array {
        if ($pct === null) {
            return ['label' => '—', 'text' => 'text-slate-300', 'bar' => 'bg-slate-200', 'width' => 0];
        }
        [$text, $bar] = match (true) {
            $pct >= 100 => ['text-emerald-700', 'bg-emerald-500'],
            $pct >= 80 => ['text-amber-700', 'bg-amber-500'],
            default => ['text-rose-700', 'bg-rose-500'],
        };

        return ['label' => $pct . '%', 'text' => $text, 'bar' => $bar, 'width' => max(2, min(100, $pct))];
    };

    $rowPad = $dense ? 'py-1.5' : 'py-2.5';
    $sparkBox = $dense ? 'w-20' : 'w-24';
    $sparkHeight = $dense ? 30 : 60;
@endphp

<x-card {{ $attributes->merge(['class' => $dense ? 'p-5' : 'p-6']) }}>
    @if ($title)
        <div class="flex flex-wrap items-end justify-between gap-3">
            <div>
                <h3 class="text-sm font-bold uppercase tracking-wider text-slate-500">{{ $title }}</h3>
                @if ($subtitle)
                    <p class="mt-0.5 text-xs text-slate-400">{{ $subtitle }}</p>
                @endif
            </div>
            <div class="flex items-center gap-3 text-[11px] text-slate-400">
                <span class="inline-flex items-center gap-1"><x-icon name="arrow-trending-up" class="h-3 w-3 text-emerald-500" />{{ __('Growth vs prior') }}</span>
                <span class="inline-flex items-center gap-1"><span class="h-2 w-3 rounded-sm bg-slate-300"></span>{{ __('Attainment vs target') }}</span>
            </div>
        </div>
    @endif

    <div class="{{ $title ? ($dense ? 'mt-3' : 'mt-4') : '' }} overflow-x-auto">
        <table class="w-full min-w-[760px] text-sm">
            <thead>
                <tr class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                    <th class="pb-1 text-left align-bottom" rowspan="2">{{ __('Metric') }}</th>
                    <th class="pb-1 pl-3 text-right align-bottom" rowspan="2">{{ __('Current') }}</th>
                    <th class="border-l border-slate-100 px-2 pb-1 text-center text-slate-500" colspan="4">{{ __('Growth') }}</th>
                    <th class="border-l border-slate-100 px-2 pb-1 text-center text-slate-500" colspan="3">{{ __('vs Target') }}</th>
                    <th class="border-l border-slate-100 pb-1 pl-3 text-right align-bottom" rowspan="2">{{ __('12-mo Trend') }}</th>
                </tr>
                <tr class="text-[10px] font-semibold uppercase tracking-wider text-slate-400">
                    <th class="border-l border-slate-100 py-1 pl-2 text-right" title="{{ __('This month vs last month') }}">{{ __('MoM') }}</th>
                    <th class="py-1 pl-2 text-right" title="{{ __('This month vs the same month last year') }}">{{ __('YoY') }}</th>
                    <th class="py-1 pl-2 text-right" title="{{ __('Trailing 6 months vs the prior 6 months') }}">{{ __('6M') }}</th>
                    <th class="py-1 pl-2 text-right" title="{{ __('Year to date vs the same span last year') }}">{{ __('YTD') }}</th>
                    <th class="border-l border-slate-100 py-1 pl-2 text-right" title="{{ __('This month actual vs monthly target') }}">{{ __('M') }}</th>
                    <th class="py-1 pl-2 text-right" title="{{ __('Trailing 6 months vs 6× the monthly target') }}">{{ __('6M') }}</th>
                    <th class="py-1 pl-2 text-right" title="{{ __('Year to date vs the monthly target × months elapsed') }}">{{ __('YTD') }}</th>
                </tr>
            </thead>
            <tbody class="divide-y divide-slate-100">
                @forelse ($rows as $r)
                    <tr class="transition hover:bg-slate-50/70">
                        <td class="{{ $rowPad }} pr-2 font-medium text-slate-700">
                            {{ $r['label'] }}
                            @if ($r['target_display'] !== null)
                                <span class="ml-1 hidden text-[10px] font-normal text-slate-400 sm:inline">{{ __('tgt') }} {{ $r['target_display'] }}</span>
                            @endif
                        </td>
                        <td class="{{ $rowPad }} whitespace-nowrap pl-3 text-right font-bold text-slate-900 tabular-nums">{{ $r['current_display'] }}</td>

                        {{-- Growth: signed delta chips --}}
                        <td class="{{ $rowPad }} border-l border-slate-100 pl-2 text-right"><div class="flex justify-end"><x-metric-delta :value="$r['mom']" :upIsGood="$r['up_is_good']" /></div></td>
                        <td class="{{ $rowPad }} pl-2 text-right"><div class="flex justify-end"><x-metric-delta :value="$r['yoy']" :upIsGood="$r['up_is_good']" /></div></td>
                        <td class="{{ $rowPad }} pl-2 text-right"><div class="flex justify-end"><x-metric-delta :value="$r['sixm']" :upIsGood="$r['up_is_good']" /></div></td>
                        <td class="{{ $rowPad }} pl-2 text-right"><div class="flex justify-end"><x-metric-delta :value="$r['ytd']" :upIsGood="$r['up_is_good']" /></div></td>

                        {{-- Attainment: coloured % with a track bar. Dense lays the
                             two side by side so the row keeps a single text line. --}}
                        @foreach (['m_vs_tg', 'sixm_vs_tg', 'ytd_vs_tg'] as $i => $k)
                            @php $a = $attain($r[$k]); @endphp
                            <td class="{{ $rowPad }} pl-2 align-middle {{ $i === 0 ? 'border-l border-slate-100' : '' }}">
                                <div class="flex {{ $dense ? 'items-center justify-end gap-1.5' : 'flex-col items-end gap-1' }}">
                                    <span class="text-xs font-bold tabular-nums {{ $a['text'] }}">{{ $a['label'] }}</span>
                                    <span class="h-1 {{ $dense ? 'w-8' : 'w-12' }} shrink-0 overflow-hidden rounded-full bg-slate-100">
                                        <span class="block h-full rounded-full {{ $a['bar'] }}" style="width: {{ $a['width'] }}%"></span>
                                    </span>
                                </div>
                            </td>
                        @endforeach

                        {{-- Trailing-12-month sparkline --}}
                        <td class="border-l border-slate-100 {{ $dense ? 'py-0.5' : 'py-1.5' }} pl-3">
                            <div wire:ignore class="ml-auto {{ $sparkBox }}"
                                x-data="dashSpark(@js(['values' => $r['spark'], 'color' => $r['up_is_good'] ? '#10b981' : '#0ea5e9', 'type' => 'area', 'label' => $r['label'], 'height' => $sparkHeight]))">
                                <div x-ref="spark"></div>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="10" class="py-8 text-center text-sm text-slate-400">{{ __('No metrics to compare yet.') }}</td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</x-card>