@php
    use App\Models\CutoverConfirmation;

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

    $statusBadge = [
        CutoverConfirmation::STATUS_PENDING => 'slate',
        CutoverConfirmation::STATUS_CONFIRMED => 'emerald',
        CutoverConfirmation::STATUS_DISPUTED => 'amber',
        CutoverConfirmation::STATUS_APPROVED => 'sky',
    ];

    $tz = config('app.display_timezone');
    $mine = count($rows);
    $done = $mine - $outstanding;

    $metrics = [
        [
            'label' => __('Floats you hold'),
            'value' => number_format($mine),
            'icon' => 'wallet',
            'accent' => '#124a61',
            'sub' => __('Cash, pocket & mobile money'),
        ],
        [
            'label' => __('Declared'),
            'value' => number_format($done) . ' / ' . number_format($mine),
            'icon' => 'check-circle',
            'accent' => $outstanding === 0 ? '#10b981' : '#0ea5e9',
            'sub' => $outstanding === 0 ? __('You are done') : trans_choice('{1} :count still to count|[2,*] :count still to count', $outstanding, ['count' => $outstanding]),
        ],
        [
            'label' => __('Value declared'),
            'value' => $baseCode . ' ' . number_format($declaredBase, 2),
            'icon' => 'banknotes',
            'accent' => '#8b5cf6',
            'sub' => __('Your floats, in base currency'),
        ],
        [
            'label' => __('Declare by'),
            'value' => $cutover?->due_at ? $cutover->due_at->timezone($tz)->format('j M Y') : __('Not open'),
            'icon' => 'clock',
            'accent' => $cutover?->isOverdue() ? '#f43f5e' : '#f59e0b',
            // Their own clock, not the team's. It is the number that answers
            // "how long have I got", which the team deadline alone does not.
            'sub' => $cutover?->isOverdue()
                ? __('Past due')
                : ($campaign
                    ? __('Day :day of :total', ['day' => $campaign->dayNumber(), 'total' => \App\Models\CutoverCampaign::WINDOW_DAYS])
                    : __('Workspace 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="__('Float punch-in')"
            :subtitle="__('The new workspace starts empty. Count what you are actually holding and declare it, and that becomes your opening balance.')">
            @if ($canStart && $cutover !== null && ! $cutover->isOpen())
                {{-- The window closed when its last account settled, but the
                     screen stays readable. Starting a fresh one is how a float
                     that appeared afterwards, a new cashier, a new wallet, gets
                     declared rather than assumed. --}}
                <x-secondary-button type="button" wire:click="startPunchIn" wire:loading.attr="disabled" wire:target="startPunchIn">
                    <x-icon name="flag" class="mr-1 h-4 w-4" />
                    {{ __('Open a new punch-in') }}
                </x-secondary-button>
            @endif
            @if ($canApprove)
                <a href="{{ route('treasury.confirmations') }}" wire:navigate>
                    <x-secondary-button type="button">
                        <x-icon name="shield-check" class="mr-1 h-4 w-4" />
                        {{ __('Confirmations') }}
                    </x-secondary-button>
                </a>
                <a href="{{ route('treasury.cut_over') }}" wire:navigate>
                    <x-secondary-button type="button">
                        <x-icon name="arrows-right-left" class="mr-1 h-4 w-4" />
                        {{ __('Books cut-over') }}
                    </x-secondary-button>
                </a>
            @endif
        </x-page-header>

        {{-- What this screen does to the books, before anybody types a number. --}}
        <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">{{ __('Why you are being asked') }}</p>
                    <p>
                        {{ __('The company has moved to a fresh workspace. Everything you configured came across, but no balances did, because a float balance is only ever as good as the person holding it.') }}
                    </p>
                    <p>
                        {{ __('Count it, type it, confirm it. The figure is brought onto the books as an opening balance, which invents no sale and no cost. If it does not match what the books already show, a director signs it off, nothing is lost either way.') }}
                    </p>
                    <p class="text-xs text-slate-400">
                        {{ __('Bank accounts are not here on purpose: they are reconciled from the bank statement rather than declared.') }}
                    </p>
                </div>
            </div>
        </x-card>

        @if ($cutover === null)
            {{-- Nothing to declare until a director opens the window. --}}
            <x-card class="p-6">
                <x-empty-state icon="flag" class="border-0 bg-transparent py-6"
                    :title="__('The punch-in has not started')"
                    :message="$canStart
                        ? __('Open it when the new workspace is ready. Everyone holding cash, a director float or a mobile-money wallet is then asked to declare what they have.')
                        : __('A director will open it. You will be told when it is your turn to count.')">
                    @if ($canStart)
                        <x-button type="button" variant="gradient" wire:click="startPunchIn" wire:loading.attr="disabled" wire:target="startPunchIn">
                            <span wire:loading.remove wire:target="startPunchIn">{{ __('Open the punch-in') }}</span>
                            <span wire:loading wire:target="startPunchIn">{{ __('Opening…') }}</span>
                        </x-button>
                    @endif
                </x-empty-state>
            </x-card>
        @else

            <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>

            {{-- ── Your floats ─────────────────────────────────────────── --}}
            <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">{{ __('What you are holding') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('One row per float in your name. Count it before you type it.') }}</p>
                    </div>
                    @if ($outstanding === 0 && $mine > 0)
                        <x-badge color="emerald">
                            <x-icon name="check-circle" class="h-4 w-4" />
                            {{ __('All declared') }}
                        </x-badge>
                    @endif
                </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 text-right lg:px-4">{{ __('Books say') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('You count') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Variance') }}</th>
                                <th class="px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @forelse ($rows as $row)
                                @php
                                    $account = $row['account'];
                                    $confirmation = $row['confirmation'];
                                    $variance = $confirmation ? (float) $confirmation->variance : $row['preview'];
                                    $status = $confirmation?->status ?? CutoverConfirmation::STATUS_PENDING;
                                @endphp
                                <tr wire:key="float-{{ $account->id }}" class="align-top transition hover:bg-slate-50/70">
                                    <td class="px-3 py-4 text-sm lg:px-4">
                                        <p class="font-medium text-slate-900">{{ $account->name }}</p>
                                        <p class="mt-1 flex flex-wrap items-center gap-1.5">
                                            <x-badge :color="$typeBadge[$account->type] ?? 'slate'">{{ $account->type_label }}</x-badge>
                                            <span class="text-xs text-slate-400">{{ $account->currency_code }}</span>
                                        </p>
                                    </td>

                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-500 lg:px-4">
                                        {{ number_format($row['system'], 2) }}
                                    </td>

                                    <td class="px-3 py-4 lg:px-4">
                                        <div class="w-40">
                                            <x-input type="number" step="0.01" min="0" class="block w-full text-right tabular-nums"
                                                     wire:model="declared.{{ $account->id }}"
                                                     placeholder="0.00" />
                                            <x-input-error for="declared.{{ $account->id }}" class="mt-2" />
                                            <input type="text" wire:model="notes.{{ $account->id }}"
                                                   placeholder="{{ __('Note (optional)') }}"
                                                   class="mt-2 block w-full rounded-lg border-slate-200 bg-slate-50 text-xs text-slate-700 shadow-xs transition placeholder:text-slate-400 focus:border-accent-500 focus:bg-white focus:ring-2 focus:ring-accent-500/20" />
                                        </div>
                                    </td>

                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums lg:px-4
                                               {{ $variance === null ? 'text-slate-300' : (abs($variance) < 0.01 ? 'text-slate-500' : ($variance > 0 ? 'text-emerald-600' : 'text-rose-600')) }}">
                                        {{ $variance === null ? '—' : number_format($variance, 2) }}
                                    </td>

                                    <td class="whitespace-nowrap px-3 py-4 lg:px-4">
                                        <x-badge :color="$statusBadge[$status] ?? 'slate'">
                                            {{ CutoverConfirmation::STATUSES[$status] ?? $status }}
                                        </x-badge>
                                        @if ($confirmation?->confirmed_at)
                                            <p class="mt-1 text-[11px] text-slate-400">
                                                {{ $confirmation->confirmed_at->timezone($tz)->format('j M Y, H:i') }}
                                            </p>
                                        @endif
                                        @if ($confirmation?->hasPendingAdjustment())
                                            <p class="mt-1"><x-badge color="violet">{{ __('Change with a director') }}</x-badge></p>
                                        @elseif ($confirmation?->adjustmentWasDeclined())
                                            <p class="mt-1"><x-badge color="rose">{{ __('Change declined') }}</x-badge></p>
                                        @endif
                                    </td>

                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                        @php
                                            // A figure nobody has agreed to yet is still a draft and can simply
                                            // be re-counted. An AGREED one is where the account's books begin,
                                            // so changing it is a request, unless you are the person who signs
                                            // such things off.
                                            $agreed = $confirmation?->isSettled() ?? false;
                                            $label = ! $confirmation
                                                ? __('Confirm')
                                                : ($agreed ? ($canApprove ? __('Change & sign') : __('Request change')) : __('Re-declare'));
                                        @endphp
                                        <x-button type="button" wire:click="confirm({{ $account->id }})"
                                                  wire:loading.attr="disabled" wire:target="confirm({{ $account->id }})">
                                            <span wire:loading.remove wire:target="confirm({{ $account->id }})">{{ $label }}</span>
                                            <span wire:loading wire:target="confirm({{ $account->id }})">{{ __('Saving…') }}</span>
                                        </x-button>
                                        @if ($agreed)
                                            <p class="mt-1 text-[11px] text-slate-400">{{ __('Needs a reason') }}</p>
                                        @endif
                                    </td>
                                </tr>
                            @empty
                                <tr>
                                    <td colspan="6" class="px-6 py-12">
                                        <x-empty-state icon="wallet" class="border-0 bg-transparent py-0"
                                            :title="__('Nothing for you to declare')"
                                            :message="__('No cash box, director float or mobile-money wallet is held in your name, so there is nothing to count. Bank accounts are reconciled from the statement instead.')" />
                                    </td>
                                </tr>
                            @endforelse
                        </tbody>
                    </table>
                </div>
            </x-card>

            @if ($canApprove)
                {{-- ── Sign-off queue ──────────────────────────────────────
                     Deliberately thin: phase 5 builds the full four-eyes flow
                     on the same approved_by / approved_at columns.
                ─────────────────────────────────────────────────────────── --}}
                <x-card class="overflow-hidden">
                    <div class="border-b border-slate-100 p-4 sm:p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Waiting on a director') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Declarations that do not match the books. The money is already on the books; this is the signature.') }}</p>
                    </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">{{ __('Holder') }}</th>
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('Account') }}</th>
                                    <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Declared') }}</th>
                                    <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Variance') }}</th>
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('Note') }}</th>
                                    <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Actions') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 bg-white">
                                @forelse ($signOffQueue as $item)
                                    <tr wire:key="signoff-{{ $item->id }}" class="transition hover:bg-slate-50/70">
                                        <td class="whitespace-nowrap px-3 py-4 text-sm font-medium text-slate-900 lg:px-4">{{ $item->user?->name ?? '—' }}</td>
                                        <td class="px-3 py-4 text-sm text-slate-600 lg:px-4">{{ $item->fundAccount?->name ?? '—' }}</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">
                                            {{ $item->fundAccount?->currency_code }} {{ number_format((float) $item->declared_amount, 2) }}
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums lg:px-4 {{ (float) $item->variance >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                                            {{ number_format((float) $item->variance, 2) }}
                                        </td>
                                        <td class="px-3 py-4 text-sm text-slate-500 lg:px-4">{{ $item->note ?: '—' }}</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                            <button type="button" wire:click="approve({{ $item->id }})"
                                                    wire:confirm="{{ __('Sign off this opening balance?') }}"
                                                    class="text-indigo-600 transition hover:text-indigo-800">
                                                {{ __('Sign off') }}
                                            </button>
                                        </td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="px-6 py-12">
                                            <x-empty-state icon="shield-check" class="border-0 bg-transparent py-0"
                                                :title="__('Nothing to sign off')"
                                                :message="__('Every declaration so far has agreed with the books.')" />
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>
                </x-card>

                {{-- ── Who is still to punch in ───────────────────────────── --}}
                <x-card class="overflow-hidden">
                    <div class="border-b border-slate-100 p-4 sm:p-5">
                        <h2 class="text-base font-semibold text-slate-900">{{ __('Team progress') }}</h2>
                        <p class="text-xs text-slate-400">
                            {{ __('Every float in the workspace and who has to declare it. Opened :when.', [
                                'when' => $cutover->started_at->timezone($tz)->format('j M Y, H:i'),
                            ]) }}
                        </p>
                    </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">{{ __('Holder') }}</th>
                                    <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Declared') }}</th>
                                    <th class="px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 bg-white">
                                @foreach ($progress as $item)
                                    @php
                                        $account = $item['account'];
                                        $confirmation = $item['confirmation'];
                                        $status = $confirmation?->status ?? CutoverConfirmation::STATUS_PENDING;
                                    @endphp
                                    <tr wire:key="progress-{{ $account->id }}" class="transition hover:bg-slate-50/70">
                                        <td class="px-3 py-4 text-sm lg:px-4">
                                            <span class="font-medium text-slate-900">{{ $account->name }}</span>
                                            <x-badge :color="$typeBadge[$account->type] ?? 'slate'" class="ml-2">{{ $account->type_label }}</x-badge>
                                        </td>
                                        <td class="px-3 py-4 text-sm text-slate-600 lg:px-4">{{ $account->holder?->name ?? '—' }}</td>
                                        <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-900 lg:px-4">
                                            {{ $confirmation ? $account->currency_code.' '.number_format((float) $confirmation->declared_amount, 2) : '—' }}
                                        </td>
                                        <td class="whitespace-nowrap px-3 py-4 lg:px-4">
                                            <x-badge :color="$statusBadge[$status] ?? 'slate'">
                                                {{ CutoverConfirmation::STATUSES[$status] ?? $status }}
                                            </x-badge>
                                        </td>
                                    </tr>
                                @endforeach
                            </tbody>
                        </table>
                    </div>
                </x-card>
            @endif
        @endif
    </div>
</div>