@php
    $fmt = fn ($v) => '$'.number_format((float) $v, 2);
    $statusChip = [
        'paid' => 'bg-green-500/15 text-green-400',
        'open' => 'bg-amber-500/15 text-amber-400',
        'draft' => 'bg-slate-500/15 text-slate-400',
        'void' => 'bg-slate-600/20 text-slate-500',
        'refunded' => 'bg-indigo-500/15 text-indigo-300',
        'partially_refunded' => 'bg-indigo-500/15 text-indigo-300',
        'uncollectible' => '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">Invoices</span>
    </nav>
    <x-admin.page-head title="Invoices" subtitle="Every invoice raised — download, email or settle." />

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-admin.stat icon="receipt" label="Total Invoices" :value="number_format($stats['count'])" tint="#7c3aed" />
        <x-admin.stat icon="check-circle" label="Paid" :value="$fmt($stats['paid'])" tint="#22c55e" />
        <x-admin.stat icon="hourglass" label="Outstanding" :value="$fmt($stats['outstanding'])" tint="#f59e0b" />
        <x-admin.stat icon="alarm-clock" label="Overdue" :value="number_format($stats['overdue'])" tint="#ef4444" />
    </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 invoice # 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 (['open', 'paid', 'draft', 'void', 'refunded', 'partially_refunded', 'uncollectible'] 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">Invoice</th>
                        <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">Status</th>
                        <th class="px-3 py-2.5">Issued</th>
                        <th class="px-3 py-2.5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($invoices as $inv)
                        <tr class="border-b border-edge/60 hover:bg-raised/50">
                            <td class="px-3 py-3"><button wire:click="view({{ $inv->id }})" class="font-medium text-brand-500 hover:underline">{{ $inv->invoice_number }}</button></td>
                            <td class="px-3 py-3">
                                <div class="text-slate-200">{{ $inv->user?->name ?? '—' }}</div>
                                <div class="text-xs text-slate-500">{{ $inv->user?->email }}</div>
                            </td>
                            <td class="px-3 py-3 text-right font-semibold text-white">{{ $fmt($inv->total) }}</td>
                            <td class="px-3 py-3"><span class="admin-chip {{ $statusChip[$inv->status] ?? 'bg-slate-500/15 text-slate-400' }}">{{ str_replace('_', ' ', $inv->status) }}</span></td>
                            <td class="px-3 py-3 text-slate-400">{{ optional($inv->issued_at)->format('M j, Y') ?? '—' }}</td>
                            <td class="px-3 py-3">
                                <div class="flex items-center justify-end gap-1" x-data="{ open: false }">
                                    <a href="{{ route('admin.invoices.download', $inv) }}" target="_blank" title="Download PDF" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-raised hover:text-white"><x-lucide-download class="h-4 w-4" /></a>
                                    <div class="relative">
                                        <button @click="open=!open" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-raised hover:text-white"><x-lucide-more-vertical class="h-4 w-4" /></button>
                                        <div x-show="open" @click.outside="open=false" x-cloak x-transition class="absolute right-0 top-[calc(100%+4px)] z-20 w-44 rounded-xl border border-edge bg-card p-1.5 shadow-card">
                                            <button wire:click="view({{ $inv->id }})" @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-200 hover:bg-raised"><x-lucide-eye class="h-4 w-4" /> View</button>
                                            <button wire:click="email({{ $inv->id }})" @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-200 hover:bg-raised"><x-lucide-mail class="h-4 w-4" /> Email invoice</button>
                                            @unless ($inv->isPaid())
                                                <button wire:click="markPaid({{ $inv->id }})" @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-green-400 hover:bg-raised"><x-lucide-check class="h-4 w-4" /> Mark paid</button>
                                                <button wire:click="void({{ $inv->id }})" wire:confirm="Void {{ $inv->invoice_number }}?" @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-400 hover:bg-raised"><x-lucide-ban class="h-4 w-4" /> Void</button>
                                            @endunless
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-3 py-10 text-center text-slate-500">No invoices found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>

        <div class="mt-4">{{ $invoices->links('pagination.dark') }}</div>
    </x-admin.card>

    {{-- View modal --}}
    @if ($viewing)
        <div class="fixed inset-0 z-50 overflow-y-auto bg-black/60 p-4 backdrop-blur-sm" x-data @keydown.escape.window="$wire.set('viewingId', null)">
            <div class="mx-auto my-6 w-full max-w-2xl rounded-2xl border border-edge bg-card shadow-card">
                <div class="flex items-center justify-between border-b border-edge px-6 py-4">
                    <div>
                        <h3 class="text-base font-semibold text-white">{{ $viewing->invoice_number }}</h3>
                        <p class="text-xs text-slate-400">{{ $viewing->user?->name }} · {{ $viewing->user?->email }}</p>
                    </div>
                    <div class="flex items-center gap-2">
                        <a href="{{ route('admin.invoices.download', $viewing) }}" target="_blank" class="inline-flex items-center gap-1.5 rounded-lg border border-edge bg-raised px-3 py-2 text-xs text-slate-200 hover:bg-card"><x-lucide-download class="h-3.5 w-3.5" /> PDF</a>
                        <button wire:click="$set('viewingId', null)" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-raised hover:text-slate-200"><x-lucide-x class="h-5 w-5" /></button>
                    </div>
                </div>
                <div class="px-6 py-5">
                    <div class="mb-4 grid grid-cols-3 gap-3 text-sm">
                        <div><div class="text-xs text-slate-500">Status</div><div class="text-slate-200">{{ str_replace('_', ' ', $viewing->status) }}</div></div>
                        <div><div class="text-xs text-slate-500">Issued</div><div class="text-slate-200">{{ optional($viewing->issued_at)->format('M j, Y') ?? '—' }}</div></div>
                        <div><div class="text-xs text-slate-500">Due</div><div class="text-slate-200">{{ optional($viewing->due_at)->format('M j, Y') ?? '—' }}</div></div>
                    </div>
                    <table class="w-full text-sm">
                        <thead><tr class="border-b border-edge text-left text-xs uppercase text-slate-500"><th class="py-2">Item</th><th class="py-2 text-right">Qty</th><th class="py-2 text-right">Amount</th></tr></thead>
                        <tbody>
                            @foreach ($viewing->items as $item)
                                <tr class="border-b border-edge/60"><td class="py-2.5 text-slate-200">{{ $item->description }}</td><td class="py-2.5 text-right text-slate-400">{{ $item->quantity }}</td><td class="py-2.5 text-right text-white">{{ $fmt($item->amount) }}</td></tr>
                            @endforeach
                        </tbody>
                    </table>
                    <div class="mt-4 ml-auto max-w-xs space-y-1.5 text-sm">
                        <div class="flex justify-between text-slate-400"><span>Subtotal</span><span>{{ $fmt($viewing->subtotal) }}</span></div>
                        @if ((float) $viewing->discount_total > 0)<div class="flex justify-between text-slate-400"><span>Discount</span><span>− {{ $fmt($viewing->discount_total) }}</span></div>@endif
                        @if ((float) $viewing->tax_total > 0)<div class="flex justify-between text-slate-400"><span>{{ $viewing->tax_label ?? 'Tax' }}</span><span>{{ $fmt($viewing->tax_total) }}</span></div>@endif
                        <div class="flex justify-between border-t border-edge pt-1.5 text-base font-bold text-white"><span>Total</span><span>{{ $fmt($viewing->total) }}</span></div>
                    </div>
                </div>
            </div>
        </div>
    @endif
</div>