@php
    $cycleLabel = fn ($i) => match ($i) {
        'monthly' => '/month',
        'quarterly' => '/quarter',
        'yearly' => '/year',
        'lifetime' => 'one-time',
        default => '/'.$i,
    };
    $fmtLimit = fn ($v) => is_null($v) ? 'Unlimited' : number_format($v);
@endphp

<div>
    {{-- breadcrumb --}}
    <nav class="mb-2 flex items-center gap-1.5 text-xs text-slate-500">
        <a href="{{ route('admin.dashboard') }}" wire:navigate class="hover:text-slate-300">Dashboard</a><x-lucide-chevron-right class="h-3.5 w-3.5" />
        <span class="hover:text-slate-300">Plans &amp; Billing</span><x-lucide-chevron-right class="h-3.5 w-3.5" />
        <span class="text-slate-300">Pricing Packages</span>
    </nav>

    <x-admin.page-head title="Pricing Packages" subtitle="Create and manage subscription plans and pricing packages.">
        <a href="{{ route('admin.settings') }}" wire:navigate class="inline-flex items-center gap-2 rounded-xl border border-edge bg-card px-3.5 py-2.5 text-sm text-slate-200 hover:bg-raised">
            <x-lucide-settings-2 class="h-4 w-4" /> Package Settings
        </a>
        <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" /> Create New Package
        </button>
    </x-admin.page-head>

    @if ($plans->isEmpty())
        <div class="admin-card grid place-items-center px-6 py-16 text-center">
            <span class="grid h-14 w-14 place-items-center rounded-2xl bg-raised text-slate-400"><x-lucide-package class="h-7 w-7" /></span>
            <h3 class="mt-4 text-base font-semibold text-white">No packages yet</h3>
            <p class="mt-1 max-w-sm text-sm text-slate-400">Create your first pricing package to start offering subscriptions to your customers.</p>
            <button wire:click="create" class="mt-5 inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2.5 text-sm font-semibold text-white hover:bg-brand-700"><x-lucide-plus class="h-4 w-4" /> Create New Package</button>
        </div>
    @else
        <div
            x-data="{
                dragId: null,
                start(e, id) { this.dragId = id; e.dataTransfer.effectAllowed = 'move'; e.currentTarget.classList.add('opacity-50'); },
                end(e) { e.currentTarget.classList.remove('opacity-50'); },
                drop(e, id) {
                    if (this.dragId === null || this.dragId === id) return;
                    const order = [...this.$el.querySelectorAll('[data-plan]')].map(n => +n.dataset.plan);
                    const from = order.indexOf(this.dragId);
                    const to = order.indexOf(id);
                    order.splice(to, 0, order.splice(from, 1)[0]);
                    this.dragId = null;
                    $wire.reorder(order);
                },
            }"
            class="grid items-stretch gap-5 sm:grid-cols-2 xl:grid-cols-3"
        >
            @foreach ($plans as $plan)
                @php($nl = $plan->normalizedLimits())
                @php($features = collect($plan->features ?? [])->filter(fn ($f) => trim((string) $f) !== '')->values())
                <div
                    data-plan="{{ $plan->id }}"
                    draggable="true"
                    @dragstart="start($event, {{ $plan->id }})"
                    @dragend="end($event)"
                    @dragover.prevent
                    @drop.prevent="drop($event, {{ $plan->id }})"
                    class="group relative flex cursor-grab flex-col rounded-2xl border bg-card p-6 shadow-card transition active:cursor-grabbing {{ $plan->is_popular ? 'border-brand ring-1 ring-brand/40 xl:-my-1' : 'border-edge' }}"
                >
                    @if ($plan->is_popular)
                        <span class="absolute -top-3 left-1/2 inline-flex -translate-x-1/2 items-center gap-1 rounded-full bg-gradient-to-r from-brand-500 to-accent2 px-3 py-1 text-[11px] font-bold uppercase tracking-wide text-white shadow-lg shadow-brand/30">
                            <x-lucide-star class="h-3 w-3 fill-current" /> Most Popular
                        </span>
                    @endif

                    <div class="flex items-start justify-between">
                        <span class="grid h-12 w-12 place-items-center rounded-full" style="background: {{ $plan->color }}22; color: {{ $plan->color }}">
                            <x-dynamic-component :component="'lucide-'.($plan->icon ?: 'crown')" class="h-6 w-6" />
                        </span>
                        <span class="admin-chip {{ $plan->isCloud() ? 'bg-blue-500/15 text-blue-400' : 'bg-brand/15 text-brand-500' }}">
                            <x-dynamic-component :component="'lucide-'.($plan->isCloud() ? 'cloud' : 'monitor')" class="h-3 w-3" /> {{ $plan->productLabel() }}
                        </span>
                        <div class="flex items-center gap-1 opacity-0 transition group-hover:opacity-100">
                            <button wire:click="duplicate({{ $plan->id }})" title="Duplicate" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-raised hover:text-slate-200"><x-lucide-copy class="h-4 w-4" /></button>
                            @if ($plan->subscriptions_count === 0)
                                <button wire:click="deletePlan({{ $plan->id }})" wire:confirm="Delete {{ $plan->name }}? This cannot be undone." title="Delete" 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>
                            @endif
                        </div>
                    </div>

                    <h3 class="mt-4 text-lg font-bold" style="color: {{ $plan->color }}">{{ $plan->name }}</h3>
                    <p class="mt-1 min-h-[2.5rem] text-sm text-slate-400">{{ $plan->description ?: 'No description provided.' }}</p>

                    <div class="mt-3 flex items-baseline gap-1">
                        <span class="text-3xl font-extrabold text-white">{{ $plan->currency === 'USD' ? '$' : '' }}{{ number_format($plan->price, 2) }}</span>
                        <span class="text-sm text-slate-500">{{ $plan->currency !== 'USD' ? $plan->currency.' ' : '' }}{{ $cycleLabel($plan->interval) }}</span>
                    </div>
                    @if ($plan->trial_days > 0)
                        <div class="mt-1.5 inline-flex w-fit items-center gap-1 rounded-full bg-emerald-500/10 px-2 py-0.5 text-[11px] font-medium text-emerald-400"><x-lucide-gift class="h-3 w-3" /> {{ $plan->trial_days }}-day free trial</div>
                    @endif

                    <div class="my-4 border-t border-edge"></div>

                    <ul class="flex-1 space-y-2.5 text-sm">
                        @forelse ($features as $feature)
                            <li class="flex items-start gap-2.5 text-slate-300">
                                <x-lucide-check class="mt-0.5 h-4 w-4 shrink-0" style="color: {{ $plan->color }}" />
                                <span>{{ $feature }}</span>
                            </li>
                        @empty
                            <li class="flex items-center gap-2.5 text-slate-300"><x-lucide-check class="h-4 w-4 shrink-0" style="color: {{ $plan->color }}" /> TikTok accounts: <strong class="text-white">{{ $fmtLimit($nl['accounts']['tiktok']) }}</strong></li>
                            <li class="flex items-center gap-2.5 text-slate-300"><x-lucide-check class="h-4 w-4 shrink-0" style="color: {{ $plan->color }}" /> Facebook pages: <strong class="text-white">{{ $fmtLimit($nl['accounts']['facebook']) }}</strong></li>
                            <li class="flex items-center gap-2.5 text-slate-300"><x-lucide-check class="h-4 w-4 shrink-0" style="color: {{ $plan->color }}" /> Posts / day: <strong class="text-white">{{ $fmtLimit($nl['quotas']['posts_per_day']) }}</strong></li>
                            <li class="flex items-center gap-2.5 text-slate-300"><x-lucide-check class="h-4 w-4 shrink-0" style="color: {{ $plan->color }}" /> Scheduled posts: <strong class="text-white">{{ $fmtLimit($nl['quotas']['max_scheduled']) }}</strong></li>
                        @endforelse
                    </ul>

                    <button wire:click="edit({{ $plan->id }})" class="mt-5 inline-flex w-full items-center justify-center gap-2 rounded-xl border border-edge bg-raised/50 px-4 py-2.5 text-sm font-semibold text-slate-200 transition hover:bg-raised">
                        <x-lucide-pencil class="h-4 w-4" /> Edit Package
                    </button>

                    <div class="mt-4 flex items-center justify-between border-t border-edge pt-3">
                        <span class="flex items-center gap-2 text-xs">
                            <span class="h-2 w-2 rounded-full {{ $plan->is_active ? 'bg-emerald-400' : 'bg-slate-600' }}"></span>
                            <span class="{{ $plan->is_active ? 'text-emerald-400' : 'text-slate-500' }}">{{ $plan->is_active ? 'Active' : 'Inactive' }}</span>
                            <span class="text-slate-600">·</span>
                            <span class="text-slate-500">{{ $plan->subscriptions_count }} {{ Str::plural('subscriber', $plan->subscriptions_count) }}</span>
                        </span>
                        <label class="relative inline-flex cursor-pointer items-center">
                            <input type="checkbox" wire:click="toggle({{ $plan->id }})" @checked($plan->is_active) class="peer sr-only">
                            <span class="h-5 w-9 rounded-full bg-edge transition-colors peer-checked:bg-brand"></span>
                            <span class="pointer-events-none absolute left-0.5 top-0.5 h-4 w-4 rounded-full bg-white shadow transition-transform peer-checked:translate-x-4"></span>
                        </label>
                    </div>
                </div>
            @endforeach
        </div>

        <p class="mt-4 flex items-center justify-center gap-1.5 text-xs text-slate-500">
            <x-lucide-grip-vertical class="h-3.5 w-3.5" /> Drag any package card to reorder how packages are displayed to customers.
        </p>
    @endif

    {{-- Create / edit modal --}}
    @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-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">{{ $editingId ? 'Edit Package' : 'Create New Package' }}</h3>
                        <p class="text-xs text-slate-400">Configure pricing, limits and the features shown to customers.</p>
                    </div>
                    <button wire:click="$set('editingId', 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 class="max-h-[70vh] space-y-5 overflow-y-auto px-6 py-5">
                    {{-- Product edition --}}
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-300">Product</label>
                        <div class="grid grid-cols-2 gap-2">
                            @foreach (['cloud' => ['cloud', 'Web Cloud', 'Runs fully on our servers'], 'desktop' => ['monitor', 'Desktop', "Runs on the customer's PC or VPS"]] as $key => [$ic, $label, $sub])
                                <button type="button" wire:click="$set('product', '{{ $key }}')"
                                        class="flex items-center gap-3 rounded-xl border-2 p-3 text-left transition {{ $product === $key ? 'border-brand bg-brand/10' : 'border-edge hover:border-slate-600' }}">
                                    <x-dynamic-component :component="'lucide-'.$ic" class="h-5 w-5 {{ $product === $key ? 'text-brand-500' : 'text-slate-400' }}" />
                                    <span><span class="block text-sm font-semibold text-white">{{ $label }}</span><span class="block text-[11px] text-slate-500">{{ $sub }}</span></span>
                                </button>
                            @endforeach
                        </div>
                        @error('product') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                    </div>

                    {{-- Basics --}}
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div class="sm:col-span-2">
                            <label class="mb-1 block text-xs font-medium text-slate-300">Package name</label>
                            <input wire:model="name" placeholder="e.g. Professional" class="w-full rounded-xl border-edge bg-raised text-sm text-white placeholder:text-slate-500 focus:border-brand focus:ring-brand/30">
                            @error('name') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2">
                            <label class="mb-1 block text-xs font-medium text-slate-300">Short description</label>
                            <input wire:model="description" placeholder="One line shown under the package name" class="w-full rounded-xl border-edge bg-raised text-sm text-white placeholder:text-slate-500 focus:border-brand focus:ring-brand/30">
                            @error('description') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                        </div>
                    </div>

                    {{-- Pricing --}}
                    <div class="grid gap-4 sm:grid-cols-4">
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Price</label>
                            <input type="number" step="0.01" min="0" wire:model="price" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                            @error('price') <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">Currency</label>
                            <select wire:model="currency" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                                @foreach (['USD', 'EUR', 'GBP', 'PKR', 'AED', 'INR'] as $c)
                                    <option value="{{ $c }}">{{ $c }}</option>
                                @endforeach
                            </select>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Billing cycle</label>
                            <select wire:model="interval" 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="yearly">Yearly</option>
                                <option value="lifetime">Lifetime</option>
                            </select>
                        </div>
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Trial days</label>
                            <input type="number" min="0" max="365" wire:model="trial_days" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                            @error('trial_days') <p class="mt-1 text-xs text-rose-400">{{ $message }}</p> @enderror
                        </div>
                        <div class="sm:col-span-2 grid grid-cols-2 gap-4">
                            <div>
                                <label class="mb-1 block text-xs font-medium text-slate-300">Monthly price <span class="font-normal text-slate-500">(customer cycle)</span></label>
                                <input type="number" step="0.01" min="0" wire:model="price_monthly" placeholder="—" class="w-full rounded-xl border-edge bg-raised text-sm text-white placeholder:text-slate-600 focus:border-brand focus:ring-brand/30">
                            </div>
                            <div>
                                <label class="mb-1 block text-xs font-medium text-slate-300">Yearly price <span class="font-normal text-slate-500">(customer cycle)</span></label>
                                <input type="number" step="0.01" min="0" wire:model="price_yearly" placeholder="—" class="w-full rounded-xl border-edge bg-raised text-sm text-white placeholder:text-slate-600 focus:border-brand focus:ring-brand/30">
                            </div>
                        </div>
                    </div>

                    {{-- Appearance --}}
                    <div class="grid gap-4 sm:grid-cols-2">
                        <div>
                            <label class="mb-1.5 block text-xs font-medium text-slate-300">Accent color</label>
                            <div class="flex flex-wrap gap-2">
                                @foreach (\App\Livewire\Admin\Plans\Index::COLOR_PRESETS as $c)
                                    <button type="button" wire:click="$set('color', '{{ $c }}')" class="h-8 w-8 rounded-full ring-2 ring-offset-2 ring-offset-card transition {{ $color === $c ? 'ring-white' : 'ring-transparent' }}" style="background: {{ $c }}"></button>
                                @endforeach
                            </div>
                        </div>
                        <div>
                            <label class="mb-1.5 block text-xs font-medium text-slate-300">Icon</label>
                            <div class="flex flex-wrap gap-2">
                                @foreach (\App\Livewire\Admin\Plans\Index::ICON_PRESETS as $ic)
                                    <button type="button" wire:click="$set('icon', '{{ $ic }}')" class="grid h-8 w-8 place-items-center rounded-lg border transition {{ $icon === $ic ? 'border-brand bg-brand/15 text-white' : 'border-edge bg-raised text-slate-400 hover:text-slate-200' }}">
                                        <x-dynamic-component :component="'lucide-'.$ic" class="h-4 w-4" />
                                    </button>
                                @endforeach
                            </div>
                        </div>
                    </div>

                    {{-- Features --}}
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-300">Feature list <span class="font-normal text-slate-500">(shown on the package card)</span></label>
                        <div class="flex gap-2">
                            <input wire:model="featureInput" wire:keydown.enter.prevent="addFeature" placeholder="e.g. Unlimited scheduled posts" class="w-full rounded-xl border-edge bg-raised text-sm text-white placeholder:text-slate-500 focus:border-brand focus:ring-brand/30">
                            <button wire:click="addFeature" type="button" class="shrink-0 rounded-xl border border-edge bg-raised px-3 text-sm font-medium text-slate-200 hover:bg-card"><x-lucide-plus class="h-4 w-4" /></button>
                        </div>
                        @if (count($features))
                            <ul class="mt-2 space-y-1.5">
                                @foreach ($features as $i => $f)
                                    <li class="flex items-center justify-between rounded-lg border border-edge bg-raised/50 px-3 py-1.5 text-sm text-slate-200">
                                        <span class="flex items-center gap-2"><x-lucide-check class="h-3.5 w-3.5 text-brand-500" /> {{ $f }}</span>
                                        <button wire:click="removeFeature({{ $i }})" type="button" class="text-slate-500 hover:text-rose-400"><x-lucide-x class="h-3.5 w-3.5" /></button>
                                    </li>
                                @endforeach
                            </ul>
                        @else
                            <p class="mt-1.5 text-xs text-slate-500">No custom features added — the card will list package limits automatically.</p>
                        @endif
                    </div>

                    {{-- Limits --}}
                    <div class="rounded-xl border border-edge bg-ink/40 p-4">
                        <div class="text-xs font-semibold text-slate-300">Account limits <span class="font-normal text-slate-500">(blank = unlimited)</span></div>
                        <div class="mt-2.5 grid grid-cols-2 gap-3 sm:grid-cols-4">
                            @foreach (\App\Support\PlanLimits::PLATFORMS as $key)
                                <label class="block text-xs text-slate-400">{{ $key === 'x' ? 'X (Twitter)' : ucfirst($key) }}
                                    <input type="number" min="0" wire:model="lim.accounts.{{ $key }}" placeholder="∞" class="mt-1 w-full rounded-lg border-edge bg-raised text-sm text-white placeholder:text-slate-600 focus:border-brand focus:ring-brand/30">
                                </label>
                            @endforeach
                        </div>
                        <div class="mt-4 text-xs font-semibold text-slate-300">{{ $product === 'cloud' ? 'Web Cloud' : 'Desktop' }} limits <span class="font-normal text-slate-500">(blank = unlimited)</span></div>
                        <div class="mt-2.5 grid grid-cols-2 gap-3 sm:grid-cols-4">
                            @foreach (\App\Support\PlanLimits::quotaKeys($product) as $key)
                                <label class="block text-xs text-slate-400">{{ \App\Support\PlanLimits::QUOTA_LABELS[$key] ?? $key }}
                                    <input type="number" min="0" wire:model="lim.quotas.{{ $key }}" placeholder="∞" class="mt-1 w-full rounded-lg border-edge bg-raised text-sm text-white placeholder:text-slate-600 focus:border-brand focus:ring-brand/30">
                                </label>
                            @endforeach
                        </div>
                        <div class="mt-4 text-xs font-semibold text-slate-300">Feature flags</div>
                        <div class="mt-2.5 grid grid-cols-2 gap-2 sm:grid-cols-3">
                            @foreach (\App\Support\PlanFeatures::FLAGS as $key => $label)
                                <label class="flex cursor-pointer items-center gap-2 rounded-lg border border-edge bg-raised/50 px-2.5 py-2 text-xs text-slate-300 hover:border-slate-600">
                                    <input type="checkbox" wire:model="flags.{{ $key }}" class="h-3.5 w-3.5 rounded border-edge bg-ink text-brand focus:ring-brand/40">
                                    {{ $label }}
                                </label>
                            @endforeach
                        </div>
                    </div>

                    {{-- Flags --}}
                    <div class="grid gap-3 sm:grid-cols-3">
                        <div>
                            <label class="mb-1 block text-xs font-medium text-slate-300">Display order</label>
                            <input type="number" min="0" wire:model="sort_order" class="w-full rounded-xl border-edge bg-raised text-sm text-white focus:border-brand focus:ring-brand/30">
                        </div>
                        <label class="flex items-center justify-between rounded-xl border border-edge bg-raised/50 px-3">
                            <span class="text-sm text-slate-200">Most popular</span>
                            <input type="checkbox" wire:model="is_popular" class="rounded border-edge bg-raised text-brand focus:ring-brand/30">
                        </label>
                        <label class="flex items-center justify-between rounded-xl border border-edge bg-raised/50 px-3">
                            <span class="text-sm text-slate-200">Active</span>
                            <input type="checkbox" wire:model="is_active" class="rounded border-edge bg-raised text-brand focus:ring-brand/30">
                        </label>
                    </div>
                </div>

                <div class="flex items-center 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 font-medium text-slate-200 hover:bg-raised">Cancel</button>
                    <button wire:click="save" 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-check class="h-4 w-4" /> {{ $editingId ? 'Save Changes' : 'Create Package' }}
                    </button>
                </div>
            </div>
        </div>
    @endif
</div>