@php
    $statusMeta = [
        'over' => ['label' => __('Over'), 'chip' => 'bg-rose-50 text-rose-700', 'bar' => 'bg-rose-500'],
        'under' => ['label' => __('Under'), 'chip' => 'bg-emerald-50 text-emerald-700', 'bar' => 'bg-emerald-500'],
        'on_track' => ['label' => __('On track'), 'chip' => 'bg-sky-50 text-sky-700', 'bar' => 'bg-sky-500'],
    ];
@endphp

<div class="px-4 py-8 sm:px-6 lg:px-8">
    <div class="mx-auto max-w-7xl space-y-6">

        {{-- Header --}}
        <x-page-header
            :title="__('Budget vs Actual')"
            :subtitle="__('Planned spend against what was actually spent, per expense category.')"
        >
            <a href="{{ route('reports.index') }}"
               class="inline-flex items-center gap-1.5 text-sm font-medium text-slate-500 transition hover:text-slate-700">
                <x-icon name="arrow-right" class="h-4 w-4 rotate-180" />
                {{ __('All reports') }}
            </a>
            <a href="{{ route('budgeting.index') }}"
               class="inline-flex items-center gap-2 rounded-xl border border-slate-200 bg-white px-3.5 py-2 text-sm font-medium text-slate-600 shadow-sm transition hover:bg-slate-50">
                <x-icon name="pencil-square" class="h-4 w-4 text-slate-400" />
                {{ __('Manage budgets') }}
            </a>
        </x-page-header>

        @if (! $budget)
            <x-card>
                <div class="p-6">
                    <x-empty-state
                        icon="flag"
                        :title="__('No budgets to report on')"
                        :message="__('Create a budget and set category amounts to see budget-vs-actual variance here.')"
                        class="border-0"
                    >
                        <a href="{{ route('budgeting.index') }}">
                            <x-button type="button">
                                <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('Go to Budgeting') }}
                            </x-button>
                        </a>
                    </x-empty-state>
                </div>
            </x-card>
        @else
            {{-- Budget selector + period --}}
            <div class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
                <div class="flex items-center gap-3">
                    <select wire:model.live="budgetId"
                            class="rounded-xl border-slate-200 py-2 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                        @foreach ($budgets as $b)
                            <option value="{{ $b->id }}">{{ $b->name }}, FY {{ $b->fiscal_year }}{{ $b->is_active ? ' ('.__('active').')' : '' }}</option>
                        @endforeach
                    </select>
                    <span class="text-sm text-slate-400">{{ $periodLabel }} · {{ __('as of') }} {{ $asOf }}</span>
                </div>
                <div class="inline-flex shrink-0 rounded-xl border border-slate-200 bg-slate-50 p-1">
                    <button type="button" wire:click="$set('view', 'annual')" @class(['rounded-lg px-3 py-1.5 text-xs font-medium transition', 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' => $view === 'annual', 'text-slate-500 hover:text-slate-700' => $view !== 'annual'])>{{ __('Annual') }}</button>
                    <button type="button" wire:click="$set('view', 'monthly')" @class(['rounded-lg px-3 py-1.5 text-xs font-medium transition', 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' => $view === 'monthly', 'text-slate-500 hover:text-slate-700' => $view !== 'monthly'])>{{ __('Monthly') }}</button>
                </div>
            </div>

            {{-- KPI cards --}}
            <section class="grid grid-cols-1 gap-5 sm:grid-cols-2 xl:grid-cols-4">
                @foreach ($kpis as $kpi)
                    <x-card class="flex items-start gap-4 p-5">
                        <span class="flex h-11 w-11 shrink-0 items-center justify-center rounded-2xl text-white shadow-sm ring-1 ring-white/40" style="background: linear-gradient(135deg, {{ $kpi['accent'] }}, {{ $kpi['accent'] }}bb)">
                            <x-icon :name="$kpi['icon']" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0">
                            <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $kpi['label'] }}</p>
                            <p class="mt-1 truncate text-2xl font-bold leading-none tracking-tight text-slate-900 tabular-nums">{{ $kpi['value'] }}</p>
                            <span class="mt-2 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-0.5 text-[11px] font-semibold text-slate-500">{{ $kpi['sub'] }}</span>
                        </div>
                    </x-card>
                @endforeach
            </section>

            @if (empty($report['rows']))
                <x-card>
                    <div class="p-10 text-center">
                        <x-icon name="table-cells" class="mx-auto h-8 w-8 text-slate-300" />
                        <p class="mt-2 text-sm font-medium text-slate-500">{{ __('This budget has no category amounts yet.') }}</p>
                        <a href="{{ route('budgeting.index') }}" class="mt-3 inline-flex text-sm font-semibold text-indigo-600 hover:text-indigo-700">{{ __('Set category amounts') }}</a>
                    </div>
                </x-card>
            @elseif ($view === 'annual')
                {{-- Annual roll-up --}}
                <x-card class="p-0">
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-sm">
                            <thead>
                                <tr class="border-b border-slate-200 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                    <th class="px-4 py-3">{{ __('Category') }}</th>
                                    <th class="px-3 py-3 text-right">{{ __('Budget') }}</th>
                                    <th class="px-3 py-3 text-right">{{ __('Actual') }}</th>
                                    <th class="px-3 py-3 text-right">{{ __('Variance') }}</th>
                                    <th class="px-3 py-3">{{ __('Used') }}</th>
                                    <th class="px-3 py-3 text-center">{{ __('Status') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($report['rows'] as $row)
                                    @php $sm = $statusMeta[$row['status']] ?? $statusMeta['on_track']; @endphp
                                    <tr class="border-b border-slate-100 last:border-0 hover:bg-slate-50/60">
                                        <td class="px-4 py-3 font-medium text-slate-700">{{ $row['category'] }}</td>
                                        <td class="px-3 py-3 text-right tabular-nums text-slate-600">{{ $baseCode }} {{ number_format($row['budget'], 2) }}</td>
                                        <td class="px-3 py-3 text-right tabular-nums text-slate-900">{{ $baseCode }} {{ number_format($row['actual'], 2) }}</td>
                                        <td class="px-3 py-3 text-right font-semibold tabular-nums {{ $row['variance'] < 0 ? 'text-rose-600' : 'text-emerald-600' }}">
                                            {{ $row['variance'] < 0 ? '−' : '' }}{{ $baseCode }} {{ number_format(abs($row['variance']), 2) }}
                                            @if ($row['variance_pct'] !== null)
                                                <span class="block text-[11px] font-normal text-slate-400">{{ $row['variance_pct'] > 0 ? '+' : '' }}{{ $row['variance_pct'] }}%</span>
                                            @endif
                                        </td>
                                        <td class="px-3 py-3 min-w-[120px]">
                                            @if ($row['used_pct'] !== null)
                                                <div class="flex items-center gap-2">
                                                    <div class="h-1.5 w-full overflow-hidden rounded-full bg-slate-100">
                                                        <div class="h-full rounded-full {{ $sm['bar'] }}" style="width: {{ min(100, $row['used_pct']) }}%"></div>
                                                    </div>
                                                    <span class="text-xs tabular-nums text-slate-500">{{ $row['used_pct'] }}%</span>
                                                </div>
                                            @else
                                                <span class="text-xs text-slate-400">—</span>
                                            @endif
                                        </td>
                                        <td class="px-3 py-3 text-center">
                                            <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-medium {{ $sm['chip'] }}">{{ $sm['label'] }}</span>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                @php $tm = $statusMeta[$report['total']['status']] ?? $statusMeta['on_track']; @endphp
                                <tr class="border-t-2 border-slate-200 bg-slate-50/70 font-semibold">
                                    <td class="px-4 py-3 text-slate-900">{{ __('Total') }}</td>
                                    <td class="px-3 py-3 text-right tabular-nums text-slate-700">{{ $baseCode }} {{ number_format($report['total']['budget'], 2) }}</td>
                                    <td class="px-3 py-3 text-right tabular-nums text-slate-900">{{ $baseCode }} {{ number_format($report['total']['actual'], 2) }}</td>
                                    <td class="px-3 py-3 text-right tabular-nums {{ $report['total']['variance'] < 0 ? 'text-rose-600' : 'text-emerald-600' }}">
                                        {{ $report['total']['variance'] < 0 ? '−' : '' }}{{ $baseCode }} {{ number_format(abs($report['total']['variance']), 2) }}
                                    </td>
                                    <td class="px-3 py-3 text-xs tabular-nums text-slate-500">{{ $report['total']['used_pct'] ?? 0 }}%</td>
                                    <td class="px-3 py-3 text-center">
                                        <span class="inline-flex rounded-full px-2.5 py-1 text-xs font-medium {{ $tm['chip'] }}">{{ $tm['label'] }}</span>
                                    </td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                </x-card>
            @else
                {{-- Month-by-month: actual vs budget per category --}}
                <x-card class="p-0">
                    <div class="overflow-x-auto">
                        <table class="min-w-full text-xs">
                            <thead>
                                <tr class="border-b border-slate-200 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-400">
                                    <th class="sticky left-0 z-10 bg-white px-4 py-3">{{ __('Category') }}</th>
                                    @foreach ($monthLabels as $label)
                                        <th class="px-2 py-3 text-right">{{ $label }}</th>
                                    @endforeach
                                    <th class="px-3 py-3 text-right">{{ __('Total') }}</th>
                                </tr>
                            </thead>
                            <tbody>
                                @foreach ($report['rows'] as $row)
                                    <tr class="border-b border-slate-100 last:border-0 hover:bg-slate-50/60">
                                        <td class="sticky left-0 z-10 bg-white px-4 py-2 font-medium text-slate-700">{{ $row['category'] }}</td>
                                        @for ($m = 1; $m <= 12; $m++)
                                            @php $cell = $row['months'][$m]; @endphp
                                            <td class="px-2 py-2 text-right tabular-nums {{ $cell['variance'] < 0 ? 'text-rose-600' : 'text-slate-600' }}"
                                                title="{{ __('Budget') }}: {{ number_format($cell['budget'], 2) }} · {{ __('Actual') }}: {{ number_format($cell['actual'], 2) }}">
                                                {{ number_format($cell['actual'], 0) }}
                                                <span class="block text-[10px] text-slate-400">/ {{ number_format($cell['budget'], 0) }}</span>
                                            </td>
                                        @endfor
                                        <td class="px-3 py-2 text-right font-semibold tabular-nums text-slate-900">{{ number_format($row['actual'], 0) }}</td>
                                    </tr>
                                @endforeach
                            </tbody>
                            <tfoot>
                                <tr class="border-t-2 border-slate-200 bg-slate-50/70 font-semibold">
                                    <td class="sticky left-0 z-10 bg-slate-50 px-4 py-3 text-slate-900">{{ __('Total') }}</td>
                                    @for ($m = 1; $m <= 12; $m++)
                                        @php $mt = $report['month_totals'][$m]; @endphp
                                        <td class="px-2 py-3 text-right tabular-nums {{ $mt['variance'] < 0 ? 'text-rose-600' : 'text-slate-700' }}">
                                            {{ number_format($mt['actual'], 0) }}
                                            <span class="block text-[10px] font-normal text-slate-400">/ {{ number_format($mt['budget'], 0) }}</span>
                                        </td>
                                    @endfor
                                    <td class="px-3 py-3 text-right tabular-nums text-slate-900">{{ number_format($report['total']['actual'], 0) }}</td>
                                </tr>
                            </tfoot>
                        </table>
                    </div>
                    <p class="px-4 py-2 text-[11px] text-slate-400">{{ __('Each cell shows actual / budget for the month. Red = over budget. Amounts in :base.', ['base' => $baseCode]) }}</p>
                </x-card>
            @endif
        @endif
    </div>
</div>