@php
    $typeBadge = [
        'bank' => 'indigo', 'cash' => 'emerald', 'mobile_money' => 'sky',
        'director' => 'amber', 'other' => 'slate',
    ];

    $metrics = [
        [
            'label' => __('Accounts to bring over'),
            'value' => number_format(count($rows)),
            'icon' => 'banknotes',
            'accent' => '#124a61',
            'sub' => __('Active accounts'),
        ],
        [
            'label' => __('Cash carried in'),
            'value' => $baseCode . ' ' . number_format($countedBase, 2),
            'icon' => 'arrow-down-tray',
            'accent' => '#10b981',
            'sub' => __('Counted, in base currency'),
        ],
        [
            'label' => __('To be posted'),
            'value' => $baseCode . ' ' . number_format($diffBase, 2),
            'icon' => 'arrows-right-left',
            'accent' => $diffBase >= 0 ? '#0ea5e9' : '#f43f5e',
            'sub' => __('Difference vs the books'),
        ],
        [
            'label' => __('Books start'),
            'value' => $alreadySet ? \Illuminate\Support\Carbon::parse($alreadySet)->format('j M Y') : __('Not set'),
            'icon' => 'flag',
            'accent' => $alreadySet ? '#8b5cf6' : '#94a3b8',
            'sub' => $alreadySet ? __('Cut-over recorded') : __('Awaiting cut-over'),
        ],
    ];
@endphp

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

        <x-page-header :title="__('Books cut-over')"
            :subtitle="__('Draw the line between trading done before this system and the clean books that start after it.')">
            <a href="{{ route('treasury.index') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="chevron-left" class="mr-1 h-4 w-4" />
                    {{ __('Back to Treasury') }}
                </x-secondary-button>
            </a>
        </x-page-header>

        {{-- What this screen actually does to the books, in plain terms. --}}
        <x-card class="border-l-4 border-l-indigo-400 p-5">
            <div class="flex items-start gap-3">
                <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-indigo-50 text-indigo-600">
                    <x-icon name="information-circle" class="h-5 w-5" />
                </span>
                <div class="space-y-2 text-sm text-slate-600">
                    <p class="font-semibold text-slate-900">{{ __('How the cut-over works') }}</p>
                    <p>
                        {{ __('Count what is really in each account on the cut-over date and type it below. Any difference between your count and what the books say is charged to a system "Opening Balances (Pre-System)" account, one per currency, so every account starts on its true figure.') }}
                    </p>
                    <p>
                        {{ __('The entry is posted as a transfer, so it creates no sale, no cost and no income: the month you go live is not distorted. Only the difference is posted, so running this again with the same figures changes nothing.') }}
                    </p>
                </div>
            </div>
        </x-card>

        {{-- KPIs --}}
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-4">
            @foreach ($metrics as $m)
                <x-card class="group relative flex flex-col overflow-hidden p-5 ring-slate-200/70 transition hover:-translate-y-0.5 hover:shadow-lg hover:shadow-slate-300/40">
                    <div class="flex items-start justify-between gap-2">
                        <p class="truncate text-[11px] font-semibold uppercase tracking-wider text-slate-400" title="{{ $m['label'] }}">{{ $m['label'] }}</p>
                        <span class="flex items-center justify-center rounded-xl text-white shadow-sm ring-1 ring-white/40" style="height: 2rem; width: 2rem; background: linear-gradient(135deg, {{ $m['accent'] }}, {{ $m['accent'] }}bb)">
                            <x-icon :name="$m['icon']" class="h-4 w-4" />
                        </span>
                    </div>
                    <p class="mt-3 font-bold leading-none tracking-tight text-slate-900 tabular-nums" style="font-size: 19px;">{{ $m['value'] }}</p>
                    <span class="mt-2.5 inline-flex w-fit items-center gap-1 rounded-full bg-slate-100 px-2 py-1 text-[11px] font-semibold text-slate-500">
                        {{ $m['sub'] }}
                    </span>
                </x-card>
            @endforeach
        </section>

        <form wire:submit="save" class="space-y-6">

            {{-- When the clean books start --}}
            <x-card class="p-5">
                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <x-label for="books_start_date" value="{{ __('Cut-over date') }}" />
                        <x-input id="books_start_date" type="date" class="mt-1 block w-full"
                            wire:model.live="books_start_date" />
                        <x-input-error for="books_start_date" class="mt-2" />
                        <p class="mt-2 text-xs text-slate-400">
                            {{ __('Balances are brought forward at the end of this day. Everything before it is treated as pre-system.') }}
                        </p>
                    </div>
                    <div class="sm:col-span-2">
                        <x-label for="note" value="{{ __('Ledger note') }}" />
                        <x-input id="note" type="text" class="mt-1 block w-full" wire:model="note"
                            placeholder="{{ __('Balance brought forward at cut-over') }}" />
                        <x-input-error for="note" class="mt-2" />
                        <p class="mt-2 text-xs text-slate-400">
                            {{ __('Shown against every brought-forward entry in the treasury ledger.') }}
                        </p>
                    </div>
                </div>

                @if ($alreadySet)
                    <div class="mt-4 flex items-start gap-2 rounded-xl bg-amber-50 px-4 py-3 text-sm text-amber-800">
                        <x-icon name="exclamation-triangle" class="mt-0.5 h-4 w-4 shrink-0" />
                        <span>
                            {{ __('A cut-over was already recorded for :date. Re-running it only posts what has changed since, but check the differences below before saving.', ['date' => \Illuminate\Support\Carbon::parse($alreadySet)->format('j M Y')]) }}
                        </span>
                    </div>
                @endif
            </x-card>

            {{-- Count every account --}}
            <x-card class="overflow-hidden">
                <div class="flex flex-col gap-3 border-b border-slate-100 p-4 sm:flex-row sm:items-center sm:justify-between sm:p-5">
                    <div>
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Count each account') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Type what was really held on the cut-over date. Leave a box blank to skip that account.') }}</p>
                    </div>
                </div>

                <div class="overflow-x-auto">
                    <table class="min-w-full divide-y divide-slate-100">
                        <thead>
                            <tr class="bg-slate-50/80 text-left text-[11px] font-semibold uppercase tracking-wider text-slate-500">
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Account') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Type') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Books say') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actually held') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('To post') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($rows as $row)
                                @php $account = $row['account']; @endphp
                                <tr wire:key="cutover-{{ $account->id }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">
                                        {{ $account->name }}
                                        @if ($account->reference)
                                            <span class="block text-xs font-normal text-slate-400">{{ $account->reference }}</span>
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                        <x-badge :color="$typeBadge[$account->type] ?? 'slate'">
                                            {{ $account->type_label }}
                                        </x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-500 lg:px-4">
                                        {{ $account->currency_code }} {{ number_format($row['system'], 2) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right lg:px-4">
                                        <div class="flex items-center justify-end gap-2">
                                            <span class="text-xs font-medium text-slate-400">{{ $account->currency_code }}</span>
                                            <input type="number" step="0.01" inputmode="decimal"
                                                wire:model.live.debounce.500ms="counted.{{ $account->id }}"
                                                class="w-32 rounded-xl border-slate-300 text-right text-sm tabular-nums shadow-sm focus:border-indigo-500 focus:ring-indigo-500" />
                                        </div>
                                        <x-input-error for="counted.{{ $account->id }}" class="mt-2" />
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums lg:px-4">
                                        @if (abs($row['diff']) < 0.01)
                                            <span class="text-slate-300">—</span>
                                        @else
                                            <span class="{{ $row['diff'] > 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                                                {{ $row['diff'] > 0 ? '+' : '−' }}{{ number_format(abs($row['diff']), 2) }}
                                            </span>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="5" class="px-6 py-12">
                                        <x-empty-state icon="banknotes" :title="__('No active accounts')"
                                            :message="__('Create the accounts money is held in first, then come back and count them.')"
                                            class="border-0 bg-transparent py-0" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>

            {{-- What the pre-system era already carries --}}
            @if ($parked->isNotEmpty())
                <x-card class="p-5">
                    <div class="flex items-start gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl bg-violet-50 text-violet-600">
                            <x-icon name="archive-box" class="h-5 w-5" />
                        </span>
                        <div class="min-w-0 flex-1">
                            <p class="text-sm font-semibold text-slate-900">{{ __('Held against the pre-system era') }}</p>
                            <p class="mt-1 text-xs text-slate-400">
                                {{ __('The balancing side of everything brought forward. It is not a shortfall, it is the value of trading done before the books started.') }}
                            </p>
                            <dl class="mt-3 flex flex-wrap gap-x-8 gap-y-2">
                                @foreach ($parked as $p)
                                    <div wire:key="parked-{{ $p->id }}">
                                        <dt class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ $p->currency_code }}</dt>
                                        <dd class="text-sm font-bold tabular-nums text-slate-900">{{ number_format($p->balance, 2) }}</dd>
                                    </div>
                                @endforeach
                            </dl>
                        </div>
                    </div>
                </x-card>
            @endif

            {{-- Sticky commit bar --}}
            <div class="sticky bottom-3 z-20 mt-1 flex items-center justify-between gap-3 rounded-2xl border border-slate-200 bg-white/90 px-4 py-3 shadow-[0_8px_30px_-8px_rgba(15,23,42,0.25)] backdrop-blur">
                <p class="text-xs text-slate-500">
                    {{ __('Posts a dated transfer for every account whose count differs from the books.') }}
                </p>
                <div class="flex items-center gap-3">
                    <a href="{{ route('treasury.index') }}" wire:navigate>
                        <x-secondary-button type="button">{{ __('Cancel') }}</x-secondary-button>
                    </a>
                    <x-button type="submit" wire:loading.attr="disabled" wire:target="save">
                        <span wire:loading.remove wire:target="save">{{ __('Run cut-over') }}</span>
                        <span wire:loading wire:target="save">{{ __('Posting…') }}</span>
                    </x-button>
                </div>
            </div>
        </form>
    </div>
</div>