{{--
    Reseller plan catalogue (doctrine v2). A plan is a MEMBERSHIP: a price, a
    period, the modules it includes and whether the reseller may connect their
    own SMM provider. No consumption is metered, so no quota column exists.
--}}
<div>
    <x-admin.page-header :title="__('Plans')" :subtitle="__('Monthly or annual membership tiers for your resellers.')" icon="badge-percent">
        @if ($canManage)
            <x-slot:actions>
                <button type="button" class="rf-btn rf-btn-primary" wire:click="create">
                    <i data-lucide="plus" style="width:16px;height:16px;"></i>{{ __('Add plan') }}
                </button>
            </x-slot:actions>
        @endif
    </x-admin.page-header>

    <x-admin.filter-bar :placeholder="__('Search plans…')" />

    <x-admin.card :padding="false">
        <div class="overflow-x-auto">
            <table class="rf-table">
                <thead>
                    <tr>
                        <th>{{ __('Plan') }}</th>
                        <th class="text-right">{{ __('Price') }}</th>
                        <th>{{ __('Billing') }}</th>
                        <th>{{ __('Own providers') }}</th>
                        <th>{{ __('Catalogue') }}</th>
                        <th>{{ __('Domains') }}</th>
                        <th>{{ __('Modules') }}</th>
                        <th class="text-right">{{ __('Subscribers') }}</th>
                        <th>{{ __('Public') }}</th>
                        <th>{{ __('Status') }}</th>
                        <th style="width:60px;text-align:right;">{{ __('Action') }}</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($plans as $plan)
                        @php
                            $f = $plan->planFeatures();
                            $lines = $f->highlights();
                            $onCount = $f->enabledModuleCount();
                            $totalCount = count($optionalModules);
                        @endphp
                        <tr wire:key="plan-{{ $plan->id }}">
                            <td>
                                <div class="font-medium">{{ $plan->name }}</div>
                                <span class="text-xs rf-mono" style="color:var(--color-text-subtle);">{{ $plan->slug }}</span>
                                @if ($lines !== [])
                                    <ul class="mt-1 space-y-0.5 text-xs" style="color:var(--color-text-muted);">
                                        @foreach (array_slice($lines, 0, 3) as $line)
                                            <li>· {{ $line }}</li>
                                        @endforeach
                                        @if (count($lines) > 3)
                                            <li style="color:var(--color-text-subtle);">{{ __('+:n more', ['n' => count($lines) - 3]) }}</li>
                                        @endif
                                    </ul>
                                @endif
                            </td>
                            <td class="text-right rf-mono tabular">{{ money($plan->price, $plan->currency) }}</td>
                            <td>
                                <span class="text-sm">{{ __(ucfirst($plan->billing_period)) }}</span>
                                @if ($plan->trial_days > 0)
                                    <span class="rf-badge rf-badge-info" style="margin-left:4px;">{{ trans_choice('{1} :count-day trial|[2,*] :count-day trial', $plan->trial_days, ['count' => $plan->trial_days]) }}</span>
                                @endif
                            </td>
                            <td>
                                @if ($f->ownProviders())
                                    <span class="rf-badge rf-badge-success"><span class="rf-badge-dot"></span>{{ __('Included') }}</span>
                                @else
                                    <span class="rf-badge rf-badge-neutral"><span class="rf-badge-dot"></span>{{ __('Catalogue only') }}</span>
                                @endif
                            </td>
                            <td>
                                @if ($f->hasCatalogMarkup())
                                    <span class="rf-badge rf-badge-warning"><span class="rf-badge-dot"></span>{{ __('+:pct%', ['pct' => rtrim(rtrim(\App\Support\Money::round($f->catalogMarkupPercent(), 2), '0'), '.')]) }}</span>
                                @else
                                    <span class="text-sm" style="color:var(--color-text-subtle);">{{ __('At your price') }}</span>
                                @endif
                            </td>
                            <td>
                                @php $planDomains = $f->maxCustomDomains(); @endphp
                                @if ($planDomains === 0)
                                    <span class="text-sm" style="color:var(--color-text-subtle);">{{ __('Subdomain only') }}</span>
                                @elseif ($planDomains < 0)
                                    <span class="text-sm tabular">{{ __('Unlimited') }}</span>
                                @else
                                    <span class="text-sm tabular">{{ $planDomains }}</span>
                                @endif
                            </td>
                            <td>
                                <span class="text-sm tabular">{{ $onCount }}/{{ $totalCount }}</span>
                                @if ($onCount === $totalCount)
                                    <span class="rf-badge rf-badge-neutral" style="margin-left:4px;">{{ __('All') }}</span>
                                @endif
                            </td>
                            <td class="text-right tabular">{{ number_format($plan->subscriptions_count) }}</td>
                            <td>
                                @if ($plan->is_public)
                                    <i data-lucide="eye" style="width:16px;height:16px;color:var(--color-success-600);" title="{{ __('Public — listed on your website pricing') }}"></i>
                                @else
                                    <i data-lucide="eye-off" style="width:16px;height:16px;color:var(--color-text-subtle);opacity:.55;" title="{{ __('Hidden — not on your website; existing subscribers keep it') }}"></i>
                                @endif
                            </td>
                            <td>
                                {{-- The @if must wrap the whole tag, never sit inside its
                                     attribute list: Blade's component parser stops
                                     recognising :active as a prop, so it reached the
                                     browser verbatim and Alpine tried to evaluate
                                     "$plan->status" as JavaScript on every page load. --}}
                                @if ($canManage)
                                    <x-admin.switch :active="$plan->status" wire:click="toggleStatus({{ $plan->id }})" />
                                @else
                                    <x-admin.switch :active="$plan->status" :disabled="true" />
                                @endif
                            </td>
                            <td class="text-right">
                                @if ($canManage)
                                    <x-admin.kebab>
                                        <button type="button" class="rf-menu-item" wire:click="edit({{ $plan->id }})"><i data-lucide="pencil" style="width:15px;height:15px;"></i>{{ __('Edit') }}</button>
                                        <div class="rf-menu-sep"></div>
                                        <button type="button" class="rf-menu-item rf-menu-item-danger" wire:click="delete({{ $plan->id }})"
                                                @rfconfirm(
                                                    title: __('Delete plan'),
                                                    text: __('The plan is deleted permanently. Only possible if no reseller has ever subscribed to it.'),
                                                    action: __('Delete plan'),
                                                )><i data-lucide="trash-2" style="width:15px;height:15px;"></i>{{ __('Delete') }}</button>
                                    </x-admin.kebab>
                                @endif
                            </td>
                        </tr>
                    @empty
                        <x-admin.empty :colspan="11" icon="badge-percent" :title="__('No plans yet')" :subtitle="__('Create a reseller plan to start assigning subscriptions.')" />
                    @endforelse
                </tbody>
            </table>
        </div>
    </x-admin.card>

    {{-- ══ Create / edit plan ══ --}}
    <x-admin.modal wire-model="showModal" :title="__('Add plan')" :title-edit="__('Edit plan')" size="lg">
        <div class="space-y-5">
            {{-- Header --}}
            <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                <div>
                    <label class="rf-label">{{ __('Name') }} *</label>
                    <input type="text" wire:model="name" class="rf-input @error('name') rf-input-error @enderror">
                    @error('name') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
                </div>
                <div>
                    <label class="rf-label">{{ __('Slug') }}</label>
                    <input type="text" wire:model="slug" class="rf-input rf-mono @error('slug') rf-input-error @enderror" placeholder="{{ __('auto from name') }}">
                    @error('slug') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
                </div>
            </div>

            <div>
                <label class="rf-label">{{ __('Description') }}</label>
                <textarea wire:model="description" rows="2" class="rf-input" placeholder="{{ __('One line shown under the plan name.') }}"></textarea>
            </div>

            {{-- ══ Price & period ══ --}}
            <div class="pt-4" style="border-top:1px solid var(--color-border);">
                <h3 class="rf-panel-heading mb-1">{{ __('Membership price') }}</h3>
                <p class="rf-hint mb-3">{{ __('What the reseller pays to use the platform — hosting, domain and system.') }}</p>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-3">
                    <div>
                        <label class="rf-label">{{ __('Price') }} *</label>
                        <input type="number" step="any" min="0" wire:model="price" class="rf-input @error('price') rf-input-error @enderror">
                        @error('price') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
                        <p class="rf-hint mt-1">{{ __('0 = free / comp tier.') }}</p>
                    </div>
                    <div>
                        <label class="rf-label">{{ __('Currency') }}</label>
                        <input type="text" wire:model="currency" class="rf-input rf-mono" maxlength="10">
                        <p class="rf-hint mt-1">{{ __('Must equal the owner base currency.') }}</p>
                    </div>
                    <div>
                        <label class="rf-label">{{ __('Billing period') }} *</label>
                        <select wire:model="billing_period" class="rf-select">
                            <option value="monthly">{{ __('Monthly') }}</option>
                            <option value="annual">{{ __('Annual (yearly)') }}</option>
                            <option value="quarterly">{{ __('Quarterly') }}</option>
                            <option value="semiannual">{{ __('Semiannual') }}</option>
                            <option value="lifetime">{{ __('Lifetime (never renews)') }}</option>
                        </select>
                        <p class="rf-hint mt-1">{{ __('How often the membership is charged.') }}</p>
                    </div>
                </div>

                <div class="mt-4 grid grid-cols-1 gap-4 sm:grid-cols-4">
                    <div>
                        <label class="rf-label">{{ __('Trial days') }}</label>
                        <input type="number" min="0" wire:model="trial_days" class="rf-input">
                    </div>
                    <div>
                        <label class="rf-label">{{ __('Grace days') }}</label>
                        <input type="number" min="0" wire:model="grace_days" class="rf-input">
                        <p class="rf-hint mt-1">{{ __('Past-due → suspend.') }}</p>
                    </div>
                    <div>
                        <label class="rf-label">{{ __('Sort') }}</label>
                        <input type="number" wire:model="sort" class="rf-input">
                    </div>
                    <div class="flex flex-col gap-2 pt-6">
                        <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="is_public" class="rf-checkbox">{{ __('Public') }}</label>
                        <label class="flex items-center gap-2 text-sm"><input type="checkbox" wire:model="status" class="rf-checkbox">{{ __('Active') }}</label>
                    </div>
                </div>
            </div>

            {{-- ══ Supply: what the tier pays for your catalogue, and its own ══ --}}
            <div class="pt-4" style="border-top:1px solid var(--color-border);">
                <h3 class="rf-panel-heading mb-1">{{ __('Supply') }}</h3>
                <p class="rf-hint mb-3">{{ __('Every plan sells your catalogue. What changes per tier is the price they buy it at, and whether they may bring a supplier of their own.') }}</p>

                <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
                    <div>
                        <label class="rf-label">{{ __('Catalogue markup %') }} *</label>
                        <input type="number" step="0.01" min="0" max="1000" wire:model="catalog_markup_percent"
                               class="rf-input @error('catalog_markup_percent') rf-input-error @enderror">
                        @error('catalog_markup_percent') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
                        <p class="rf-hint mt-1">{{ __('Added on top of YOUR sale price before the reseller sees it. 0 = they buy at your price. They are never shown a markup — it simply is the price of the service for them, and they add their own margin on top.') }}</p>
                    </div>
                    <div>
                        <label class="rf-label">{{ __('Custom domains') }} *</label>
                        <input type="number" step="1" min="-1" max="100" wire:model="max_custom_domains"
                               class="rf-input @error('max_custom_domains') rf-input-error @enderror">
                        @error('max_custom_domains') <p class="rf-hint mt-1" style="color:var(--color-danger);">{{ $message }}</p> @enderror
                        <p class="rf-hint mt-1">{{ __('How many domains of their own this tier may point at their panel. 0 = your platform subdomain only. -1 = unlimited. Each one is a vhost and a certificate your hosting serves.') }}</p>
                    </div>
                </div>

                <div class="mt-4 rounded-lg p-3" style="background:var(--color-surface-2, rgba(0,0,0,.03));border:1px solid var(--color-border);">
                    <label class="flex items-start gap-2 text-sm font-medium">
                        <input type="checkbox" wire:model.live="own_providers" class="rf-checkbox mt-0.5">
                        <span>
                            {{ __('Allow connecting their own SMM provider') }}
                            <span class="mt-1 block text-xs font-normal" style="color:var(--color-text-muted);">
                                {{ __('They can add their own provider API and sync categories and services just like you do — and they keep selling your catalogue alongside it. Their own supply never carries the markup above.') }}
                            </span>
                        </span>
                    </label>
                </div>
            </div>

            {{-- ══ Modules ══ --}}
            <div class="pt-4" style="border-top:1px solid var(--color-border);">
                <h3 class="rf-panel-heading mb-1">{{ __('Modules included') }}</h3>
                <p class="rf-hint mb-3">{{ __('Everything is included by default. Untick anything this tier should not get — there are no usage limits either way.') }}</p>

                <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
                    @foreach ($optionalModules as $key => $module)
                        <label class="flex items-start gap-2 rounded-lg p-2 text-sm" wire:key="mod-{{ $key }}" style="border:1px solid var(--color-border);">
                            <input type="checkbox" wire:model="modules.{{ $key }}" class="rf-checkbox mt-0.5">
                            <span class="flex items-start gap-2">
                                <i data-lucide="{{ $module[0] }}" style="width:15px;height:15px;flex-shrink:0;margin-top:2px;color:var(--color-text-subtle);"></i>
                                <span>
                                    {{ __($module[1]) }}
                                    <span class="mt-0.5 block text-xs font-normal" style="color:var(--color-text-muted);">{{ __($module[2]) }}</span>
                                </span>
                            </span>
                        </label>
                    @endforeach
                </div>

                <p class="rf-hint mt-4 mb-2">{{ __('Always included (every plan):') }}</p>
                <div class="flex flex-wrap gap-2">
                    @foreach ($coreModules as $key => $module)
                        <span class="rf-badge rf-badge-neutral" wire:key="core-{{ $key }}" title="{{ __($module[2]) }}">
                            <i data-lucide="{{ $module[0] }}" style="width:13px;height:13px;"></i>{{ __($module[1]) }}
                        </span>
                    @endforeach
                </div>
            </div>

            {{-- ══ Client panel designs ══ --}}
            <div class="pt-4" style="border-top:1px solid var(--color-border);">
                <h3 class="rf-panel-heading mb-1">{{ __('Client panel designs') }}</h3>
                <p class="rf-hint mb-3">{{ __('The portal skins a reseller on this tier may offer their own clients. All included by default — untick one to keep it for higher tiers.') }}</p>

                <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
                    @foreach ($clientTemplateOptions as $key => $tpl)
                        <label class="flex items-start gap-2 rounded-lg p-2 text-sm" wire:key="tpl-{{ $key }}" style="border:1px solid var(--color-border);">
                            <input type="checkbox" wire:model="client_templates.{{ $key }}" class="rf-checkbox mt-0.5">
                            <span class="flex items-start gap-2">
                                <span style="width:15px;height:15px;flex-shrink:0;margin-top:3px;border-radius:4px;background:{{ $tpl['accent'] ?? 'var(--color-primary-600)' }};"></span>
                                <span>
                                    {{ $tpl['label'] ?? $key }}
                                    @isset($tpl['description'])
                                        <span class="mt-0.5 block text-xs font-normal" style="color:var(--color-text-muted);">{{ __($tpl['description']) }}</span>
                                    @endisset
                                </span>
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>

            {{-- ══ Landing designs ══ --}}
            <div class="pt-4" style="border-top:1px solid var(--color-border);">
                <h3 class="rf-panel-heading mb-1">{{ __('Landing designs') }}</h3>
                <p class="rf-hint mb-3">{{ __('The public landing skins a reseller on this tier may choose from. All included by default — untick one to keep it for higher tiers.') }}</p>

                <div class="grid grid-cols-1 gap-2 sm:grid-cols-2">
                    @foreach ($landingTemplateOptions as $key => $tpl)
                        <label class="flex items-start gap-2 rounded-lg p-2 text-sm" wire:key="lp-tpl-{{ $key }}" style="border:1px solid var(--color-border);">
                            <input type="checkbox" wire:model="landing_templates.{{ $key }}" class="rf-checkbox mt-0.5">
                            <span class="flex items-start gap-2">
                                <span style="width:15px;height:15px;flex-shrink:0;margin-top:3px;border-radius:4px;background:{{ $tpl['accent'] ?? 'var(--color-primary-600)' }};"></span>
                                <span>
                                    {{ $tpl['label'] ?? $key }}
                                    @isset($tpl['description'])
                                        <span class="mt-0.5 block text-xs font-normal" style="color:var(--color-text-muted);">{{ __($tpl['description']) }}</span>
                                    @endisset
                                </span>
                            </span>
                        </label>
                    @endforeach
                </div>
            </div>

            {{-- ══ Highlights ══ --}}
            <div class="pt-4" style="border-top:1px solid var(--color-border);">
                <h3 class="rf-panel-heading mb-1">{{ __('Highlights') }}</h3>
                <p class="rf-hint mb-3">{{ __('The bullet lines shown on the plan card. Describe what they get — never a quota.') }}</p>

                <div class="space-y-2">
                    @foreach ($highlights as $i => $line)
                        <div class="flex items-center gap-2" wire:key="hl-{{ $i }}">
                            <input type="text" wire:model="highlights.{{ $i }}" class="rf-input"
                                   placeholder="{{ __('e.g. Unlimited clients, orders and services') }}" maxlength="200">
                            <button type="button" class="rf-btn rf-btn-secondary rf-btn-sm" wire:click="removeHighlight({{ $i }})" title="{{ __('Remove line') }}">
                                <i data-lucide="x" style="width:15px;height:15px;"></i>
                            </button>
                        </div>
                    @endforeach
                </div>

                <button type="button" class="rf-btn rf-btn-secondary rf-btn-sm mt-3" wire:click="addHighlight">
                    <i data-lucide="plus" style="width:15px;height:15px;"></i>{{ __('Add line') }}
                </button>
            </div>
        </div>

        <x-slot:footer>
            <button type="button" class="rf-btn rf-btn-secondary" @click="open = false">{{ __('Cancel') }}</button>
            <button type="button" class="rf-btn rf-btn-primary" wire:click="save">{{ __('Save plan') }}</button>
        </x-slot:footer>
    </x-admin.modal>
</div>