{{--
    Shown instead of the provider grid when the current plan does not include
    own providers. The screen whose whole job is to sell the upgrade must never
    be a blank 403 — every write is still hard-blocked server-side.
--}}
<div>
    <x-admin.page-header :title="__('My Providers')" :subtitle="__('Connect your own SMM supplier and sell its catalogue at your own price.')" icon="server" />

    <div class="grid grid-cols-1 gap-5 lg:grid-cols-3">
        {{-- ── What the upgrade unlocks ── --}}
        <div class="lg:col-span-2">
            <x-admin.card>
                <div class="flex items-start gap-4">
                    <span class="flex h-11 w-11 flex-shrink-0 items-center justify-center rounded-xl"
                          style="background:var(--color-primary-soft);color:var(--color-primary-700);">
                        <i data-lucide="server" style="width:22px;height:22px;"></i>
                    </span>
                    <div>
                        <h2 class="text-lg font-semibold">{{ __('Your own supplier is not part of your current plan') }}</h2>
                        <p class="mt-1 text-sm" style="color:var(--color-text-muted);">
                            {{ __('Today you sell the catalogue we supply — nothing is limited: every service, client and order is yours to take. A higher tier adds your OWN supplier on top of it.') }}
                        </p>
                        @if ($currentPlan)
                            <p class="mt-2 text-sm">
                                <span style="color:var(--color-text-subtle);">{{ __('Current plan') }}:</span>
                                <span class="font-medium">{{ $currentPlan->name }}</span>
                                <span class="rf-mono" style="color:var(--color-text-muted);">
                                    · {{ money($currentPlan->price, $currentPlan->currency) }}/{{ __(ucfirst($currentPlan->billing_period)) }}
                                </span>
                            </p>
                        @endif
                    </div>
                </div>

                <div class="mt-5 grid grid-cols-1 gap-3 sm:grid-cols-2" style="border-top:1px solid var(--color-border);padding-top:16px;">
                    @foreach ([
                        ['plug', __('Connect any SMM provider API'), __('Your URL, your key. The same connection screen we use.')],
                        ['refresh-cw', __('Sync categories and services'), __('Import the whole upstream catalogue with your own markup.')],
                        ['layers', __('Both catalogues at once'), __('Ours keeps working next to yours — you decide what to sell.')],
                        ['trending-up', __('Keep the full margin'), __('Orders on your own supply never pay a cost leg to us.')],
                    ] as [$icon, $title, $text])
                        <div class="flex items-start gap-3">
                            <i data-lucide="{{ $icon }}" style="width:17px;height:17px;flex-shrink:0;margin-top:2px;color:var(--color-primary-600);"></i>
                            <div>
                                <div class="text-sm font-medium">{{ $title }}</div>
                                <div class="text-xs" style="color:var(--color-text-muted);">{{ $text }}</div>
                            </div>
                        </div>
                    @endforeach
                </div>
            </x-admin.card>
        </div>

        {{-- ── How to get it ── --}}
        <div class="space-y-5">
            @if ($upgradePlans->isNotEmpty() && $canSelfServe)
                @foreach ($upgradePlans as $plan)
                    <x-admin.card wire:key="up-{{ $plan->id }}">
                        <div class="flex items-baseline justify-between gap-2">
                            <h3 class="font-semibold">{{ $plan->name }}</h3>
                        </div>
                        <div class="mt-1 text-xl font-bold rf-mono">
                            {{ money($plan->price, $plan->currency) }}<span class="text-xs font-normal" style="color:var(--color-text-subtle);">/{{ __(ucfirst($plan->billing_period)) }}</span>
                        </div>
                        <div class="mt-2"><x-admin.plan-perks :features="$plan->planFeatures()" /></div>

                        @php $lines = $plan->highlights(); @endphp
                        @if ($lines !== [])
                            <ul class="mt-3 space-y-1 text-xs" style="color:var(--color-text-muted);">
                                @foreach ($lines as $line)
                                    <li class="flex items-start gap-1.5">
                                        <i data-lucide="check" style="width:13px;height:13px;flex-shrink:0;margin-top:2px;color:var(--color-primary-600);"></i>
                                        <span>{{ $line }}</span>
                                    </li>
                                @endforeach
                            </ul>
                        @elseif ($plan->description)
                            <p class="mt-3 text-xs" style="color:var(--color-text-muted);">{{ $plan->description }}</p>
                        @endif

                        <a href="{{ route('panel.billing') }}" class="rf-btn rf-btn-primary mt-4 w-full" wire:navigate>
                            <i data-lucide="arrow-up-circle" style="width:16px;height:16px;"></i>{{ __('Upgrade') }}
                        </a>
                    </x-admin.card>
                @endforeach

                <p class="rf-hint">{{ __('Nothing is deleted when you upgrade: your clients, domain, branding and order history all stay exactly as they are.') }}</p>
            @else
                <x-admin.card>
                    <div class="flex flex-col items-center justify-center gap-2 py-6 text-center">
                        <span class="flex h-12 w-12 items-center justify-center rounded-full" style="background:var(--color-surface-2);color:var(--color-text-subtle);">
                            <i data-lucide="life-buoy" style="width:22px;height:22px;"></i>
                        </span>
                        <p class="text-sm font-medium">{{ __('Ask your platform owner') }}</p>
                        <p class="text-sm" style="color:var(--color-text-subtle);">
                            {{ __('There is no self-serve tier with own providers right now. Contact your platform owner to have it enabled on your account.') }}
                        </p>
                    </div>
                </x-admin.card>
            @endif
        </div>
    </div>
</div>