@php
    $fmt = fn ($v) => '$'.number_format((float) $v, 2);
    $cycleLabel = ['monthly' => '/mo', 'quarterly' => '/qtr', 'semiannual' => '/6mo', 'yearly' => '/yr', 'lifetime' => ' lifetime'];
    $statusBadge = [
        'trial' => 'bg-blue-500/15 text-blue-400',
        'active' => 'bg-green-500/15 text-green-400',
        'renewing' => 'bg-brand/20 text-brand-500',
        'grace' => 'bg-amber-500/15 text-amber-400',
        'suspended' => 'bg-amber-500/15 text-amber-400',
        'expired' => 'bg-slate-500/15 text-slate-400',
        'cancelled' => 'bg-red-500/15 text-red-400',
    ];
    // Same platform colors as the dashboard (validated set).
    $platformMeta = \App\Services\UserDashboardMetrics::PLATFORM_META;
    // Edition-aware quota labels; rows not in the plan (limit 0, unused) are skipped below.
    $quotaLabels = collect(\App\Support\PlanLimits::QUOTA_LABELS)->except('max_storage_mb')->all();
    $bar = function ($used, $limit) {
        if ($limit === null) return ['pct' => 6, 'text' => number_format($used).' / ∞', 'full' => false, 'warn' => false];
        if ($limit == 0) return ['pct' => 0, 'text' => number_format($used).' / 0', 'full' => false, 'warn' => false];
        $pct = min(100, round($used / $limit * 100));
        return ['pct' => $pct, 'text' => number_format($used).' / '.number_format($limit), 'full' => $pct >= 100, 'warn' => $pct >= 85];
    };
@endphp

<div class="space-y-5">

    {{-- Title row --}}
    <div class="flex flex-wrap items-start justify-between gap-4">
        <div>
            <h1 class="text-2xl font-bold text-white">Billing &amp; Subscription</h1>
            <p class="mt-1 text-sm text-slate-400">Manage your plan, usage and invoices.</p>
        </div>
        @if ($sub && $plan)
            <button wire:click="openChange"
                    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-arrow-left-right class="h-4 w-4" /> Change plan
            </button>
        @endif
    </div>

    {{-- Current plan --}}
    @if ($sub && $plan)
        @php($end = $sub->accessEndsAt())
        @php($remaining = $sub->remainingDays())
        <section class="admin-card relative overflow-hidden">
            <div class="pointer-events-none absolute -right-20 -top-20 h-56 w-56 rounded-full bg-brand/20 blur-3xl"></div>
            <div class="relative p-5">
                <div class="flex flex-wrap items-start justify-between gap-4">
                    <div>
                        <div class="flex items-center gap-2.5">
                            <span class="grid h-11 w-11 place-items-center rounded-xl bg-brand/20 text-brand-500"><x-lucide-crown class="h-5 w-5" /></span>
                            <div>
                                <div class="flex items-center gap-2">
                                    <h2 class="text-lg font-bold text-white">{{ $plan->name }} plan</h2>
                                    <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>
                                    <span class="admin-chip {{ $statusBadge[$sub->status] ?? 'bg-slate-500/15 text-slate-400' }}">{{ ucfirst($sub->status) }}</span>
                                </div>
                                <p class="text-sm text-slate-400 tabular-nums">{{ $fmt($sub->amount) }}{{ $cycleLabel[$sub->billing_cycle] ?? '' }}</p>
                            </div>
                        </div>
                    </div>
                    <div class="text-right">
                        <div class="text-3xl font-bold text-white tabular-nums">{{ $remaining === null ? '∞' : $remaining }}</div>
                        <div class="text-xs text-slate-500">{{ $remaining === null ? 'lifetime access' : 'days remaining' }}</div>
                    </div>
                </div>

                @if ($sub->onGrace())
                    <div class="mt-4 flex items-center gap-2.5 rounded-xl border border-amber-500/30 bg-amber-500/10 px-4 py-3 text-sm text-amber-300">
                        <x-lucide-alarm-clock class="h-4 w-4 shrink-0" />
                        <span>Your subscription expired and is in a grace period — <strong>{{ $sub->graceRemainingDays() }} day(s)</strong> left. Renew now to avoid losing access.</span>
                    </div>
                @endif

                <div class="mt-5 grid gap-4 border-t border-edge pt-4 sm:grid-cols-3">
                    <div>
                        <div class="text-[10.5px] font-semibold uppercase tracking-wider text-slate-600">Billing cycle</div>
                        <div class="mt-0.5 text-sm font-semibold text-slate-200">{{ ucfirst($sub->billing_cycle) }}</div>
                    </div>
                    <div>
                        <div class="text-[10.5px] font-semibold uppercase tracking-wider text-slate-600">{{ $sub->onGrace() ? 'Grace ends' : 'Renews / expires' }}</div>
                        <div class="mt-0.5 text-sm font-semibold text-slate-200">{{ $end ? $end->format('M j, Y') : 'Never (lifetime)' }}</div>
                    </div>
                    <div>
                        <div class="text-[10.5px] font-semibold uppercase tracking-wider text-slate-600">Auto-renew</div>
                        <div class="mt-0.5 text-sm font-semibold {{ $sub->auto_renew ? 'text-green-400' : 'text-slate-200' }}">{{ $sub->auto_renew ? 'On' : 'Off' }}</div>
                    </div>
                </div>

                <div class="mt-5 flex flex-wrap gap-2.5">
                    <button wire:click="openChange" class="inline-flex items-center gap-2 rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">
                        <x-lucide-refresh-ccw class="h-4 w-4" /> Renew
                    </button>
                    <button wire:click="openChange" class="inline-flex items-center gap-2 rounded-xl border border-edge bg-card px-4 py-2 text-sm font-semibold text-slate-300 hover:bg-raised">
                        <x-lucide-arrow-left-right class="h-4 w-4" /> Change plan
                    </button>
                    @if (in_array($sub->status, ['active', 'trial', 'grace', 'renewing']))
                        <button wire:click="cancel" wire:confirm="Cancel your subscription? You'll keep access until it expires."
                                class="inline-flex items-center gap-2 rounded-xl border border-red-500/30 px-4 py-2 text-sm font-semibold text-red-400 hover:bg-red-500/10">
                            <x-lucide-x-circle class="h-4 w-4" /> Cancel
                        </button>
                    @endif
                </div>
            </div>
        </section>
    @else
        <section class="admin-card p-8 text-center">
            <span class="mx-auto grid h-14 w-14 place-items-center rounded-2xl bg-brand/15 text-brand-500"><x-lucide-sparkles class="h-7 w-7" /></span>
            <h2 class="mt-4 text-lg font-bold text-white">You don't have an active plan</h2>
            <p class="mt-1 text-sm text-slate-400">Choose a plan to unlock publishing, scheduling and automation.</p>
            <button wire:click="openChange" class="mt-5 inline-flex items-center gap-2 rounded-xl bg-brand px-5 py-2.5 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700">
                <x-lucide-sparkles class="h-4 w-4" /> Choose a plan
            </button>
        </section>
    @endif

    {{-- Usage --}}
    <section class="admin-card p-5">
        <h3 class="mb-4 text-base font-semibold text-white">Usage &amp; Limits</h3>
        <div class="grid gap-x-10 gap-y-6 md:grid-cols-2">
            <div>
                <div class="mb-3 text-[10.5px] font-semibold uppercase tracking-wider text-slate-600">Connected accounts</div>
                <div class="space-y-3.5">
                    @forelse (collect($platformMeta)->filter(function ($meta, $key) use ($usage) {
                        $a = $usage['accounts'][$key] ?? null;
                        return $a && ! ($a['limit'] === 0 && $a['used'] === 0);
                    }) as $key => [$label, $color, $short])
                        @php($b = $bar($usage['accounts'][$key]['used'], $usage['accounts'][$key]['limit']))
                        <div>
                            <div class="mb-1.5 flex items-center justify-between text-xs">
                                <span class="inline-flex items-center gap-2 text-slate-300">
                                    <span class="grid h-5 w-5 place-items-center rounded-md text-[8px] font-bold text-white" style="background: {{ $color }}">{{ $short }}</span>
                                    {{ $label }}
                                </span>
                                <span class="font-semibold tabular-nums {{ $b['full'] ? 'text-red-400' : 'text-slate-400' }}">{{ $b['text'] }}</span>
                            </div>
                            <div class="h-1.5 overflow-hidden rounded-full bg-raised">
                                <div class="h-full rounded-full" style="width: {{ $b['pct'] }}%; background: {{ $b['full'] ? '#ef4444' : $color }}"></div>
                            </div>
                        </div>
                    @empty
                        <p class="py-4 text-sm text-slate-500">No platform accounts in your plan yet.</p>
                    @endforelse
                </div>
            </div>
            <div>
                <div class="mb-3 text-[10.5px] font-semibold uppercase tracking-wider text-slate-600">Publishing</div>
                <div class="space-y-3.5">
                    @foreach ($quotaLabels as $key => $label)
                        @php($q = $usage['quotas'][$key] ?? null)
                        @continue(! $q || ($q['limit'] === 0 && $q['used'] === 0))
                        @php($b = $bar($q['used'], $q['limit']))
                        <div>
                            <div class="mb-1.5 flex justify-between text-xs">
                                <span class="text-slate-300">{{ $label }}</span>
                                <span class="font-semibold tabular-nums {{ $b['full'] ? 'text-red-400' : ($b['warn'] ? 'text-amber-400' : 'text-slate-400') }}">{{ $b['text'] }}</span>
                            </div>
                            <div class="h-1.5 overflow-hidden rounded-full bg-raised">
                                <div class="h-full rounded-full {{ $b['full'] ? 'bg-red-500' : ($b['warn'] ? 'bg-amber-400' : 'bg-accent2') }}" style="width: {{ $b['pct'] }}%"></div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
        </div>
    </section>

    <div class="grid gap-5 lg:grid-cols-2">
        {{-- Invoices --}}
        <section class="admin-card p-5">
            <h3 class="mb-2 text-base font-semibold text-white">Invoices</h3>
            <div class="divide-y divide-edge">
                @forelse ($invoices as $inv)
                    <div class="flex items-center justify-between py-3">
                        <div class="flex items-center gap-3">
                            <span class="grid h-9 w-9 place-items-center rounded-lg bg-raised text-slate-400"><x-lucide-receipt class="h-4 w-4" /></span>
                            <div>
                                <div class="text-sm font-medium text-slate-200">{{ $inv->invoice_number }}</div>
                                <div class="text-xs text-slate-500">{{ optional($inv->issued_at)->format('M j, Y') }} · {{ ucfirst(str_replace('_', ' ', $inv->status)) }}</div>
                            </div>
                        </div>
                        <div class="flex items-center gap-3">
                            <span class="text-sm font-semibold text-white tabular-nums">{{ $fmt($inv->total) }}</span>
                            <a href="{{ route('billing.invoice.download', $inv) }}" target="_blank"
                               class="inline-flex items-center gap-1.5 rounded-lg border border-edge px-2.5 py-1.5 text-xs font-medium text-slate-400 hover:bg-raised hover:text-white">
                                <x-lucide-download class="h-3.5 w-3.5" /> PDF
                            </a>
                        </div>
                    </div>
                @empty
                    <p class="py-8 text-center text-sm text-slate-500">No invoices yet.</p>
                @endforelse
            </div>
        </section>

        {{-- Payment history --}}
        <section class="admin-card p-5">
            <h3 class="mb-2 text-base font-semibold text-white">Payment History</h3>
            <div class="divide-y divide-edge">
                @forelse ($payments as $pay)
                    <div class="flex items-center justify-between py-3">
                        <div class="flex items-center gap-3">
                            <span class="grid h-9 w-9 place-items-center rounded-lg bg-raised text-slate-400"><x-lucide-wallet class="h-4 w-4" /></span>
                            <div>
                                <div class="text-sm font-semibold text-white tabular-nums">{{ $fmt($pay->amount) }}</div>
                                <div class="text-xs text-slate-500">{{ ucfirst(str_replace('_', ' ', $pay->gateway)) }} · {{ $pay->created_at->format('M j, Y') }}</div>
                            </div>
                        </div>
                        <span class="admin-chip {{ $pay->status === 'succeeded' ? 'bg-green-500/15 text-green-400' : ($pay->status === 'pending' ? 'bg-amber-500/15 text-amber-400' : 'bg-red-500/15 text-red-400') }}">
                            {{ str_replace('_', ' ', $pay->status) }}
                        </span>
                    </div>
                @empty
                    <p class="py-8 text-center text-sm text-slate-500">No payments yet.</p>
                @endforelse
            </div>
        </section>
    </div>

    {{-- Change plan modal --}}
    @if ($showChange)
        <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('showChange', false)">
            <div class="mx-auto my-8 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">
                    <h3 class="text-base font-semibold text-white">Choose your plan</h3>
                    <button wire:click="$set('showChange', false)" class="rounded-lg p-1.5 text-slate-400 hover:bg-raised hover:text-white"><x-lucide-x class="h-5 w-5" /></button>
                </div>
                <div class="space-y-4 px-6 py-5">
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-400">Product</label>
                        <div class="grid grid-cols-2 gap-2">
                            @foreach (['cloud' => ['cloud', 'Web Cloud', 'Runs on our servers'], 'desktop' => ['monitor', 'Desktop', 'Runs on your PC or VPS']] as $key => [$ic, $label, $sub2])
                                <button type="button" wire:click="setProductTab('{{ $key }}')"
                                        class="flex items-center gap-2.5 rounded-xl border-2 p-3 text-left transition {{ $productTab === $key ? 'border-brand bg-brand/10' : 'border-edge hover:border-slate-600' }}">
                                    <x-dynamic-component :component="'lucide-'.$ic" class="h-5 w-5 {{ $productTab === $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">{{ $sub2 }}</span></span>
                                </button>
                            @endforeach
                        </div>
                    </div>
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-400">Billing cycle</label>
                        <select wire:model.live="selectedCycle" class="w-full rounded-lg border-edge bg-ink text-sm text-slate-200 focus:border-brand focus:ring-brand">
                            <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>
                        @error('selectedCycle') <p class="mt-1 text-xs text-red-400">{{ $message }}</p> @enderror
                    </div>
                    @if ($plans->isEmpty())
                        <p class="rounded-lg border border-edge bg-ink px-3 py-4 text-center text-xs text-slate-500">No {{ $productTab === 'cloud' ? 'Web Cloud' : 'Desktop' }} packages are available yet.</p>
                    @endif
                    <div class="grid gap-3 sm:grid-cols-2">
                        @foreach ($plans as $p)
                            @php($price = $p->priceFor($selectedCycle))
                            <button type="button" wire:click="$set('selectedPlanId', {{ $p->id }})"
                                class="rounded-xl border-2 p-4 text-left transition {{ $selectedPlanId === $p->id ? 'border-brand bg-brand/10' : 'border-edge hover:border-slate-600' }}">
                                <div class="flex items-center justify-between">
                                    <span class="font-semibold text-slate-200">{{ $p->name }}</span>
                                    @if ($selectedPlanId === $p->id)<x-lucide-check-circle class="h-5 w-5 text-brand-500" />@endif
                                </div>
                                <div class="mt-1 text-lg font-bold text-white tabular-nums">{{ $price === null ? 'N/A' : $fmt($price) }}</div>
                                @if ($p->description)<div class="mt-0.5 text-xs text-slate-500">{{ $p->description }}</div>@endif
                            </button>
                        @endforeach
                    </div>
                    @error('selectedPlanId') <p class="text-xs text-red-400">{{ $message }}</p> @enderror

                    {{-- Payment method (hidden entirely for free orders) --}}
                    @if ($freeOrder)
                        <div class="rounded-lg border border-green-500/30 bg-green-500/10 px-3 py-2.5 text-xs text-green-300">
                            <span class="font-semibold">Free plan</span> — no payment method needed. Confirm and your plan activates instantly.
                        </div>
                    @else
                    <div>
                        <label class="mb-1.5 block text-xs font-medium text-slate-400">Payment method</label>
                        @if (count($paymentMethods))
                            <div class="grid gap-2 sm:grid-cols-2">
                                @foreach ($paymentMethods as $method)
                                    <button type="button" wire:click="$set('selectedMethod', '{{ $method['key'] }}')"
                                        class="flex items-center justify-between rounded-lg border px-3 py-2 text-left text-sm transition {{ $selectedMethod === $method['key'] ? 'border-brand bg-brand/10' : 'border-edge hover:border-slate-600' }}">
                                        <span class="font-medium text-slate-200">{{ $method['label'] }}</span>
                                        @if ($selectedMethod === $method['key'])<x-lucide-check-circle class="h-4 w-4 text-brand-500" />@endif
                                    </button>
                                @endforeach
                            </div>
                            @php($chosen = collect($paymentMethods)->firstWhere('key', $selectedMethod))
                            @if ($chosen && $chosen['offline'] && $chosen['details'])
                                <div class="mt-2 rounded-lg border border-edge bg-ink p-3 text-xs text-slate-400">
                                    <div class="font-semibold text-slate-200">Pay to:</div>
                                    @if ($chosen['details']['account_name'])<div>Name: {{ $chosen['details']['account_name'] }}</div>@endif
                                    @if ($chosen['details']['account_number'])<div>{{ $chosen['details']['account_label'] }}: <span class="font-mono text-slate-300">{{ $chosen['details']['account_number'] }}</span></div>@endif
                                    @if ($chosen['details']['instructions'])<div class="mt-1 text-slate-500">{{ $chosen['details']['instructions'] }}</div>@endif
                                    <div class="mt-1 text-slate-500">After paying, share your receipt — we'll confirm and activate your plan.</div>
                                </div>
                            @endif
                        @else
                            <p class="rounded-lg border border-amber-500/30 bg-amber-500/10 px-3 py-2 text-xs text-amber-300">No payment methods are available yet. Please contact support.</p>
                        @endif
                    </div>
                    @endif

                    @unless ($freeOrder)
                        <p class="text-xs text-slate-500">An invoice is emailed to you. Card methods activate instantly; manual methods activate once we confirm your payment.</p>
                    @endunless
                </div>
                <div class="flex justify-end gap-2 border-t border-edge px-6 py-4">
                    <button wire:click="$set('showChange', false)" class="rounded-xl border border-edge px-4 py-2 text-sm font-medium text-slate-300 hover:bg-raised">Cancel</button>
                    <button wire:click="submitOrder" @disabled(! $freeOrder && ! count($paymentMethods)) class="rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white shadow-lg shadow-brand/25 hover:bg-brand-700 disabled:opacity-50">Confirm</button>
                </div>
            </div>
        </div>
    @endif

    {{-- Payment instructions for a pending offline order --}}
    @if (! empty($pendingOrder))
        <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('pendingOrder', [])">
            <div class="mx-auto my-8 w-full max-w-md rounded-2xl border border-edge bg-card shadow-card">
                <div class="border-b border-edge px-6 py-4">
                    <h3 class="text-base font-semibold text-white">Complete your payment</h3>
                </div>
                <div class="space-y-3 px-6 py-5 text-sm">
                    <p class="text-slate-300">Send <strong class="text-white">{{ $pendingOrder['amount'] }}</strong> using the details below, then share your receipt. We'll confirm and activate your plan.</p>
                    @if (! empty($pendingOrder['method']))
                        <div class="rounded-lg border border-edge bg-ink p-3">
                            <div class="font-semibold text-slate-200">{{ $pendingOrder['method']['label'] }}</div>
                            @if ($pendingOrder['method']['account_name'])<div class="text-slate-400">Name: {{ $pendingOrder['method']['account_name'] }}</div>@endif
                            @if ($pendingOrder['method']['account_number'])<div class="text-slate-400">{{ $pendingOrder['method']['account_label'] }}: <span class="font-mono text-slate-300">{{ $pendingOrder['method']['account_number'] }}</span></div>@endif
                            @if ($pendingOrder['method']['instructions'])<div class="mt-1 text-slate-500">{{ $pendingOrder['method']['instructions'] }}</div>@endif
                        </div>
                    @endif
                    <div class="rounded-lg border border-brand/30 bg-brand/10 px-3 py-2 text-brand-500">
                        Payment reference: <strong>{{ $pendingOrder['invoice'] }}</strong> — include this so we can match your payment.
                    </div>
                </div>
                <div class="flex justify-end border-t border-edge px-6 py-4">
                    <button wire:click="$set('pendingOrder', [])" class="rounded-xl bg-brand px-4 py-2 text-sm font-semibold text-white hover:bg-brand-700">Done</button>
                </div>
            </div>
        </div>
    @endif
</div>