@php
    $fmt = fn ($v) => '$'.number_format((float) $v, 2);
    $chip = [
        'trial' => 'bg-blue-500/15 text-blue-400',
        'active' => 'bg-green-500/15 text-green-400',
        'renewing' => 'bg-brand/15 text-brand-500',
        'grace' => 'bg-amber-500/15 text-amber-400',
        'suspended' => 'bg-yellow-500/15 text-yellow-400',
        'expired' => 'bg-slate-500/15 text-slate-400',
        'cancelled' => 'bg-red-500/15 text-red-400',
        'deleted' => 'bg-slate-600/20 text-slate-500',
        'past_due' => 'bg-amber-500/15 text-amber-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">Subscriptions</span>
    </nav>
    <x-admin.page-head title="Subscriptions" subtitle="Manage customer subscriptions and their lifecycle." />

    <div class="grid gap-4 sm:grid-cols-3 xl:grid-cols-5">
        <x-admin.stat icon="check-circle" label="Active" :value="number_format($stats['active'])" tint="#22c55e" />
        <x-admin.stat icon="gift" label="Trials" :value="number_format($stats['trials'])" tint="#3b82f6" />
        <x-admin.stat icon="alarm-clock" label="Grace" :value="number_format($stats['grace'])" tint="#f59e0b" />
        <x-admin.stat icon="x-circle" label="Cancelled" :value="number_format($stats['cancelled'])" tint="#ef4444" />
        <x-admin.stat icon="refresh-ccw" label="Renewals due" :value="number_format($stats['renewals_due'])" tint="#7c3aed" />
    </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 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 (['trial', 'active', 'renewing', 'grace', 'suspended', 'expired', 'cancelled'] 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">Plan</th>
                        <th class="px-3 py-2.5">Cycle</th>
                        <th class="px-3 py-2.5">Status</th>
                        <th class="px-3 py-2.5">Renews / Ends</th>
                        <th class="px-3 py-2.5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($subscriptions as $s)
                        <tr class="border-b border-edge/60 hover:bg-raised/50">
                            <td class="px-3 py-3">
                                <div class="text-slate-200">{{ $s->user?->name ?? '—' }}</div>
                                <div class="text-xs text-slate-500">{{ $s->user?->email }}</div>
                            </td>
                            <td class="px-3 py-3 text-slate-200">{{ $s->plan?->name ?? '—' }} <span class="text-xs text-slate-500">{{ $fmt($s->amount) }}</span></td>
                            <td class="px-3 py-3 text-slate-400">{{ ucfirst($s->billing_cycle) }}</td>
                            <td class="px-3 py-3">
                                <span class="admin-chip {{ $chip[$s->status] ?? 'bg-slate-500/15 text-slate-400' }}">{{ $s->status }}</span>
                                @if ($s->onGrace())<div class="mt-0.5 text-xs text-amber-400">{{ $s->graceRemainingDays() }}d grace</div>@endif
                            </td>
                            <td class="px-3 py-3 text-slate-400">
                                @php($end = $s->accessEndsAt())
                                {{ $end ? $end->format('M j, Y') : 'Lifetime' }}
                                @if ($end && $s->remainingDays() !== null)<div class="text-xs text-slate-500">{{ $s->remainingDays() }} days left</div>@endif
                            </td>
                            <td class="px-3 py-3">
                                <div class="flex items-center justify-end" x-data="{ open: false }">
                                    <div class="relative">
                                        <button @click="open=!open" class="inline-flex items-center gap-1 rounded-lg border border-edge bg-raised px-2.5 py-1.5 text-xs text-slate-200 hover:bg-card">Manage <x-lucide-chevron-down class="h-3.5 w-3.5" /></button>
                                        <div x-show="open" @click.outside="open=false" x-cloak x-transition class="absolute right-0 top-[calc(100%+4px)] z-20 w-48 rounded-xl border border-edge bg-card p-1.5 shadow-card">
                                            <button wire:click="renew({{ $s->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-refresh-ccw class="h-4 w-4" /> Renew</button>
                                            <button wire:click="openChange({{ $s->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-arrow-left-right class="h-4 w-4" /> Change plan</button>
                                            <button wire:click="openExtend({{ $s->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-calendar-plus class="h-4 w-4" /> Extend days</button>
                                            <button wire:click="startGrace({{ $s->id }})" @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-amber-400 hover:bg-raised"><x-lucide-alarm-clock class="h-4 w-4" /> Start grace</button>
                                            @if ($s->status === 'suspended')
                                                <button wire:click="resume({{ $s->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-play class="h-4 w-4" /> Resume</button>
                                            @else
                                                <button wire:click="suspend({{ $s->id }})" @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-yellow-400 hover:bg-raised"><x-lucide-pause class="h-4 w-4" /> Suspend</button>
                                            @endif
                                            <button wire:click="cancel({{ $s->id }})" wire:confirm="Cancel this subscription?" @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-x-circle class="h-4 w-4" /> Cancel</button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-3 py-10 text-center text-slate-500">No subscriptions found.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $subscriptions->links('pagination.dark') }}</div>
    </x-admin.card>

    {{-- Extend modal --}}
    @if ($extendingId)
        <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('extendingId', 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">Extend Subscription</h3>
                    <button wire:click="$set('extendingId', 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="px-6 py-5">
                    <label class="mb-1 block text-xs font-medium text-slate-300">Extra days</label>
                    <input type="number" min="1" wire:model="extendDays" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                    @error('extendDays') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                    <div class="mt-2 flex gap-2">
                        @foreach ([7, 14, 30, 90] as $d)<button type="button" wire:click="$set('extendDays', {{ $d }})" class="rounded-lg border border-edge bg-raised px-2.5 py-1 text-xs text-slate-300 hover:bg-card">+{{ $d }}</button>@endforeach
                    </div>
                </div>
                <div class="flex justify-end gap-2 border-t border-edge px-6 py-4">
                    <button wire:click="$set('extendingId', 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="extend" class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">Extend</button>
                </div>
            </div>
        </div>
    @endif

    {{-- Change plan modal --}}
    @if ($changingId)
        <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('changingId', 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">Change Plan</h3>
                    <button wire:click="$set('changingId', 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">
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-300">Plan</label>
                        <select wire:model="newPlanId" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                            @foreach ($plans as $p)<option value="{{ $p->id }}">{{ $p->name }}</option>@endforeach
                        </select>
                        @error('newPlanId') <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">Billing cycle</label>
                        <select wire:model="newCycle" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                            <option value="monthly">Monthly</option><option value="quarterly">Quarterly</option><option value="semiannual">6 Months</option><option value="yearly">Yearly</option><option value="lifetime">Lifetime</option>
                        </select>
                    </div>
                </div>
                <div class="flex justify-end gap-2 border-t border-edge px-6 py-4">
                    <button wire:click="$set('changingId', 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="changePlan" class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">Change Plan</button>
                </div>
            </div>
        </div>
    @endif
</div>