@php
    $fmt = fn ($v) => '$'.number_format((float) $v, 2);
    $chip = [
        'pending' => 'bg-amber-500/15 text-amber-400',
        'approved' => 'bg-blue-500/15 text-blue-400',
        'processed' => 'bg-green-500/15 text-green-400',
        'rejected' => 'bg-red-500/15 text-red-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">Refunds</span>
    </nav>
    <x-admin.page-head title="Refunds" subtitle="Review and process customer refunds." />

    <div class="grid gap-4 sm:grid-cols-3">
        <x-admin.stat icon="clock" label="Pending" :value="number_format($stats['pending'])" tint="#f59e0b" />
        <x-admin.stat icon="rotate-ccw" label="Refunded" :value="$fmt($stats['processed_amount'])" tint="#ef4444" />
        <x-admin.stat icon="list" label="Total" :value="number_format($stats['count'])" tint="#7c3aed" />
    </div>

    <x-admin.card class="mt-5">
        <div class="mb-4 flex items-center justify-end">
            <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 (['pending', 'approved', 'processed', 'rejected'] as $s)<option value="{{ $s }}">{{ ucfirst($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 text-right">Amount</th>
                        <th class="px-3 py-2.5">Type</th>
                        <th class="px-3 py-2.5">Reason</th>
                        <th class="px-3 py-2.5">Status</th>
                        <th class="px-3 py-2.5">Requested</th>
                        <th class="px-3 py-2.5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($refunds as $r)
                        <tr class="border-b border-edge/60 hover:bg-raised/50">
                            <td class="px-3 py-3">
                                <div class="text-slate-200">{{ $r->user?->name ?? '—' }}</div>
                                <div class="text-xs text-slate-500">{{ $r->user?->email }}</div>
                            </td>
                            <td class="px-3 py-3 text-right font-semibold text-white">{{ $fmt($r->amount) }}</td>
                            <td class="px-3 py-3 text-slate-400">{{ ucfirst($r->type) }}</td>
                            <td class="px-3 py-3 text-slate-400">{{ $r->reason ?? '—' }}</td>
                            <td class="px-3 py-3"><span class="admin-chip {{ $chip[$r->status] ?? 'bg-slate-500/15 text-slate-400' }}">{{ $r->status }}</span></td>
                            <td class="px-3 py-3 text-slate-400">{{ $r->created_at->format('M j, Y') }}</td>
                            <td class="px-3 py-3">
                                <div class="flex items-center justify-end gap-1.5">
                                    @if ($r->status === 'pending')
                                        <button wire:click="approve({{ $r->id }})" class="rounded-lg border border-blue-500/30 bg-blue-500/10 px-2.5 py-1 text-xs text-blue-300 hover:bg-blue-500/20">Approve</button>
                                        <button wire:click="reject({{ $r->id }})" wire:confirm="Reject this refund?" class="rounded-lg border border-red-500/30 bg-red-500/10 px-2.5 py-1 text-xs text-red-300 hover:bg-red-500/20">Reject</button>
                                    @elseif ($r->status === 'approved')
                                        <button wire:click="markProcessed({{ $r->id }})" 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">Mark processed</button>
                                    @else
                                        <span class="text-xs text-slate-600">—</span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-3 py-10 text-center text-slate-500">No refunds.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $refunds->links('pagination.dark') }}</div>
    </x-admin.card>
</div>