@php
    $current = $this->current;
    $stats = $this->stats;
    $live = $this->liveConnection;

    $label = $current?->username ?: $handle;
    $initials = strtoupper(mb_substr(preg_replace('/[^A-Za-z0-9]/', '', $label) ?: '?', 0, 2));
    $hue = crc32($handle) % 360;

    $counts = [
        'sessions' => $this->connections->count(),
        'payments' => $this->sessions->where('amount', '>', 0)->count(),
        'packages' => $this->sessions->whereNotNull('package_id')->count(),
        'sms' => $this->messages->count(),
        'tickets' => $this->tickets->count(),
        'devices' => $this->devices->count(),
        'notes' => $this->notes->count(),
    ];
@endphp

<div class="sub">
    {{-- ── Header ─────────────────────────────────────────────────── --}}
    <div class="sub-top">
        <div>
            <div class="subs-crumb">
                <a href="{{ route('subscribers.index') }}" wire:navigate
                    class="text-reset text-decoration-none">{{ __('Subscribers') }}</a>
                <span>—</span> #{{ $current?->id }}
            </div>

            <div class="sub-identity">
                <span class="sub-avatar" style="background: hsl({{ $hue }} 62% 46%);">{{ $initials }}</span>
                <div>
                    <div class="sub-badges">
                        <span class="sub-badge">&#64;{{ $current?->username ?: $handle }}</span>

                        @if ($stats['is_live'])
                            <span class="sub-badge sub-badge--live">
                                <i class="bi bi-broadcast"></i>{{ __('Online') }}
                                @if ($stats['live_since'])
                                    · {{ $stats['live_since']->diffForHumans(null, true, true) }}
                                @endif
                            </span>
                        @elseif ($stats['blocked'])
                            <span class="sub-badge" style="color:#e5484d;">{{ __('Blocked') }}</span>
                        @elseif ($stats['paused'])
                            <span class="sub-badge" style="color:#f5a524;">{{ __('Paused') }}</span>
                        @endif

                        @if ($current?->router)
                            <span class="sub-badge">{{ $current->router->router_name }}</span>
                        @endif

                        <span class="sub-badge">{{ bytes_human($stats['bytes_month']) }} {{ __('this month') }}</span>
                        <span class="sub-badge"><i class="bi bi-wifi"></i>{{ __('Hotspot') }}</span>

                        @if ($current?->package)
                            {{-- Clickable: the plan is the thing an operator
                                 most often needs to check while looking at
                                 somebody, and sending them to the Plans page
                                 to find it loses their place. --}}
                            <button type="button" class="sub-badge sub-badge--action"
                                wire:click="$toggle('showPackage')"
                                title="{{ __('See what this plan includes') }}">
                                <i class="bi bi-box2"></i>{{ $current->package->package }}
                                <i class="bi bi-chevron-down" style="font-size:0.6rem; opacity:0.6;"></i>
                            </button>
                        @endif
                    </div>

                    <div class="sub-meta">
                        @if ($current?->phone)
                            <span><i class="bi bi-telephone"></i>{{ $current->phone }}</span>
                        @endif
                        @if ($stats['first_seen'])
                            <span><i class="bi bi-calendar3"></i>{{ __('Member since :when', ['when' => $stats['first_seen']->format('M j, Y')]) }}</span>
                        @endif
                    </div>
                </div>
            </div>
        </div>

        {{-- ── Actions ────────────────────────────────────────────── --}}
        <div class="subs-head__actions">
            <button type="button" class="subs-btn" wire:click="$toggle('showSms')">
                <i class="bi bi-chat-dots"></i>{{ __('SMS') }}
            </button>

            <button type="button" class="subs-icon-btn" wire:click="$toggle('showEdit')"
                title="{{ __('Edit') }}">
                <i class="bi bi-pencil"></i>
            </button>

            <button type="button" class="subs-btn subs-btn--primary" wire:click="$toggle('showExpiry')">
                <i class="bi bi-calendar-event"></i>{{ __('Change expiry') }}
            </button>

            <div class="dropdown">
                <button type="button" class="subs-icon-btn" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="bi bi-three-dots"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    <li>
                        <button type="button" class="dropdown-item small" wire:click="resendCredentials"
                            wire:loading.attr="disabled" wire:target="resendCredentials">
                            <i class="bi bi-send me-2"></i>{{ __('Send credentials') }}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item small" wire:click="sendVoucher"
                            wire:loading.attr="disabled" wire:target="sendVoucher">
                            <i class="bi bi-ticket-perforated me-2"></i>{{ __('Send voucher') }}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item small" wire:click="togglePause"
                            wire:confirm="{{ $stats['paused']
                                ? __('Resume, handing back the time they had left?')
                                : __('Pause? They lose access but keep the time they paid for.') }}">
                            <i class="bi bi-pause-btn me-2"></i>
                            {{ $stats['paused'] ? __('Resume subscription') : __('Pause subscription') }}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item small {{ $stats['blocked'] ? '' : 'text-danger' }}"
                            wire:click="toggleBlock"
                            wire:confirm="{{ $stats['blocked']
                                ? __('Let this subscriber back on?')
                                : __('Block? They are dropped now and cannot reconnect.') }}">
                            <i class="bi bi-slash-circle me-2"></i>
                            {{ $stats['blocked'] ? __('Unblock subscriber') : __('Block subscriber') }}
                        </button>
                    </li>
                    <li>
                        <button type="button" class="dropdown-item small" wire:click="$toggle('showCompensate')">
                            <i class="bi bi-gift me-2"></i>{{ __('Compensate') }}
                        </button>
                    </li>
                    <li><hr class="dropdown-divider"></li>
                    <li>
                        <button type="button" class="dropdown-item small text-danger" wire:click="deleteSubscriber"
                            wire:confirm="{{ __('Delete this subscriber? Their history goes and their login is revoked on the router. This cannot be undone.') }}">
                            <i class="bi bi-trash me-2"></i>{{ __('Delete user') }}
                        </button>
                    </li>
                </ul>
            </div>
        </div>
    </div>

    @if ($flash)
        <div class="alert alert-{{ $flashOk ? 'success' : 'danger' }} border-0 rounded-3 py-2 small d-flex align-items-center gap-2">
            <i class="bi bi-{{ $flashOk ? 'check-circle' : 'exclamation-triangle' }}"></i>{{ $flash }}
        </div>
    @endif

    @include('livewire.subscribers.partials.panels')

    {{-- ── Summary cards ──────────────────────────────────────────── --}}
    <div class="sub-cards">
        <div class="sub-card">
            <span class="sub-card__label">{{ __('Subscription') }}</span>
            <span class="sub-card__value {{ $stats['expires_at']?->isFuture() ? 'sub-card__value--good' : '' }}">
                @if ($stats['expires_at']?->isFuture())
                    {{ $stats['expires_at']->diffForHumans(null, true, true) }}
                @else
                    {{ __('Expired') }}
                @endif
            </span>
            <span class="sub-card__sub">
                {{ $stats['expires_at']
                    ? __('expires :when', ['when' => $stats['expires_at']->format('M j, Y, g:i A')])
                    : __('no active package') }}
            </span>
        </div>

        <div class="sub-card">
            <span class="sub-card__label">{{ __('Last session') }}</span>
            <span class="sub-card__value {{ $stats['is_live'] ? 'sub-card__value--good' : '' }}">
                {{ $stats['is_live'] ? __('Online') : ($stats['last_seen'] ? $stats['last_seen']->diffForHumans(null, true) : __('Never')) }}
            </span>
            <span class="sub-card__sub">
                @if ($stats['is_live'] && $stats['live_since'])
                    {{ __('Live · :for', ['for' => $stats['live_since']->diffForHumans(null, true, true)]) }}
                @elseif ($stats['last_seen'])
                    {{ $stats['last_seen']->format('M j, g:i A') }}
                @else
                    {{ __('has never connected') }}
                @endif
            </span>
        </div>

        <div class="sub-card">
            <span class="sub-card__label">{{ __('Lifetime value') }}</span>
            <span class="sub-card__value">
                {{ money($stats['spent'], 0) }}
                @if ($stats['spent_month'] > 0)
                    <i class="bi bi-arrow-up" style="font-size:0.8rem; color:#21d07a;"></i>
                @endif
            </span>
            <span class="sub-card__sub">{{ money($stats['spent_month'], 0) }} {{ __('this month') }}</span>
        </div>

        <div class="sub-card">
            <span class="sub-card__label">{{ __('Data used') }}</span>
            <span class="sub-card__value">{{ bytes_human($stats['bytes_month']) }}</span>
            <span class="sub-card__sub">{{ bytes_human($stats['bytes_total']) }} {{ __('all time') }}</span>
        </div>
    </div>

    {{-- ── Tabs ───────────────────────────────────────────────────── --}}
    <div class="sub-tabs">
        @foreach ([
            'overview' => __('Overview'),
            'reports' => __('Reports'),
            'sessions' => __('Sessions'),
            'payments' => __('Payments'),
            'packages' => __('Package history'),
            'sms' => __('SMS'),
            'tickets' => __('Tickets'),
            'devices' => __('Devices'),
            'notes' => __('Notes'),
        ] as $key => $title)
            <button type="button" class="sub-tab {{ $tab === $key ? 'is-active' : '' }}"
                wire:click="setTab('{{ $key }}')">
                {{ $title }}
                @isset($counts[$key])
                    <span>{{ $counts[$key] }}</span>
                @endisset
            </button>
        @endforeach
    </div>

    @include('livewire.subscribers.tabs.'.$tab)
</div>