@php
    $uncleared = $summary['uncleared'] ?? [];
    $selectedIds = array_map('intval', $selectedLines);
    $selectedDebit = round(collect($uncleared)->filter(fn ($line) => in_array((int) $line['id'], $selectedIds, true))->sum('debit'), 2);
    $selectedCredit = round(collect($uncleared)->filter(fn ($line) => in_array((int) $line['id'], $selectedIds, true))->sum('credit'), 2);
    $opening = (float) ($statementOpening !== '' ? $statementOpening : 0);
    $clearedBalance = round($opening + $selectedDebit - $selectedCredit, 2);
    $closing = (float) ($statementClosing !== '' ? $statementClosing : 0);
    $difference = round($closing - $clearedBalance, 2);
    $isBalanced = $statementClosing !== '' && abs($difference) < 0.01;
@endphp

<div class="mx-auto max-w-7xl space-y-6">
    <div>
        <h1 class="text-xl font-bold text-ink dark:text-slate-100">{{ __('app.accounts.reconciliation.title') }}</h1>
        <p class="mt-1 text-sm text-muted dark:text-slate-400">{{ __('app.accounts.reconciliation.desc') }}</p>
    </div>

    <x-accounts-nav />

    @if ($notice)
        <x-alert type="success">{{ $notice }}</x-alert>
    @endif

    @if ($errors->any())
        <x-alert type="error">
            <ul class="list-disc space-y-1 ps-4">
                @foreach ($errors->all() as $message)
                    <li>{{ $message }}</li>
                @endforeach
            </ul>
        </x-alert>
    @endif

    @if ($banks->isEmpty())
        <x-card>
            <x-empty-state icon="banknotes" :title="__('app.accounts.reconciliation.no_bank_title')"
                :description="__('app.accounts.reconciliation.no_bank_desc')">
                <x-slot name="actions">
                    @can('chart_of_accounts.create')
                        <x-link-button :href="route('accounts.chart.index')">{{ __('app.accounts.chart.new_bank') }}</x-link-button>
                    @endcan
                </x-slot>
            </x-empty-state>
        </x-card>
    @else
        <x-card>
            <div class="grid items-end gap-4 sm:grid-cols-2 lg:grid-cols-3">
                <x-form.select name="bankId" :label="__('app.accounts.reconciliation.bank')" wire:model.live="bankId">
                    @foreach ($banks as $option)
                        <option value="{{ $option->id }}">{{ $option->code }} — {{ $option->localizedName() }}</option>
                    @endforeach
                </x-form.select>
                <x-form.input name="statementDate" type="date" :label="__('app.accounts.reconciliation.as_of')" wire:model.live="statementDate" required />
                <div class="text-xs text-muted dark:text-slate-400">
                    @if ($summary['last_statement'])
                        {{ __('app.accounts.reconciliation.last_statement') }}:
                        <span class="font-mono font-semibold text-ink dark:text-slate-100">{{ number_format((float) $summary['last_statement']->statement_closing, 2) }}</span>
                        <span class="block">{{ $summary['last_statement']->statement_date->translatedFormat('d M Y') }}</span>
                    @else
                        {{ __('app.accounts.reconciliation.suggested_opening') }}:
                        <span class="font-mono font-semibold text-ink dark:text-slate-100">{{ number_format((float) $summary['suggested_opening'], 2) }}</span>
                    @endif
                </div>
            </div>
        </x-card>

        <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
            <x-card>
                <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.reconciliation.ledger_balance') }}</span>
                <span class="mt-1 block font-mono text-lg font-bold text-ink dark:text-slate-100">{{ number_format((float) $summary['ledger_balance'], 2) }}</span>
            </x-card>
            <x-card>
                <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.reconciliation.cleared_total') }}</span>
                <span class="mt-1 block font-mono text-lg font-bold text-ink dark:text-slate-100">{{ number_format((float) $summary['cleared_total'], 2) }}</span>
            </x-card>
            <x-card>
                <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.reconciliation.uncleared_total') }}</span>
                <span class="mt-1 block font-mono text-lg font-bold text-ink dark:text-slate-100">{{ number_format((float) $summary['uncleared_net'], 2) }}</span>
            </x-card>
            <x-card>
                <span class="block text-xs font-semibold tracking-wide text-muted uppercase dark:text-slate-400">{{ __('app.accounts.reconciliation.suggested_opening') }}</span>
                <span class="mt-1 block font-mono text-lg font-bold text-ink dark:text-slate-100">{{ number_format((float) $summary['suggested_opening'], 2) }}</span>
            </x-card>
        </div>

        @can('bank_reconciliation.create')
            <x-card :title="__('app.accounts.reconciliation.lines_title')">
                <div class="space-y-4">
                    <p class="text-sm text-muted dark:text-slate-400">{{ __('app.accounts.reconciliation.lines_hint') }}</p>

                    <div class="grid gap-4 sm:grid-cols-2 lg:grid-cols-4">
                        <x-form.input name="statementOpening" type="number" step="0.01" :label="__('app.accounts.reconciliation.statement_opening')" wire:model.live="statementOpening" required />
                        <x-form.input name="statementClosing" type="number" step="0.01" :label="__('app.accounts.reconciliation.statement_closing')" wire:model.live="statementClosing" required />
                        <x-form.input name="notes" :label="__('app.accounts.reconciliation.notes')" wire:model="notes" />
                        <div class="flex items-end">
                            <div class="w-full rounded-xl bg-slate-50 px-3.5 py-2.5 text-sm dark:bg-slate-800/60">
                                <span class="block text-xs font-medium text-muted dark:text-slate-400">{{ __('app.accounts.reconciliation.cleared_balance') }}</span>
                                <span class="font-mono font-semibold text-ink dark:text-slate-100">{{ number_format($clearedBalance, 2) }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="overflow-x-auto">
                        <table class="w-full text-sm">
                            <thead>
                                <tr class="border-b border-slate-200 text-left text-xs font-semibold tracking-wide text-muted uppercase dark:border-slate-800 dark:text-slate-400">
                                    <th class="w-10 px-2 py-2">
                                        <input type="checkbox" wire:model.live="selectAll"
                                            class="h-4 w-4 rounded border-slate-300 text-maroon focus:ring-maroon/30">
                                        <span class="sr-only">{{ __('app.accounts.reconciliation.select_all') }}</span>
                                    </th>
                                    <th class="px-2 py-2">{{ __('app.accounts.vouchers.form.entry_no') }}</th>
                                    <th class="px-2 py-2">{{ __('app.accounts.fields.date') }}</th>
                                    <th class="px-2 py-2">{{ __('app.accounts.fields.memo') }}</th>
                                    <th class="px-2 py-2 text-right">{{ __('app.accounts.fields.debit') }}</th>
                                    <th class="px-2 py-2 text-right">{{ __('app.accounts.fields.credit') }}</th>
                                </tr>
                            </thead>
                            <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                                @forelse ($uncleared as $line)
                                    <tr wire:key="uncleared-{{ $line['id'] }}" class="transition hover:bg-slate-50/70 dark:hover:bg-slate-800/40">
                                        <td class="px-2 py-2">
                                            <input type="checkbox" value="{{ $line['id'] }}" wire:model.live="selectedLines"
                                                class="h-4 w-4 rounded border-slate-300 text-maroon focus:ring-maroon/30">
                                        </td>
                                        <td class="px-2 py-2 font-mono text-xs">{{ $line['entry_no'] }}</td>
                                        <td class="px-2 py-2 whitespace-nowrap text-muted dark:text-slate-400">{{ \Illuminate\Support\Carbon::parse($line['entry_date'])->translatedFormat('d M Y') }}</td>
                                        <td class="px-2 py-2 text-muted dark:text-slate-400">{{ $line['memo'] ?: '—' }}</td>
                                        <td class="px-2 py-2 text-right font-mono text-xs">{{ (float) $line['debit'] > 0 ? number_format((float) $line['debit'], 2) : '—' }}</td>
                                        <td class="px-2 py-2 text-right font-mono text-xs">{{ (float) $line['credit'] > 0 ? number_format((float) $line['credit'], 2) : '—' }}</td>
                                    </tr>
                                @empty
                                    <tr>
                                        <td colspan="6" class="px-2 py-8 text-center text-xs text-muted dark:text-slate-400">
                                            {{ __('app.accounts.reconciliation.empty_lines') }}
                                        </td>
                                    </tr>
                                @endforelse
                            </tbody>
                        </table>
                    </div>

                    <div class="flex flex-wrap items-center justify-between gap-3 border-t border-slate-200 pt-3 text-sm dark:border-slate-800">
                        <span class="text-muted dark:text-slate-400">
                            {{ __('app.accounts.reconciliation.selected_count', ['count' => count($selectedLines)]) }}
                            <span class="ms-2 font-mono text-xs">{{ number_format($selectedDebit, 2) }} / {{ number_format($selectedCredit, 2) }}</span>
                        </span>
                        <div class="flex flex-wrap items-center gap-3">
                            <span class="text-muted dark:text-slate-400">
                                {{ __('app.accounts.reconciliation.difference') }}:
                                <span @class([
                                    'font-mono font-semibold',
                                    'text-green-600 dark:text-green-400' => $isBalanced,
                                    'text-red-600 dark:text-red-400' => ! $isBalanced,
                                ])>{{ number_format($difference, 2) }}</span>
                            </span>
                            @if ($isBalanced)
                                <x-badge color="green">{{ __('app.accounts.reconciliation.balanced') }}</x-badge>
                            @else
                                <x-badge color="red">{{ __('app.accounts.reconciliation.not_balanced') }}</x-badge>
                            @endif
                            <x-button wire:click="complete" wire:loading.attr="disabled" wire:target="complete"
                                wire:confirm="{{ __('app.accounts.reconciliation.confirm') }}" :disabled="! $isBalanced">
                                <x-icon name="check-circle" class="h-4 w-4" />
                                {{ __('app.accounts.reconciliation.complete') }}
                            </x-button>
                        </div>
                    </div>
                </div>
            </x-card>
        @endcan

        <x-card :title="__('app.accounts.reconciliation.history_title')">
            <div class="overflow-x-auto">
                <table class="w-full text-sm">
                    <thead>
                        <tr class="border-b border-slate-200 text-left text-xs font-semibold tracking-wide text-muted uppercase dark:border-slate-800 dark:text-slate-400">
                            <th class="px-3 py-3">{{ __('app.accounts.reconciliation.columns.number') }}</th>
                            <th class="px-3 py-3">{{ __('app.accounts.reconciliation.columns.date') }}</th>
                            <th class="px-3 py-3 text-right">{{ __('app.accounts.reconciliation.columns.opening') }}</th>
                            <th class="px-3 py-3 text-right">{{ __('app.accounts.reconciliation.columns.closing') }}</th>
                            <th class="px-3 py-3 text-right">{{ __('app.accounts.reconciliation.columns.cleared') }}</th>
                            <th class="px-3 py-3 text-right">{{ __('app.accounts.reconciliation.columns.difference') }}</th>
                            <th class="px-3 py-3">{{ __('app.accounts.reconciliation.columns.completed_by') }}</th>
                            <th class="px-3 py-3 text-right">{{ __('app.accounts.reconciliation.columns.actions') }}</th>
                        </tr>
                    </thead>
                    <tbody class="divide-y divide-slate-100 dark:divide-slate-800">
                        @forelse ($reconciliations as $reconciliation)
                            <tr wire:key="reconciliation-{{ $reconciliation->id }}" class="transition hover:bg-slate-50/70 dark:hover:bg-slate-800/40">
                                <td class="px-3 py-3">
                                    <span class="block font-mono text-xs font-semibold text-ink dark:text-slate-100">{{ $reconciliation->reconciliation_no }}</span>
                                    <span class="mt-0.5 block text-xs text-muted dark:text-slate-400">{{ $reconciliation->bankAccount?->code }}</span>
                                </td>
                                <td class="px-3 py-3 whitespace-nowrap text-muted dark:text-slate-400">{{ $reconciliation->statement_date->translatedFormat('d M Y') }}</td>
                                <td class="px-3 py-3 text-right font-mono text-xs">{{ number_format((float) $reconciliation->statement_opening, 2) }}</td>
                                <td class="px-3 py-3 text-right font-mono text-xs">{{ number_format((float) $reconciliation->statement_closing, 2) }}</td>
                                <td class="px-3 py-3 text-right font-mono text-xs">{{ number_format((float) $reconciliation->cleared_balance, 2) }}</td>
                                <td class="px-3 py-3 text-right">
                                    @if (abs((float) $reconciliation->difference) < 0.01)
                                        <x-badge color="green">{{ number_format((float) $reconciliation->difference, 2) }}</x-badge>
                                    @else
                                        <x-badge color="red">{{ number_format((float) $reconciliation->difference, 2) }}</x-badge>
                                    @endif
                                </td>
                                <td class="px-3 py-3 text-muted dark:text-slate-400">{{ $reconciliation->completer?->name ?? '—' }}</td>
                                <td class="px-3 py-3">
                                    <div class="flex justify-end">
                                        @can('bank_reconciliation.delete')
                                            <x-button variant="danger" class="px-2.5 py-1.5 text-xs" wire:click="delete({{ $reconciliation->id }})"
                                                wire:confirm="{{ __('app.accounts.reconciliation.delete_confirm') }}">
                                                <x-icon name="trash" class="h-3.5 w-3.5" />
                                                {{ __('app.actions.delete') }}
                                            </x-button>
                                        @endcan
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="8" class="px-3 py-8 text-center text-xs text-muted dark:text-slate-400">
                                    {{ __('app.accounts.reconciliation.history_empty') }}
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>
        </x-card>
    @endif
</div>