@php $fmt = app(\App\Services\Formatter::class); @endphp

<div>
    <x-ui.page-header
        title="Verification queue"
        :subtitle="$pendingCount > 0
            ? $pendingCount.' payment(s) waiting. Oldest first.'
            : 'Nothing waiting. Every claimed payment has been answered.'"
    />

    <div class="grid gap-4 xl:grid-cols-5">

        {{-- ------------------------------------------------------ the list --}}
        <div class="xl:col-span-2">
            <x-ui.card :padded="false">
                <div class="border-b border-slate-200 p-3 dark:border-slate-800">
                    <x-ui.search-bar placeholder="Reference, TID, sender, shop…" />

                    <div class="mt-2 flex flex-wrap gap-2">
                        <select wire:model.live="status" class="field-input w-auto py-1 text-xs">
                            @foreach ($statuses as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>

                        <select wire:model.live="gateway" class="field-input w-auto py-1 text-xs">
                            <option value="">All methods</option>
                            @foreach ($gateways as $value => $label)
                                <option value="{{ $value }}">{{ $label }}</option>
                            @endforeach
                        </select>

                        @if ($this->hasActiveFilters())
                            <button type="button" wire:click="clearFilters" class="btn btn-ghost btn-sm">
                                <x-ui.icon name="x" class="h-3.5 w-3.5" /> Clear
                            </button>
                        @endif
                    </div>
                </div>

                @if ($rows->isEmpty())
                    <x-ui.empty
                        icon="inbox"
                        title="Queue is clear"
                        message="Nothing matches these filters. When a shop uploads a payment screenshot it appears here."
                    />
                @else
                    <ul class="max-h-[70vh] divide-y divide-slate-100 overflow-y-auto dark:divide-slate-800">
                        @foreach ($rows as $row)
                            @php $active = $selectedId === $row->id; @endphp

                            <li>
                                <button
                                    type="button"
                                    wire:click="select({{ $row->id }})"
                                    @class([
                                        'w-full px-4 py-3 text-left transition hover:bg-slate-50 dark:hover:bg-slate-800/60',
                                        'bg-brand-soft/60 dark:bg-slate-800' => $active,
                                    ])
                                >
                                    <div class="flex items-start justify-between gap-2">
                                        <div class="min-w-0">
                                            <p class="truncate text-sm font-semibold text-slate-800 dark:text-slate-100">
                                                {{ $row->tenant?->business_name ?? 'Unknown shop' }}
                                            </p>
                                            <p class="tabular truncate text-xs text-slate-500">{{ $row->reference }}</p>
                                        </div>

                                        <div class="shrink-0 text-right">
                                            <p class="tabular text-sm font-semibold">{{ $fmt->money($row->amount) }}</p>
                                            <p class="text-[11px] text-slate-400">{{ $row->created_at->diffForHumans(short: true) }}</p>
                                        </div>
                                    </div>

                                    <div class="mt-1.5 flex flex-wrap items-center gap-1.5">
                                        <x-ui.badge :color="$row->gateway->color()">{{ $row->gateway->label() }}</x-ui.badge>
                                        <x-ui.badge :color="$row->status->color()">{{ $row->status->label() }}</x-ui.badge>

                                        @if ($row->proof_path === null)
                                            <x-ui.badge color="red">No screenshot</x-ui.badge>
                                        @endif
                                    </div>
                                </button>
                            </li>
                        @endforeach
                    </ul>

                    <x-resource.pagination :rows="$rows" />
                @endif
            </x-ui.card>
        </div>

        {{-- ---------------------------------------------------- the decision --}}
        <div class="xl:col-span-3">
            @if (! $payment)
                <x-ui.card>
                    <x-ui.empty
                        icon="eye"
                        title="Pick a payment to review"
                        message="Choose one from the list. You will see the screenshot, what the shop says they sent, and what they owe — side by side."
                    />
                </x-ui.card>
            @else
                @php
                    $invoice = $payment->invoice;
                    $expected = $invoice ? $invoice->balance() : (float) $payment->subscription?->amount;
                    $shortfall = round($expected - (float) $payment->amount, 2);
                @endphp

                <x-ui.card
                    :title="$payment->tenant?->business_name ?? 'Unknown shop'"
                    :subtitle="$payment->reference.' · submitted '.$fmt->dateTime($payment->created_at)"
                >
                    <x-slot:actions>
                        <x-ui.badge :color="$payment->status->color()">{{ $payment->status->label() }}</x-ui.badge>
                    </x-slot:actions>

                    {{-- Warnings first. A reviewer under time pressure reads the top. --}}
                    @if ($duplicates->isNotEmpty())
                        <div class="mb-4 rounded-lg border border-red-200 bg-red-50 p-3 text-sm text-red-800 dark:border-red-900 dark:bg-red-950 dark:text-red-200">
                            <p class="font-semibold">This transaction ID has been submitted before.</p>
                            <ul class="mt-1 space-y-0.5 text-xs">
                                @foreach ($duplicates as $duplicate)
                                    <li>
                                        {{ $duplicate->reference }} —
                                        {{ $duplicate->tenant?->business_name }} —
                                        {{ $fmt->money($duplicate->amount) }} —
                                        <strong>{{ $duplicate->status->label() }}</strong>
                                        ({{ $fmt->date($duplicate->created_at) }})
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    @endif

                    @if ($shortfall > 0.009)
                        <div class="mb-4 rounded-lg border border-amber-200 bg-amber-50 p-3 text-sm text-amber-900 dark:border-amber-900 dark:bg-amber-950 dark:text-amber-100">
                            <p class="font-semibold">Short by {{ $fmt->money($shortfall) }}</p>
                            <p class="mt-0.5 text-xs">
                                The invoice balance is {{ $fmt->money($expected) }} but this payment is
                                {{ $fmt->money($payment->amount) }}. Approving credits the invoice but does
                                <strong>not</strong> start the term until it is settled in full.
                            </p>
                        </div>
                    @elseif ($shortfall < -0.009)
                        <div class="mb-4 rounded-lg border border-blue-200 bg-blue-50 p-3 text-sm text-blue-900 dark:border-blue-900 dark:bg-blue-950 dark:text-blue-100">
                            <p class="font-semibold">Overpaid by {{ $fmt->money(abs($shortfall)) }}</p>
                            <p class="mt-0.5 text-xs">Confirm with the shop whether to credit the surplus to the next term.</p>
                        </div>
                    @endif

                    <div class="grid gap-4 md:grid-cols-2">

                        {{-- ------------------------------------- the evidence --}}
                        <div>
                            <p class="field-label">Screenshot</p>

                            @if (! $payment->proof_path)
                                <div class="flex h-56 items-center justify-center rounded-lg border border-dashed border-slate-300 text-sm text-slate-400 dark:border-slate-700">
                                    No file was uploaded
                                </div>
                            @elseif ($payment->proof_is_pdf)
                                <a href="{{ $payment->proof_url }}" target="_blank" rel="noopener"
                                   class="flex h-56 flex-col items-center justify-center gap-2 rounded-lg border border-slate-200 text-sm text-brand hover:bg-slate-50 dark:border-slate-700">
                                    <x-ui.icon name="doc" class="h-8 w-8" />
                                    Open the PDF receipt
                                </a>
                            @else
                                {{-- Click to open full size: wallet screenshots are tall and unreadable inline. --}}
                                <a href="{{ $payment->proof_url }}" target="_blank" rel="noopener" class="block">
                                    <img src="{{ $payment->proof_url }}" alt="Payment screenshot"
                                         class="max-h-96 w-full rounded-lg border border-slate-200 object-contain dark:border-slate-700">
                                    <span class="mt-1 inline-flex items-center gap-1 text-xs text-brand hover:underline">
                                        <x-ui.icon name="eye" class="h-3.5 w-3.5" /> Open full size
                                    </span>
                                </a>
                            @endif
                        </div>

                        {{-- ------------------------------------- what they say --}}
                        <div class="space-y-3 text-sm">
                            <div>
                                <p class="field-label">They say they sent</p>
                                <p class="tabular text-2xl font-semibold text-slate-900 dark:text-white">
                                    {{ $fmt->money($payment->amount) }}
                                </p>
                                <p class="text-xs text-slate-500">
                                    via {{ $payment->gateway->label() }}
                                    @if ($payment->account) into {{ $payment->account->title }} @endif
                                </p>
                            </div>

                            <dl class="space-y-1.5 text-xs">
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Paid on</dt>
                                    <dd class="text-right font-medium">{{ $fmt->dateTime($payment->paid_at) }}</dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Transaction ID</dt>
                                    <dd class="tabular text-right font-medium">{{ $payment->transaction_id ?: '—' }}</dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Sender name</dt>
                                    <dd class="text-right font-medium">{{ $payment->sender_name ?: '—' }}</dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">{{ $payment->gateway->senderFieldLabel() }}</dt>
                                    <dd class="tabular text-right font-medium">{{ $payment->sender_account ?: '—' }}</dd>
                                </div>
                                <div class="flex justify-between gap-3">
                                    <dt class="text-slate-500">Submitted from</dt>
                                    <dd class="tabular text-right font-medium">{{ $payment->submitted_ip ?: '—' }}</dd>
                                </div>
                            </dl>

                            @if ($payment->tenant_note)
                                <div class="rounded-lg bg-slate-50 p-2.5 text-xs dark:bg-slate-800">
                                    <p class="font-medium text-slate-500">Their note</p>
                                    <p class="mt-0.5">{{ $payment->tenant_note }}</p>
                                </div>
                            @endif

                            <hr class="border-slate-200 dark:border-slate-800">

                            <div>
                                <p class="field-label">Against</p>
                                <p class="font-medium">
                                    {{ $payment->subscription?->plan?->name ?? 'No plan' }}
                                    <span class="text-slate-500">({{ $payment->subscription?->billing_cycle->label() }})</span>
                                </p>
                                <p class="text-xs text-slate-500">
                                    @if ($invoice)
                                        Invoice {{ $invoice->invoice_number }} ·
                                        {{ $fmt->money($invoice->total) }} total ·
                                        {{ $fmt->money($invoice->paid_amount) }} already credited
                                    @else
                                        No invoice attached
                                    @endif
                                </p>
                            </div>

                            <div class="text-xs">
                                <a href="{{ route('tenants.show', $payment->tenant_id) }}" wire:navigate
                                   class="font-medium text-brand hover:underline">
                                    Open the shop's full history →
                                </a>
                            </div>
                        </div>
                    </div>

                    {{-- ------------------------------------------ the verdict --}}
                    <div class="mt-5 border-t border-slate-200 pt-4 dark:border-slate-800">
                        @if ($payment->isPending())
                            <x-ui.textarea
                                label="Internal note (optional)"
                                wire:model="note"
                                rows="2"
                                placeholder="e.g. matched against Meezan statement, 14:32"
                            />

                            <div class="mt-3 flex flex-wrap gap-2">
                                <x-ui.button variant="primary" wire:click="approve" loading="approve" icon="check">
                                    Verify &amp; activate
                                </x-ui.button>

                                <x-ui.button variant="danger" wire:click="openReject" icon="x">
                                    Reject
                                </x-ui.button>
                            </div>

                            <p class="mt-2 text-xs text-slate-400">
                                Verifying starts the term today, credits the invoice and unlocks the shop immediately.
                            </p>
                        @else
                            <div class="rounded-lg bg-slate-50 p-3 text-sm dark:bg-slate-800">
                                <p class="font-medium">
                                    {{ $payment->status->label() }} on {{ $fmt->dateTime($payment->reviewed_at) }}
                                </p>

                                @if ($payment->rejection_reason)
                                    <p class="mt-1 text-xs text-red-600 dark:text-red-400">
                                        Reason given: {{ $payment->rejection_reason }}
                                    </p>
                                @endif

                                @if ($payment->admin_note)
                                    <p class="mt-1 whitespace-pre-line text-xs text-slate-500">{{ $payment->admin_note }}</p>
                                @endif
                            </div>

                            <x-ui.button class="mt-3" wire:click="openReopen" icon="refresh" size="sm">
                                Reopen for review
                            </x-ui.button>
                        @endif
                    </div>
                </x-ui.card>
            @endif
        </div>
    </div>

    {{-- ------------------------------------------------------- reject modal --}}
    <x-ui.modal show="showReject" title="Reject this payment" width="lg" close-action="$set('showReject', false)">
        <p class="text-sm text-slate-600 dark:text-slate-300">
            The shop owner sees this sentence and nothing else, so make it specific enough to act on —
            "screenshot is for Rs 3,000, invoice is Rs 5,000" rather than "invalid".
        </p>

        <div class="mt-4">
            <x-ui.textarea
                label="Reason (sent to the shop)"
                wire:model="rejectionReason"
                rows="3"
                :error="$errors->first('rejectionReason')"
                placeholder="What is wrong and what should they do next?"
            />
        </div>

        <x-slot:footer>
            <x-ui.button wire:click="$set('showReject', false)">Cancel</x-ui.button>
            <x-ui.button variant="danger" wire:click="reject" loading="reject">Reject payment</x-ui.button>
        </x-slot:footer>
    </x-ui.modal>

    {{-- ------------------------------------------------------- reopen modal --}}
    <x-ui.modal show="showReopen" title="Reopen for review" width="lg" close-action="$set('showReopen', false)">
        <p class="text-sm text-slate-600 dark:text-slate-300">
            This puts the payment back in the pending queue. It deliberately does <strong>not</strong>
            revoke access the shop already has — to take access away, suspend the shop instead.
        </p>

        <div class="mt-4">
            <x-ui.textarea
                label="Why is this being reopened?"
                wire:model="reopenReason"
                rows="2"
                :error="$errors->first('reopenReason')"
            />
        </div>

        <x-slot:footer>
            <x-ui.button wire:click="$set('showReopen', false)">Cancel</x-ui.button>
            <x-ui.button variant="primary" wire:click="reopen" loading="reopen">Reopen</x-ui.button>
        </x-slot:footer>
    </x-ui.modal>
</div>