@php
    $val = fn ($c) => $c->type === 'percentage' ? rtrim(rtrim(number_format($c->value, 2), '0'), '.').'%' : '$'.number_format($c->value, 2);
@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">Coupons</span>
    </nav>
    <x-admin.page-head title="Coupons" subtitle="Discount codes for checkout and renewals.">
        <button wire:click="create" 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" /> New Coupon</button>
    </x-admin.page-head>

    <div class="grid gap-4 sm:grid-cols-3">
        <x-admin.stat icon="ticket" label="Total Coupons" :value="number_format($stats['total'])" tint="#7c3aed" />
        <x-admin.stat icon="check-circle" label="Active" :value="number_format($stats['active'])" tint="#22c55e" />
        <x-admin.stat icon="badge-check" label="Redemptions" :value="number_format($stats['redemptions'])" tint="#3b82f6" />
    </div>

    <x-admin.card class="mt-5">
        <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">Code</th>
                        <th class="px-3 py-2.5">Discount</th>
                        <th class="px-3 py-2.5">Usage</th>
                        <th class="px-3 py-2.5">Valid until</th>
                        <th class="px-3 py-2.5">Active</th>
                        <th class="px-3 py-2.5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($coupons as $c)
                        <tr class="border-b border-edge/60 hover:bg-raised/50">
                            <td class="px-3 py-3">
                                <div class="font-mono font-semibold text-white">{{ $c->code }}</div>
                                @if ($c->description)<div class="text-xs text-slate-500">{{ $c->description }}</div>@endif
                            </td>
                            <td class="px-3 py-3"><span class="admin-chip bg-brand/15 text-brand-500">{{ $val($c) }}</span> <span class="text-xs text-slate-500">{{ $c->duration }}</span></td>
                            <td class="px-3 py-3 text-slate-300">{{ $c->redeemed_count }}{{ $c->max_redemptions ? ' / '.$c->max_redemptions : '' }}</td>
                            <td class="px-3 py-3 text-slate-400">{{ optional($c->expires_at)->format('M j, Y') ?? 'No expiry' }}</td>
                            <td class="px-3 py-3">
                                <button wire:click="toggle({{ $c->id }})" class="relative inline-flex items-center">
                                    <span class="h-5 w-9 rounded-full transition-colors {{ $c->is_active ? 'bg-brand' : 'bg-edge' }}"></span>
                                    <span class="absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white transition-transform {{ $c->is_active ? 'translate-x-4' : '' }}"></span>
                                </button>
                            </td>
                            <td class="px-3 py-3">
                                <div class="flex items-center justify-end gap-1">
                                    <button wire:click="edit({{ $c->id }})" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-raised hover:text-white"><x-lucide-pencil class="h-4 w-4" /></button>
                                    <button wire:click="deleteCoupon({{ $c->id }})" wire:confirm="Delete {{ $c->code }}?" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-rose-500/10 hover:text-rose-400"><x-lucide-trash-2 class="h-4 w-4" /></button>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="6" class="px-3 py-10 text-center text-slate-500">No coupons yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $coupons->links('pagination.dark') }}</div>
    </x-admin.card>

    @if ($editingId !== null)
        <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('editingId', null)">
            <div class="mx-auto my-6 w-full max-w-lg 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">{{ $editingId ? 'Edit Coupon' : 'New Coupon' }}</h3>
                    <button wire:click="$set('editingId', 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 class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Code</label>
                            <input wire:model="code" placeholder="SAVE25" class="w-full rounded-xl border-edge bg-raised font-mono text-sm uppercase text-white focus:border-brand focus:ring-brand/30">
                            @error('code') <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">Duration</label>
                            <select wire:model="duration" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                                <option value="once">Once</option><option value="forever">Forever</option><option value="repeating">Repeating</option>
                            </select>
                        </div>
                    </div>
                    <div>
                        <label class="mb-1 block text-xs font-medium text-slate-300">Description</label>
                        <input wire:model="description" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                    </div>
                    <div class="grid gap-4 sm:grid-cols-3">
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Type</label>
                            <select wire:model="type" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                                <option value="percentage">Percentage</option><option value="fixed">Fixed amount</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Value</label>
                            <input type="number" step="0.01" min="0" wire:model="value" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                            @error('value') <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">Min spend</label>
                            <input type="number" step="0.01" min="0" wire:model="min_amount" placeholder="—" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                        </div>
                    </div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Max redemptions</label>
                            <input type="number" min="1" wire:model="max_redemptions" placeholder="Unlimited" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Per-user limit</label>
                            <input type="number" min="1" wire:model="per_user_limit" placeholder="Unlimited" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                        </div>
                    </div>
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Starts</label>
                            <input type="date" wire:model="starts_at" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Expires</label>
                            <input type="date" wire:model="expires_at" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                            @error('expires_at') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                        </div>
                    </div>
                    <label class="flex items-center gap-2 text-sm text-slate-200"><input type="checkbox" wire:model="is_active" class="rounded border-edge bg-raised text-brand focus:ring-brand/30"> Active</label>
                </div>
                <div class="flex justify-end gap-2 border-t border-edge px-6 py-4">
                    <button wire:click="$set('editingId', 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="save" class="rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700">Save Coupon</button>
                </div>
            </div>
        </div>
    @endif
</div>