@php
    $fmt = fn ($v) => '$'.number_format((float) $v, 2);
    $chip = [
        'succeeded' => 'bg-green-500/15 text-green-400',
        'pending' => 'bg-amber-500/15 text-amber-400',
        'processing' => 'bg-blue-500/15 text-blue-400',
        'failed' => 'bg-red-500/15 text-red-400',
        'refunded' => 'bg-indigo-500/15 text-indigo-300',
        'partially_refunded' => 'bg-indigo-500/15 text-indigo-300',
        'cancelled' => 'bg-slate-500/15 text-slate-400',
    ];
@endphp

<div>
    <nav class="mb-2 flex items-center gap-1.5 text-xs text-slate-500">
        <a href="{{ route('admin.billing') }}" wire:navigate class="hover:text-slate-300">Billing</a><x-lucide-chevron-right class="h-3.5 w-3.5" />
        <span class="text-slate-300">Payments</span>
    </nav>
    <x-admin.page-head title="Payments" subtitle="All payment transactions across gateways.">
        <button wire:click="$set('showRecord', true)" class="inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700"><x-lucide-plus class="h-4 w-4" /> Record Payment</button>
    </x-admin.page-head>

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-admin.stat icon="dollar-sign" label="Total Revenue" :value="$fmt($revenue['total'])" tint="#22c55e" />
        <x-admin.stat icon="calendar" label="This Month" :value="$fmt($revenue['this_month'])" tint="#3b82f6" />
        <x-admin.stat icon="repeat" label="MRR" :value="$fmt($mrr)" tint="#7c3aed" />
        <x-admin.stat icon="hourglass" label="Pending" :value="$fmt($revenue['pending'])" tint="#f59e0b" />
    </div>

    <x-admin.card class="mt-5">
        <div class="mb-4 flex flex-wrap items-center gap-3">
            <label class="flex h-10 flex-1 items-center gap-2 rounded-xl border border-edge bg-ink px-3">
                <x-lucide-search class="h-4 w-4 text-slate-500" />
                <input wire:model.live.debounce.300ms="search" placeholder="Search txn id or customer…" class="w-full border-0 bg-transparent p-0 text-sm text-slate-200 placeholder:text-slate-500 focus:ring-0">
            </label>
            <select wire:model.live="status" class="h-10 rounded-xl border-edge bg-ink text-sm text-slate-200 focus:border-brand focus:ring-brand/30">
                <option value="">All statuses</option>
                @foreach (['succeeded', 'pending', 'failed', 'refunded', 'partially_refunded', 'cancelled'] as $s)<option value="{{ $s }}">{{ ucfirst(str_replace('_', ' ', $s)) }}</option>@endforeach
            </select>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-edge text-left text-xs uppercase tracking-wide text-slate-500">
                        <th class="px-3 py-2.5">Customer</th>
                        <th class="px-3 py-2.5">Gateway</th>
                        <th class="px-3 py-2.5 text-right">Amount</th>
                        <th class="px-3 py-2.5">Status</th>
                        <th class="px-3 py-2.5">Transaction</th>
                        <th class="px-3 py-2.5">Date</th>
                        <th class="px-3 py-2.5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($payments as $p)
                        <tr class="border-b border-edge/60 hover:bg-raised/50">
                            <td class="px-3 py-3">
                                <div class="text-slate-200">{{ $p->user?->name ?? '—' }}</div>
                                <div class="text-xs text-slate-500">{{ $p->user?->email }}</div>
                            </td>
                            <td class="px-3 py-3 text-slate-300">{{ ucfirst(str_replace('_', ' ', $p->gateway)) }}</td>
                            <td class="px-3 py-3 text-right font-semibold text-white">
                                {{ $fmt($p->amount) }}
                                @if ((float) $p->amount_refunded > 0)<div class="text-xs text-indigo-300">− {{ $fmt($p->amount_refunded) }}</div>@endif
                            </td>
                            <td class="px-3 py-3"><span class="admin-chip {{ $chip[$p->status] ?? 'bg-slate-500/15 text-slate-400' }}">{{ str_replace('_', ' ', $p->status) }}</span></td>
                            <td class="px-3 py-3 font-mono text-xs text-slate-400">{{ $p->transaction_id ?? $p->reference ?? '—' }}</td>
                            <td class="px-3 py-3 text-slate-400">{{ $p->created_at->format('M j, Y') }}</td>
                            <td class="px-3 py-3 text-right">
                                @if ($p->status === 'pending')
                                    <button wire:click="confirm({{ $p->id }})" wire:confirm="Confirm this payment was received?" class="rounded-lg border border-green-500/30 bg-green-500/10 px-2.5 py-1 text-xs text-green-300 hover:bg-green-500/20">Confirm</button>
                                @elseif (in_array($p->status, ['succeeded', 'partially_refunded']) && (float) $p->amount_refunded < (float) $p->amount)
                                    <button wire:click="openRefund({{ $p->id }})" class="rounded-lg border border-edge bg-raised px-2.5 py-1 text-xs text-slate-200 hover:bg-card">Refund</button>
                                @else
                                    <span class="text-xs text-slate-600">—</span>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-3 py-10 text-center text-slate-500">No payments found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $payments->links('pagination.dark') }}</div>
    </x-admin.card>

    {{-- Record manual payment modal --}}
    @if ($showRecord)
        <div class="fixed inset-0 z-50 grid place-items-center bg-black/60 p-4 backdrop-blur-sm" x-data @keydown.escape.window="$wire.set('showRecord', false)">
            <div class="w-full max-w-md rounded-2xl border border-edge bg-card shadow-card">
                <div class="flex items-center justify-between border-b border-edge px-6 py-4">
                    <h3 class="text-base font-semibold text-white">Record a Payment</h3>
                    <button wire:click="$set('showRecord', false)" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-raised"><x-lucide-x class="h-5 w-5" /></button>
                </div>
                <div class="space-y-4 px-6 py-5">
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-300">Customer email</label>
                        <input wire:model="userEmail" type="email" placeholder="customer@example.com" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                        @error('userEmail') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                    </div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Amount</label>
                            <input wire:model="amount" type="number" step="0.01" min="0" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                            @error('amount') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Method</label>
                            <select wire:model="gateway" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                                <option value="manual">Manual / Offline</option>
                                <option value="bank_transfer">Bank Transfer</option>
                                <option value="easypaisa">Easypaisa</option>
                                <option value="jazzcash">JazzCash</option>
                                <option value="binance">Binance Pay</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-300">Note</label>
                        <input wire:model="note" placeholder="Reference / memo" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                    </div>
                </div>
                <div class="flex justify-end gap-2 border-t border-edge px-6 py-4">
                    <button wire:click="$set('showRecord', false)" class="rounded-xl border border-edge bg-card px-4 py-2.5 text-sm text-slate-200 hover:bg-raised">Cancel</button>
                    <button wire:click="recordManual" class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">Record</button>
                </div>
            </div>
        </div>
    @endif

    {{-- Refund modal --}}
    @if ($refundTarget)
        <div class="fixed inset-0 z-50 grid place-items-center bg-black/60 p-4 backdrop-blur-sm" x-data @keydown.escape.window="$wire.set('refundingId', null)">
            <div class="w-full max-w-sm rounded-2xl border border-edge bg-card shadow-card">
                <div class="flex items-center justify-between border-b border-edge px-6 py-4">
                    <h3 class="text-base font-semibold text-white">Refund Payment</h3>
                    <button wire:click="$set('refundingId', null)" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-raised"><x-lucide-x class="h-5 w-5" /></button>
                </div>
                <div class="space-y-4 px-6 py-5">
                    <p class="text-sm text-slate-400">{{ $refundTarget->user?->name }} · paid {{ $fmt($refundTarget->amount) }} via {{ ucfirst(str_replace('_', ' ', $refundTarget->gateway)) }}</p>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-300">Refund amount</label>
                        <input wire:model="refundAmount" type="number" step="0.01" min="0.01" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                        @error('refundAmount') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-300">Reason</label>
                        <input wire:model="refundReason" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                    </div>
                    <p class="text-xs text-slate-500">Gateways without a live driver record the refund; the customer is refunded out-of-band.</p>
                </div>
                <div class="flex justify-end gap-2 border-t border-edge px-6 py-4">
                    <button wire:click="$set('refundingId', null)" class="rounded-xl border border-edge bg-card px-4 py-2.5 text-sm text-slate-200 hover:bg-raised">Cancel</button>
                    <button wire:click="refund" class="rounded-xl bg-red-500 px-4 py-2.5 text-sm font-semibold text-white hover:bg-red-600">Refund</button>
                </div>
            </div>
        </div>
    @endif
</div>