@php
    $rows = $this->rows;
    $counts = $this->counts;
    $usage = $this->usage;
    $all = $this->all;
@endphp

<div class="plans">
    <div class="plans-head">
        <div>
            <h1 class="plans-title">{{ __('Your') }} <em>{{ __('packages.') }}</em></h1>
            <p class="plans-lead">
                {{ __('Every plan you offer, grouped by connection type.') }}
                {{ trans_choice('{0}Nothing active yet.|{1}One active across the network.|[2,*]:count active across the network.',
                    $counts['all'], ['count' => $counts['all']]) }}
            </p>
        </div>
        <a class="plans-new" href="{{ route('plans.create') }}" wire:navigate>
            <i class="bi bi-plus-lg"></i> {{ __('New package') }}
        </a>
    </div>

    @if ($flash)
        <div class="plans-flash {{ $flashOk ? '' : 'is-bad' }}">
            <i class="bi {{ $flashOk ? 'bi-check-circle' : 'bi-exclamation-triangle' }}"></i>
            <span>{{ $flash }}</span>
            <button type="button" wire:click="$set('flash','')" aria-label="{{ __('Dismiss') }}">&times;</button>
        </div>
    @endif

    {{-- ── Summary ────────────────────────────────────────────────── --}}
    @php
        $live = $all->where('availability', 'live')->count();
        $hidden = $all->where('availability', 'hidden')->count();
        $off = $all->where('availability', 'off')->count();
        $onPlans = array_sum($usage['subscribers']);
    @endphp
    <div class="plans-stats">
        <div class="plans-stat">
            <span class="plans-stat__k">{{ __('All plans') }}</span>
            <span class="plans-stat__v">{{ $counts['all'] }}</span>
            <span class="plans-stat__s">{{ trans_choice('{0}none withdrawn|{1}:count withdrawn|[2,*]:count withdrawn', $off, ['count' => $off]) }}</span>
        </div>
        <div class="plans-stat">
            <span class="plans-stat__k">{{ __('Active') }}</span>
            <span class="plans-stat__v">{{ $live }}</span>
            <span class="plans-stat__s">{{ __('currently offering') }}</span>
        </div>
        <div class="plans-stat">
            <span class="plans-stat__k">{{ __('Unlisted') }}</span>
            <span class="plans-stat__v">{{ $hidden }}</span>
            <span class="plans-stat__s">{{ __('not listed publicly') }}</span>
        </div>
        <div class="plans-stat">
            <span class="plans-stat__k">{{ __('Withdrawn') }}</span>
            <span class="plans-stat__v">{{ $off }}</span>
            <span class="plans-stat__s">{{ __('not open for sign-up') }}</span>
        </div>
        <div class="plans-stat">
            <span class="plans-stat__k">{{ __('Subscribers') }}</span>
            <span class="plans-stat__v">{{ $onPlans }}</span>
            <span class="plans-stat__s">{{ __('assigned to plans') }}</span>
        </div>
    </div>

    {{-- ── Filters ────────────────────────────────────────────────── --}}
    <div class="plans-bar">
        <div class="plans-pills">
            <button type="button" class="plans-pill {{ $tab === 'all' ? 'is-on' : '' }}"
                wire:click="$set('tab','all')">
                {{ __('All') }} <span>{{ $counts['all'] }}</span>
            </button>
            @foreach (\App\Models\PackageList::TYPES as $key => $label)
                <button type="button" class="plans-pill {{ $tab === $key ? 'is-on' : '' }}"
                    wire:click="$set('tab','{{ $key }}')">
                    {{ $label }} <span>{{ $counts[$key] }}</span>
                </button>
            @endforeach
        </div>

        <label class="plans-search">
            <i class="bi bi-search"></i>
            <input type="search" wire:model.live.debounce.300ms="search"
                placeholder="{{ __('Filter by name, speed, duration…') }}">
        </label>
    </div>

    {{-- ── Table ──────────────────────────────────────────────────── --}}
    <div class="plans-table-wrap">
        <table class="plans-table">
            <thead>
                <tr>
                    <th>{{ __('Plan') }}</th>
                    <th>{{ __('Type') }}</th>
                    <th class="ta-r">{{ __('Price') }}</th>
                    <th class="ta-r">{{ __('Subscribers') }}</th>
                    <th class="ta-r">{{ __('Revenue 30d') }}</th>
                    <th>{{ __('Status') }}</th>
                    <th aria-label="{{ __('Actions') }}"></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($rows as $plan)
                    @php
                        $subs = $usage['subscribers'][$plan->id] ?? 0;
                        $rev = (float) ($usage['revenue'][$plan->id] ?? 0);
                        $rate = $plan->mikrotik_rate_limit ?: $plan->speed;
                    @endphp
                    <tr wire:key="plan-{{ $plan->id }}" class="plans-row">
                        <td>
                            {{-- The whole cell is the link, so hitting the row
                                 anywhere in the name column opens the plan. --}}
                            <a class="plans-name" href="{{ route('plans.edit', $plan) }}" wire:navigate>
                                <span class="plans-name__t">
                                    {{ $plan->package }}
                                    @if ($plan->is_popular)
                                        <em class="plans-tag plans-tag--pop">{{ __('POPULAR') }}</em>
                                    @endif
                                    @if ($plan->is_on_offer)
                                        <em class="plans-tag plans-tag--offer">{{ __('OFFER') }}</em>
                                    @endif
                                </span>
                                <span class="plans-name__m">
                                    @if ($rate)<b>{{ $rate }}</b>@endif
                                    @if ($rate && $plan->durationShort()) &middot; @endif
                                    @if ($plan->durationShort()){{ $plan->durationShort() }}@endif
                                    @if ($plan->shared_users > 1)
                                        <em class="plans-devices">+{{ $plan->shared_users }} {{ __('devices') }}</em>
                                    @endif
                                    @if (! $plan->duration_seconds)
                                        {{-- Loud on purpose: a plan with no length gets no
                                             expiry and no cookie, which is how somebody
                                             stays online after their time is up. --}}
                                        <em class="plans-warn">{{ __('no duration set') }}</em>
                                    @endif
                                </span>
                            </a>
                        </td>
                        <td><span class="plans-type plans-type--{{ $plan->type }}">{{ Str::upper($plan->typeLabel()) }}</span></td>
                        <td class="ta-r plans-price">{{ __('Ksh') }} {{ number_format((float) $plan->price) }}</td>
                        <td class="ta-r">{{ $subs ?: '—' }}</td>
                        <td class="ta-r">{{ $rev > 0 ? __('Ksh').' '.number_format($rev) : '—' }}</td>
                        <td>
                            <span class="plans-status plans-status--{{ $plan->availability }}">
                                {{ Str::upper(\App\Models\PackageList::AVAILABILITY[$plan->availability] ?? $plan->availability) }}
                            </span>
                        </td>
                        <td class="ta-r">
                            <div class="dropdown">
                                <button class="plans-dots" data-bs-toggle="dropdown" data-bs-auto-close="true"
                                    aria-expanded="false" aria-label="{{ __('Actions for :plan', ['plan' => $plan->package]) }}">
                                    <i class="bi bi-three-dots"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end plans-menu">
                                    <li>
                                        <a class="dropdown-item" href="{{ route('plans.edit', $plan) }}" wire:navigate>
                                            {{ __('Edit') }}
                                        </a>
                                    </li>
                                    <li>
                                        <button class="dropdown-item" type="button"
                                            wire:click="toggleFlag({{ $plan->id }}, 'is_popular')">
                                            {{ $plan->is_popular ? __('Remove popular mark') : __('Mark popular') }}
                                        </button>
                                    </li>
                                    <li>
                                        <button class="dropdown-item" type="button"
                                            wire:click="toggleFlag({{ $plan->id }}, 'is_on_offer')">
                                            {{ $plan->is_on_offer ? __('Remove offer mark') : __('Mark on offer') }}
                                        </button>
                                    </li>
                                    <li>
                                        <button class="dropdown-item" type="button"
                                            wire:click="duplicate({{ $plan->id }})">{{ __('Duplicate') }}</button>
                                    </li>
                                    <li><hr class="dropdown-divider"></li>
                                    <li>
                                        <button class="dropdown-item" type="button"
                                            wire:click="toggleHidden({{ $plan->id }})">
                                            {{ $plan->availability === 'live' ? __('Hide') : __('Make live') }}
                                        </button>
                                    </li>
                                    <li>
                                        <button class="dropdown-item plans-menu__danger" type="button"
                                            wire:click="confirmDelete({{ $plan->id }})">{{ __('Delete') }}</button>
                                    </li>
                                </ul>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="7" class="plans-empty">
                            @if ($search !== '')
                                {{ __('Nothing matches ":term".', ['term' => $search]) }}
                            @elseif ($tab !== 'all')
                                {{ __('No :type plans yet.', ['type' => Str::lower(\App\Models\PackageList::TYPES[$tab] ?? $tab)]) }}
                            @else
                                {{ __('No packages yet — create your first one.') }}
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>

    {{-- ── Delete confirmation ────────────────────────────────────── --}}
    @if ($confirmingDelete)
        @php $doomed = $all->firstWhere('id', $confirmingDelete); @endphp
        <div class="plans-scrim" wire:click.self="$set('confirmingDelete', null)">
            <div class="plans-dialog">
                <h6>{{ __('Delete :plan?', ['plan' => $doomed?->package]) }}</h6>
                <p>{{ __('This cannot be undone. If anyone is still on this plan it will be withdrawn instead, so nobody loses what they paid for.') }}</p>
                <div class="plans-dialog__foot">
                    <button type="button" class="btn btn-sm btn-secondary"
                        wire:click="$set('confirmingDelete', null)">{{ __('Cancel') }}</button>
                    <button type="button" class="btn btn-sm btn-danger" wire:click="delete">{{ __('Delete') }}</button>
                </div>
            </div>
        </div>
    @endif
</div>