@php
    $tabMeta = [
        'pending'  => ['label' => __('Awaiting approval'), 'icon' => 'clock'],
        'approved' => ['label' => __('Approved'),          'icon' => 'check-circle'],
        'all'      => ['label' => __('All requests'),      'icon' => 'queue-list'],
    ];
@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="__('Period Adjustments')"
            :subtitle="__('The only legal way to correct a month that is already closed. The frozen figures are never edited; a correction is booked as its own reconciling line so the original and the change both stay on the record.')"
        >
            <a href="{{ route('close.index') }}" wire:navigate>
                <x-secondary-button type="button">
                    <x-icon name="lock-closed" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Close Month') }}
                </x-secondary-button>
            </a>
            @if ($canRequest)
                <x-button type="button" wire:click="create">
                    <x-icon name="plus" class="-ms-1 me-1.5 h-4 w-4" />
                    {{ __('Request Adjustment') }}
                </x-button>
            @endif
        </x-page-header>

        <!-- KPI cards -->
        <section class="grid grid-cols-2 gap-4 sm: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>

        {{-- Reconciling view: frozen figure, correction, corrected figure. --}}
        @if ($reconciliation->isNotEmpty())
            <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 with approved corrections') }}</h2>
                    <p class="text-xs text-slate-400">{{ __('The frozen column is exactly what was locked on closing day and has not been touched. The corrected column is what the month reads once the approved adjustments are applied on top.') }}</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 text-right lg:px-4">{{ __('Corrections') }}</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">{{ __('Adjustment') }}</th>
                                <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Net profit (corrected)') }}</th>
                            </tr>
                        </thead>
                        <tbody class="divide-y divide-slate-100 bg-white">
                            @foreach ($reconciliation as $r)
                                <tr wire:key="recon-{{ $r['key'] }}" 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">{{ $r['label'] }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                        <x-badge :color="$r['locked'] ? 'emerald' : 'amber'">{{ $r['locked'] ? __('Locked') : __('Reopened') }}</x-badge>
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm tabular-nums text-slate-500 lg:px-4">{{ $r['count'] }}</td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums text-slate-900 lg:px-4">
                                        {{ $r['frozen'] === null ? '—' : $baseCode.' '.number_format($r['frozen'], 2) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums lg:px-4 {{ $r['effect'] >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                                        {{ $r['effect'] >= 0 ? '+' : '−' }}{{ number_format(abs($r['effect']), 2) }}
                                    </td>
                                    <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-bold tabular-nums text-slate-900 lg:px-4">
                                        {{ $r['adjusted'] === null ? '—' : $baseCode.' '.number_format($r['adjusted'], 2) }}
                                    </td>
                                </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </x-card>
        @endif

        <!-- Tabs -->
        <div class="flex flex-wrap items-center gap-1 rounded-xl border border-slate-200 bg-slate-50 p-1 text-sm font-medium">
            @foreach ($tabMeta as $key => $meta)
                <button type="button" wire:click="switchTab('{{ $key }}')"
                    class="flex items-center gap-1.5 rounded-lg px-3.5 py-1.5 transition {{ $tab === $key ? 'bg-white text-indigo-600 shadow-sm ring-1 ring-slate-200' : 'text-slate-500 hover:text-slate-700' }}">
                    <x-icon :name="$meta['icon']" class="h-4 w-4" />
                    {{ $meta['label'] }}
                    @if ($key === 'pending' && $pendingCount > 0)
                        <span class="ms-0.5 rounded-full bg-brand-yellow-100 px-1.5 text-[11px] font-bold text-brand-yellow-800">{{ $pendingCount }}</span>
                    @endif
                </button>
            @endforeach
        </div>

        {{-- The register --}}
        <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">{{ $tabMeta[$tab]['label'] }}</h2>
                    <p class="text-xs text-slate-400">{{ __('A request changes nothing until it is approved.') }}</p>
                </div>
                <select wire:model.live="monthFilter" class="rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                    <option value="">{{ __('All months') }}</option>
                    @foreach ($closedMonths as $key => $label)
                        <option value="{{ $key }}">{{ $label }}</option>
                    @endforeach
                </select>
            </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">{{ __('Line') }}</th>
                            <th class="px-3 py-3.5 text-right lg:px-4">{{ __('Effect on profit') }}</th>
                            <th class="px-3 py-3.5 lg:px-4">{{ __('Requested by') }}</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 $signed = $row->signedAmount(); @endphp
                            <tr wire:key="adj-{{ $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('M Y') }}
                                </td>
                                <td class="px-3 py-4 text-sm text-slate-900 lg:px-4">
                                    <span class="font-medium">{{ $row->account_label }}</span>
                                    <span class="mt-0.5 block text-xs leading-relaxed text-slate-500">{{ $row->reason }}</span>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-right text-sm font-semibold tabular-nums lg:px-4 {{ $signed >= 0 ? 'text-emerald-600' : 'text-rose-600' }}">
                                    {{ $signed >= 0 ? '+' : '−' }}{{ number_format(abs($signed), 2) }}
                                    <span class="block text-[11px] font-medium text-slate-400">
                                        {{ $row->direction === \App\Models\PeriodAdjustment::DIRECTION_CREDIT ? __('Credit') : __('Debit') }}
                                    </span>
                                </td>
                                <td class="px-3 py-4 text-sm text-slate-600 lg:px-4">
                                    {{ $row->requester?->name ?? '—' }}
                                    <span class="block text-xs text-slate-400">{{ $row->created_at?->timezone(config('app.display_timezone'))->format('j M Y') }}</span>
                                </td>
                                <td class="whitespace-nowrap px-3 py-4 text-sm lg:px-4">
                                    @if ($row->isApproved())
                                        <x-badge color="emerald">{{ __('Approved') }}</x-badge>
                                        <span class="mt-1 block text-xs text-slate-400">
                                            {{ __('by :who', ['who' => $row->approver?->name ?? '—']) }}
                                        </span>
                                    @else
                                        <x-badge color="amber">{{ __('Awaiting approval') }}</x-badge>
                                    @endif
                                </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">
                                        @if (! $row->isApproved() && $canApprove)
                                            <button type="button" wire:click="confirmApprove({{ $row->id }})" class="text-emerald-600 transition hover:text-emerald-800">{{ __('Approve') }}</button>
                                        @endif
                                        @if (! $row->isApproved() && $canRequest)
                                            <button type="button" wire:click="edit({{ $row->id }})" class="text-indigo-600 transition hover:text-indigo-800">{{ __('Edit') }}</button>
                                            <button type="button" wire:click="withdraw({{ $row->id }})" wire:confirm="{{ __('Withdraw this adjustment request?') }}" class="text-rose-600 transition hover:text-rose-800">{{ __('Withdraw') }}</button>
                                        @endif
                                        @if ($row->isApproved())
                                            <span class="text-xs text-slate-400">{{ __('Immutable') }}</span>
                                        @endif
                                    </div>
                                </td>
                            </tr>
                        @empty
                            <tr>
                                <td colspan="6" class="px-6 py-12">
                                    <x-empty-state icon="pencil-square" :title="__('No adjustments here')"
                                        :message="__('When something is discovered after a month has been closed, request the correction here rather than editing history.')"
                                        class="border-0 bg-transparent py-0" />
                                </td>
                            </tr>
                        @endforelse
                    </tbody>
                </table>
            </div>

            <div class="border-t border-slate-100 px-4 py-3 sm:px-6">
                {{ $rows->links() }}
            </div>
        </x-card>

        {{-- Request / edit --}}
        <x-dialog-modal wire:model.live="showModal" maxWidth="xl">
            <x-slot name="title">
                {{ $editingId ? __('Edit adjustment request') : __('Request a period adjustment') }}
            </x-slot>

            <x-slot name="content">
                <p class="text-sm text-slate-500">
                    {{ __('This does not edit the closed month. It books a separate line against it, so the figure that was reported and the correction are both visible.') }}
                </p>

                <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <x-label for="period" value="{{ __('Month being corrected') }}" />
                        <select id="period" wire:model="period" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            <option value="">{{ __('Choose a month…') }}</option>
                            @foreach ($closedMonths as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="period" class="mt-2" />
                    </div>

                    <div>
                        <x-label for="amount" value="{{ __('Amount') }} ({{ $baseCode }})" />
                        <x-input id="amount" type="number" step="0.01" min="0" class="mt-1 block w-full" wire:model="amount" />
                        <x-input-error for="amount" class="mt-2" />
                    </div>

                    <div class="sm:col-span-2">
                        <x-label for="account_label" value="{{ __('How the line should read') }}" />
                        <x-input id="account_label" type="text" class="mt-1 block w-full" wire:model="account_label"
                            placeholder="{{ __('e.g. Omitted supplier bill, understated fuel') }}" />
                        <x-input-error for="account_label" class="mt-2" />
                    </div>

                    <div class="sm:col-span-2">
                        <x-label for="direction" value="{{ __('Which way does it move the month?') }}" />
                        <select id="direction" wire:model="direction" class="mt-1 block w-full rounded-xl border-slate-300 text-sm shadow-sm focus:border-indigo-500 focus:ring-indigo-500">
                            @foreach ($directions as $key => $label)
                                <option value="{{ $key }}">{{ $label }}</option>
                            @endforeach
                        </select>
                        <x-input-error for="direction" class="mt-2" />
                    </div>

                    <div class="sm:col-span-2">
                        <x-label for="reason" value="{{ __('Why is this needed?') }}" />
                        <textarea id="reason" rows="3" wire:model="reason"
                            placeholder="{{ __('e.g. The March fuel invoice arrived in April and was never recorded in 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="reason" class="mt-2" />
                        <p class="mt-1.5 text-xs text-slate-400">{{ __('Every director is told the moment a request is raised.') }}</p>
                    </div>
                </div>
            </x-slot>

            <x-slot name="footer">
                <x-secondary-button type="button" wire:click="closeModal">{{ __('Cancel') }}</x-secondary-button>
                <x-button type="button" class="ms-3" wire:click="save" wire:loading.attr="disabled" wire:target="save">
                    <span wire:loading.remove wire:target="save">{{ $editingId ? __('Save Request') : __('Submit Request') }}</span>
                    <span wire:loading wire:target="save">{{ __('Saving…') }}</span>
                </x-button>
            </x-slot>
        </x-dialog-modal>

        {{-- Approve --}}
        <x-dialog-modal wire:model.live="showApprove" maxWidth="lg">
            <x-slot name="title">{{ __('Approve this adjustment') }}</x-slot>

            <x-slot name="content">
                <p class="text-sm text-slate-500">
                    {{ __('Approving makes the correction count. It is added as a reconciling line on the month it names; the closed figures stay exactly as they were locked, and an approved adjustment can never be edited, only reversed by another one.') }}
                </p>
            </x-slot>

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

    </div>
</div>