@php
    // Severity → how the checklist row is painted. `ok` always wins.
    $checkTone = [
        'blocker' => ['icon' => 'x-circle', 'chip' => 'bg-rose-50 text-rose-600', 'badge' => 'rose', 'word' => __('Blocks the close')],
        'warning' => ['icon' => 'exclamation-triangle', 'chip' => 'bg-brand-yellow-50 text-brand-yellow-700', 'badge' => 'amber', 'word' => __('Worth a look')],
    ];
    $okTone = ['icon' => 'check-circle', 'chip' => 'bg-emerald-50 text-emerald-600', 'badge' => 'emerald', 'word' => __('Clear')];
@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="__('Close Month')"
            :subtitle="__('Review the month, work the checklist, then lock it. A closed month keeps the figures it was closed with, and nothing can be dated into it afterwards without an authorised adjustment.')"
        >
            <a href="{{ route('reports.adjustments') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="pencil-square" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Adjustments') }}
                </x-secondary-button>
            </a>
        </x-page-header>

        {{-- Month picker + the close action. Everything below reads off this. --}}
        <x-card class="p-4 sm:p-5">
            <div class="flex flex-col gap-4 lg:flex-row lg:items-center lg:justify-between">
                <div class="flex items-center 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="calendar" class="h-5 w-5" />
                    </span>
                    <div>
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Accounting month') }}</p>
                        <p class="text-base font-semibold text-slate-900">{{ $monthLabel }}</p>
                    </div>
                </div>

                <div class="flex flex-col gap-3 sm:flex-row sm:items-center">
                    <select wire:model.live="month" class="block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500 sm:w-56">
                        @foreach ($monthOptions as $key => $label)
                            <option value="{{ $key }}">{{ $label }}</option>
                        @endforeach
                    </select>

                    @if ($canManage)
                        @if ($snapshot?->isClosed())
                            <x-secondary-button type="button" wire:click="confirmReopen({{ $snapshot->id }})">
                                <x-icon name="lock-open" class="-ms-1 me-1.5 h-4 w-4" />
                                {{ __('Reopen') }}
                            </x-secondary-button>
                        @else
                            <x-button
                                type="button"
                                variant="gradient"
                                wire:click="closeMonth"
                                wire:loading.attr="disabled"
                                wire:target="closeMonth"
                                :disabled="count($blockers) > 0"
                                wire:confirm="{{ count($warnings) > 0
                                    ? __('There are :n item(s) still outstanding on the checklist. Close :month anyway?', ['n' => count($warnings), 'month' => $monthLabel])
                                    : __('Close :month? Its figures are frozen and the month is locked against further writes.', ['month' => $monthLabel]) }}"
                            >
                                <x-icon name="lock-closed" class="-ms-1 me-1.5 h-4 w-4" />
                                <span wire:loading.remove wire:target="closeMonth">{{ __('Close Month') }}</span>
                                <span wire:loading wire:target="closeMonth">{{ __('Closing…') }}</span>
                            </x-button>
                        @endif
                    @endif
                </div>
            </div>

            {{-- Where this month stands against the seven-day sign-off rule. The
                 reminders say "three days left"; without this the page they land
                 on said nothing, which is how a deadline becomes an email people
                 stop opening. --}}
            @if ($deadline)
                <p class="mt-3 flex items-start gap-1.5 text-xs font-medium {{ $deadline['late'] ? 'text-rose-600' : ($deadline['remaining'] <= 1 ? 'text-brand-yellow-700' : 'text-slate-500') }}">
                    <x-icon :name="$deadline['late'] ? 'exclamation-triangle' : 'clock'" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
                    <span>
                        @if ($deadline['late'])
                            {{ __('Past the sign-off deadline. Close it and the reports stop moving.') }}
                        @elseif ($deadline['remaining'] === 0)
                            {{ __('Today is the last day to close and sign off :month.', ['month' => $monthLabel]) }}
                        @else
                            {{ trans_choice(
                                '{1} One day left to close and sign off :month, the deadline is the :day:suffix.|[2,*] :count days left to close and sign off :month, the deadline is the :day:suffix.',
                                $deadline['remaining'],
                                ['count' => $deadline['remaining'], 'month' => $monthLabel, 'day' => $deadline['deadlineDay'], 'suffix' => 'th'],
                            ) }}
                        @endif
                    </span>
                </p>
            @endif

            @if ($canManage && ! $snapshot?->isClosed() && count($blockers) > 0)
                <p class="mt-3 flex items-start gap-1.5 text-xs font-medium text-rose-600">
                    <x-icon name="x-circle" class="mt-0.5 h-3.5 w-3.5 shrink-0" />
                    <span>{{ $blockers[0]['message'] }}</span>
                </p>
            @endif
        </x-card>

        {{-- Locked banner: what was frozen, by whom, when. --}}
        @if ($snapshot)
            <x-card class="overflow-hidden {{ $snapshot->isClosed() ? 'ring-emerald-200' : 'ring-brand-yellow-200' }}">
                <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 {{ $snapshot->isClosed() ? 'bg-emerald-50/50' : 'bg-brand-yellow-50/50' }}">
                    <div class="flex items-start gap-3">
                        <span class="flex h-10 w-10 shrink-0 items-center justify-center rounded-xl {{ $snapshot->isClosed() ? 'bg-emerald-100 text-emerald-700' : 'bg-brand-yellow-100 text-brand-yellow-800' }}">
                            <x-icon :name="$snapshot->isClosed() ? 'lock-closed' : 'lock-open'" class="h-5 w-5" />
                        </span>
                        <div>
                            <h2 class="text-base font-semibold text-slate-900">
                                {{ $snapshot->isClosed()
                                    ? __(':month is closed', ['month' => $monthLabel])
                                    : __(':month was reopened', ['month' => $monthLabel]) }}
                            </h2>
                            <p class="mt-0.5 text-xs text-slate-500">
                                @if ($snapshot->isClosed())
                                    {{ __('Closed by :who on :when.', [
                                        'who' => $snapshot->closer?->name ?? $snapshot->locker?->name ?? __('the system'),
                                        'when' => $snapshot->locked_at?->timezone(config('app.display_timezone'))->format('j M Y, H:i') ?? '—',
                                    ]) }}
                                @else
                                    {{ __('Reopened by :who on :when. Reason: :reason', [
                                        'who' => $snapshot->reopener?->name ?? __('an administrator'),
                                        'when' => $snapshot->reopened_at?->timezone(config('app.display_timezone'))->format('j M Y, H:i') ?? '—',
                                        'reason' => $snapshot->reopen_reason ?: __('not recorded'),
                                    ]) }}
                                @endif
                            </p>
                        </div>
                    </div>
                    <x-badge :color="$snapshot->isClosed() ? 'emerald' : 'amber'">
                        {{ $snapshot->isClosed() ? __('Locked') : __('Open for correction') }}
                    </x-badge>
                </div>

                @php
                    $frozen = [
                        ['label' => __('Cash collected'), 'value' => $snapshot->cash_collected_base],
                        ['label' => __('Gross profit'),   'value' => $snapshot->gross_profit_base],
                        ['label' => __('Net profit'),     'value' => $snapshot->net_profit_base],
                        ['label' => __('Retained'),       'value' => $snapshot->retained_profit_base],
                    ];
                    $frozenCash = [
                        ['label' => __('Opening cash'), 'value' => $snapshot->opening_cash_base],
                        ['label' => __('Cash in'),      'value' => $snapshot->cash_in_base],
                        ['label' => __('Cash out'),     'value' => $snapshot->cash_out_base],
                        ['label' => __('Closing cash'), 'value' => $snapshot->closing_cash_base],
                        ['label' => __('of which walk-in change held'), 'value' => $snapshot->held_change_base, 'muted' => true],
                    ];
                @endphp

                <div class="grid gap-px bg-slate-100 sm:grid-cols-2">
                    <div class="bg-white p-4 sm:p-5">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Frozen profit & loss') }}</p>
                        <dl class="mt-3 space-y-2">
                            @foreach ($frozen as $f)
                                <div class="flex items-center justify-between gap-3 text-sm">
                                    <dt class="text-slate-500">{{ $f['label'] }}</dt>
                                    <dd class="whitespace-nowrap font-semibold tabular-nums text-slate-900">{{ $baseCode }} {{ number_format((float) $f['value'], 2) }}</dd>
                                </div>
                            @endforeach
                        </dl>
                    </div>
                    <div class="bg-white p-4 sm:p-5">
                        <p class="text-[11px] font-semibold uppercase tracking-wider text-slate-400">{{ __('Frozen cash block') }}</p>
                        <dl class="mt-3 space-y-2">
                            @foreach ($frozenCash as $f)
                                <div class="flex items-center justify-between gap-3 {{ ($f['muted'] ?? false) ? 'text-xs' : 'text-sm' }}">
                                    <dt class="{{ ($f['muted'] ?? false) ? 'pl-3 text-slate-400' : 'text-slate-500' }}">{{ $f['label'] }}</dt>
                                    <dd class="whitespace-nowrap font-semibold tabular-nums {{ ($f['muted'] ?? false) ? 'text-slate-500' : 'text-slate-900' }}">{{ $baseCode }} {{ number_format((float) $f['value'], 2) }}</dd>
                                </div>
                            @endforeach
                        </dl>
                        <p class="mt-3 text-xs text-slate-400">{{ __('Next month must open on this closing figure. Change held for walk-in customers is inside it and carries forward as theirs.') }}</p>
                    </div>
                </div>
            </x-card>
        @endif

        {{-- Headline cards for the selected month --}}
        <section class="grid grid-cols-2 gap-4 sm:grid-cols-3 lg:grid-cols-5">
            @foreach ($metrics as $m)
                @php
                    $tone = $m['delta'] === null ? 'muted' : ($m['delta'] >= 0 ? 'up' : 'down');
                    $pill = ['up' => 'bg-emerald-50 text-emerald-700', 'down' => 'bg-rose-50 text-rose-700', 'muted' => 'bg-slate-100 text-slate-500'][$tone];
                @endphp
                <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 px-2 py-1 text-[11px] font-semibold {{ $pill }}">
                        @if ($m['delta'] !== null)
                            <x-icon :name="$m['delta'] >= 0 ? 'arrow-trending-up' : 'arrow-trending-down'" class="h-3 w-3 shrink-0" />
                            {{ number_format(abs($m['delta']), 0) }}% {{ $m['deltaLabel'] }}
                        @else
                            {{ $m['sub'] }}
                        @endif
                    </span>
                </x-card>
            @endforeach
        </section>

        <div class="grid gap-6 lg:grid-cols-2">

            {{-- Pre-close review --}}
            <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">{{ __('Pre-close review') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('This month beside last month. Anything moving :pct% or more is flagged, in either direction.', ['pct' => 25]) }}</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">{{ __('Figure') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ $monthLabel }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ $previousLabel }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Change') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @php $lastGroup = null; @endphp
                            @foreach ($review as $r)
                                @if ($lastGroup !== null && $r['group'] !== $lastGroup)
                                    <tr class="bg-slate-50/60">
                                        <td colspan="4" class="px-3 py-2 text-[11px] font-semibold uppercase tracking-wider text-slate-400 lg:px-4">{{ __('Cash position') }}</td>
                                    </tr>
                                @endif
                                @php $lastGroup = $r['group']; @endphp
                                <tr wire:key="review-{{ $loop->index }}" class="transition hover:bg-slate-50/70">
                                    <td class="px-3 py-3 text-sm lg:px-4 {{ $r['strong'] ? 'font-semibold text-slate-900' : 'text-slate-600' }}">
                                        {{ $r['label'] }}
                                        @if ($r['flagged'])
                                            <x-icon name="exclamation-triangle" class="ms-1 inline h-3.5 w-3.5 {{ $r['favourable'] ? 'text-emerald-500' : 'text-brand-yellow-600' }}" />
                                        @endif
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-3 text-right text-sm tabular-nums lg:px-4 {{ $r['strong'] ? 'font-bold text-slate-900' : 'font-semibold text-slate-900' }}">{{ number_format((float) $r['now'], 2) }}</td>
                                    <td class="whitespace-nowrap px-3 py-3 text-right text-sm tabular-nums text-slate-400 lg:px-4">{{ number_format((float) $r['was'], 2) }}</td>
                                    <td class="whitespace-nowrap px-3 py-3 text-right text-sm tabular-nums lg:px-4">
                                        <span class="font-semibold {{ $r['favourable'] ? 'text-emerald-600' : 'text-rose-600' }}">
                                            {{ $r['delta'] >= 0 ? '+' : '−' }}{{ number_format(abs((float) $r['delta']), 2) }}
                                        </span>
                                        @if ($r['pct'] !== null)
                                            <span class="ms-1 text-xs text-slate-400">({{ number_format(abs((float) $r['pct']), 1) }}%)</span>
                                        @endif
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </x-card>

            {{-- Readiness checklist --}}
            <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">{{ __('Readiness checklist') }}</h2>
                        <p class="text-xs text-slate-400">{{ __('Everything that should have landed in :month before it is frozen.', ['month' => $monthLabel]) }}</p>
                    </div>
                    <x-badge :color="count($blockers) > 0 ? 'rose' : (count($warnings) > 0 ? 'amber' : 'emerald')">
                        {{ count($blockers) > 0
                            ? __('Not ready')
                            : (count($warnings) > 0 ? trans_choice('{1} :count loose end|[2,*] :count loose ends', count($warnings), ['count' => count($warnings)]) : __('Ready to close')) }}
                    </x-badge>
                </div>

                <ul class="divide-y divide-slate-100">
                    @foreach ($checklist as $item)
                        @php $tone = $item['ok'] ? $okTone : $checkTone[$item['severity']]; @endphp
                        <li wire:key="check-{{ $item['key'] }}" class="flex items-start gap-3 p-4 transition hover:bg-slate-50/70 sm:px-5">
                            <span class="flex h-8 w-8 shrink-0 items-center justify-center rounded-lg {{ $tone['chip'] }}">
                                <x-icon :name="$tone['icon']" class="h-4 w-4" />
                            </span>
                            <div class="min-w-0 flex-1">
                                <div class="flex flex-wrap items-center gap-2">
                                    <p class="text-sm font-semibold text-slate-900">{{ $item['label'] }}</p>
                                    @unless ($item['ok'])
                                        <x-badge :color="$tone['badge']">{{ $tone['word'] }}</x-badge>
                                    @endunless
                                </div>
                                <p class="mt-0.5 text-xs leading-relaxed text-slate-500">{{ $item['message'] }}</p>
                                @if (! $item['ok'] && $item['route'])
                                    <a href="{{ route($item['route'], $item['params']) }}" wire:navigate
                                       class="mt-1.5 inline-flex items-center gap-1 text-xs font-semibold text-indigo-600 transition hover:text-indigo-800">
                                        {{ __('Fix in :page', ['page' => $item['cta']]) }}
                                        <x-icon name="arrow-right" class="h-3.5 w-3.5" />
                                    </a>
                                @endif
                            </div>
                        </li>
                    @endforeach
                </ul>
            </x-card>
        </div>

        {{-- Closed months --}}
        <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">{{ __('Closed months') }}</h2>
                <p class="text-xs text-slate-400">{{ __('The frozen figure is never edited. Where a correction was authorised, it is shown as a separate reconciling line.') }}</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">{{ __('Month') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Status') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Closed by') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Net profit (frozen)') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Adjustments') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Closing cash') }}</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 ($history as $row)
                            @php
                                $key = sprintf('%04d-%02d', $row->period_year, $row->period_month);
                                $adj = (float) ($adjustmentTotals[$key] ?? 0);
                            @endphp
                            <tr wire:key="snap-{{ $row->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">
                                    {{ \Illuminate\Support\Carbon::create($row->period_year, $row->period_month, 1)->format('F Y') }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                    <x-badge :color="$row->isClosed() ? 'emerald' : 'amber'">
                                        {{ $row->isClosed() ? __('Locked') : __('Reopened') }}
                                    </x-badge>
                                </td>
                                <td class="px-3 py-4 text-sm text-slate-600 lg:px-4">
                                    {{ $row->closer?->name ?? $row->locker?->name ?? '—' }}
                                    <span class="block text-xs text-slate-400">
                                        {{ $row->locked_at?->timezone(config('app.display_timezone'))->format('j M Y, H:i') ?? '—' }}
                                    </span>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">
                                    {{ number_format((float) $row->net_profit_base, 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums lg:px-4">
                                    @if (abs($adj) > 0.004)
                                        <span class="font-semibold {{ $adj >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                                            {{ $adj >= 0 ? '+' : '−' }}{{ number_format(abs($adj), 2) }}
                                        </span>
                                        <span class="block text-xs text-slate-400">
                                            {{ __('adjusted :amount', ['amount' => number_format((float) $row->net_profit_base + $adj, 2)]) }}
                                        </span>
                                    @else
                                        <span class="text-slate-300">—</span>
                                    @endif
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-600 lg:px-4">
                                    {{ number_format((float) $row->closing_cash_base, 2) }}
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-medium lg:px-4">
                                    <div class="flex items-center justify-end gap-3">
                                        <button type="button" wire:click="$set('month', '{{ $key }}')" class="text-slate-500 transition hover:text-slate-700">{{ __('View') }}</button>
                                        @if ($canManage && $row->isClosed())
                                            <button type="button" wire:click="confirmReopen({{ $row->id }})" class="text-rose-600 transition hover:text-rose-800">{{ __('Reopen') }}</button>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="7" class="px-6 py-12">
                                    <x-empty-state icon="lock-closed" :title="__('No month has been closed yet')"
                                        :message="__('Once you close a month its figures stop moving, and the reports for that month give the same answer forever.')"
                                        class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>

        {{-- Reopen: reason is mandatory and it is recorded against the month. --}}
        <x-dialog-modal wire:model.live="showReopen" maxWidth="lg">
            <x-slot name="title">{{ __('Reopen a closed month') }}</x-slot>

            <x-slot name="content">
                <p class="text-sm text-slate-500">
                    {{ __('Reopening un-freezes the month: its figures start moving again and back-dated writes are accepted. Most corrections belong in an authorised adjustment instead, which leaves the closed figure intact.') }}
                </p>

                <div class="mt-4">
                    <x-label for="reopenReason" value="{{ __('Why is this month being reopened?') }}" />
                    <textarea id="reopenReason" rows="3" wire:model="reopenReason"
                        placeholder="{{ __('e.g. The February supplier bill was received late and must go into the month it belongs to.') }}"
                        class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm placeholder:text-xs focus:border-indigo-500 focus:ring-indigo-500"></textarea>
                    <x-input-error for="reopenReason" class="mt-2" />
                    <p class="mt-1.5 text-xs text-slate-400">{{ __('Recorded against the month with your name and the time, and visible to every director.') }}</p>
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button type="button" wire:click="closeReopen">{{ __('Cancel') }}</x-secondary-button>
                <x-button type="button" class="ms-3" wire:click="reopen" wire:loading.attr="disabled" wire:target="reopen">
                    <span wire:loading.remove wire:target="reopen">{{ __('Reopen Month') }}</span>
                    <span wire:loading wire:target="reopen">{{ __('Reopening…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>

    </div>
</div>