@php
    $stats = $this->stats;
    $counts = $this->counts;
    $rows = $this->rows;
@endphp

<div class="subs">
    {{-- ── Header ─────────────────────────────────────────────────── --}}
    <div class="subs-head">
        <div>
            <h1 class="subs-title">
                {{ __('Your') }} <em>{{ __('subscribers.') }}</em>
            </h1>
            <p class="subs-lead">
                <strong>{{ number_format($stats['all']) }} {{ __('users') }}</strong> {{ __('on the network') }}
                @if ($stats['at_risk'] > 0)
                    · <strong class="subs-risk">{{ number_format($stats['at_risk']) }} {{ __('at risk') }}</strong>
                    {{ __('of not renewing.') }}
                @endif
            </p>
        </div>

        <div class="subs-head__actions">
            <a href="{{ route('new-customer') }}" class="subs-btn subs-btn--primary">
                <i class="bi bi-plus-lg"></i>{{ __('Add user') }}
            </a>
        </div>
    </div>

    @if ($flash)
        <div class="alert alert-info border-0 rounded-3 py-2 small d-flex align-items-center gap-2">
            <i class="bi bi-info-circle"></i>{{ $flash }}
        </div>
    @endif

    {{-- ── Stat strip ─────────────────────────────────────────────── --}}
    <div class="subs-stats">
        <div class="subs-stat">
            <span class="subs-stat__label">{{ __('All users') }}</span>
            <span class="subs-stat__value">{{ number_format($stats['all']) }}</span>
            <span class="subs-stat__sub">{{ __('across the network') }}</span>
        </div>
        <div class="subs-stat">
            <span class="subs-stat__label">{{ __('Expiring in 7 days') }}</span>
            <span class="subs-stat__value">{{ number_format($stats['expiring']) }}</span>
            <span class="subs-stat__sub">{{ __('subscriptions ending in the next week') }}</span>
        </div>
        <div class="subs-stat">
            <span class="subs-stat__label">{{ __('Online') }}</span>
            <span class="subs-stat__value">{{ number_format($stats['online']) }}</span>
            <span class="subs-stat__sub">{{ $stats['online_share'] }}% · {{ __('connected right now') }}</span>
        </div>
        <div class="subs-stat">
            <span class="subs-stat__label">{{ __('New this week') }}</span>
            <span class="subs-stat__value">{{ number_format($stats['new_week']) }}</span>
            <span class="subs-stat__sub">{{ __('first joined in last 7 days') }}</span>
        </div>
        <div class="subs-stat">
            <span class="subs-stat__label">{{ __('At risk') }}</span>
            <span class="subs-stat__value subs-stat__value--risk">{{ number_format($stats['at_risk']) }}</span>
            <span class="subs-stat__sub">{{ __('no session in 30+ days') }}</span>
        </div>
    </div>

    {{-- ── Tabs and tools ─────────────────────────────────────────── --}}
    <div class="subs-toolbar">
        <div class="subs-pills">
            @foreach ([
                'all' => [__('All'), $counts['all']],
                'hotspot' => [__('Hotspot'), $counts['hotspot']],
                'pppoe' => [__('PPPoE'), $counts['pppoe']],
                'bindings' => [__('Bindings'), $counts['bindings']],
            ] as $key => [$label, $count])
                <button type="button" class="subs-pill {{ $tab === $key ? 'is-active' : '' }}"
                    wire:click="setTab('{{ $key }}')">
                    {{ $label }}
                    @if ($count !== null)
                        <span>{{ number_format($count) }}</span>
                    @endif
                </button>
            @endforeach
        </div>

        <div class="subs-tools">
            <button type="button" class="subs-icon-btn {{ $status ? 'is-on' : '' }}"
                wire:click="$toggle('showFilters')" title="{{ __('Filter') }}">
                <i class="bi bi-funnel"></i>
            </button>

            <div class="dropdown">
                <button type="button" class="subs-icon-btn" data-bs-toggle="dropdown"
                    title="{{ __('Sort') }}">
                    <i class="bi bi-arrow-down-up"></i>
                </button>
                <ul class="dropdown-menu dropdown-menu-end">
                    @foreach (\App\Livewire\Subscribers\Index::SORTS as $key => $label)
                        <li>
                            <button type="button" class="dropdown-item small {{ $sort === $key ? 'active' : '' }}"
                                wire:click="setSort('{{ $key }}')">{{ __($label) }}</button>
                        </li>
                    @endforeach
                </ul>
            </div>

            <div class="subs-search">
                <i class="bi bi-search"></i>
                <input type="search" wire:model.live.debounce.300ms="search"
                    placeholder="{{ __('Search name, email, phone, MAC...') }}">
            </div>
        </div>
    </div>

    @if ($showFilters)
        <div class="subs-filters">
            <span class="text-secondary small">{{ __('Sorted by') }}
                <strong>{{ __(\App\Livewire\Subscribers\Index::SORTS[$sort]) }}</strong>
            </span>
            <button type="button" class="btn btn-sm btn-link p-0 ms-2" wire:click="clearFilters">
                {{ __('Clear') }}
            </button>
        </div>
    @endif

    {{-- ── Table ──────────────────────────────────────────────────── --}}
    <div class="subs-table-wrap">
        <table class="subs-table">
            <thead>
                <tr>
                    <th class="subs-table__check"></th>
                    <th>{{ __('Contact') }}</th>
                    <th>{{ __('Phone & email') }}</th>
                    <th>{{ __('Plan') }}</th>
                    <th>{{ __('Expiry') }}</th>
                    <th>{{ __('Last online') }}</th>
                    <th>{{ __('NAS') }}</th>
                    <th class="subs-table__end"></th>
                </tr>
            </thead>
            <tbody>
                @forelse ($rows as $row)
                    @php
                        $initials = strtoupper(mb_substr(preg_replace('/[^A-Za-z0-9]/', '', (string) $row->label) ?: '?', 0, 2));
                        // A stable colour per subscriber, so the same person
                        // keeps the same dot every time you open the page.
                        $hue = crc32((string) $row->key) % 360;
                    @endphp
                    {{-- The whole row opens the profile. The click is forwarded
                         to the real link rather than setting window.location, so
                         wire:navigate still applies and the page swaps rather
                         than reloads.

                         Anything already interactive is left alone — the
                         checkbox, the row menu, the name itself — otherwise
                         ticking a box or opening the menu would navigate away
                         underneath you. A drag that selected text is not a
                         click either. --}}
                    <tr class="subs-row {{ $row->url ? 'is-clickable' : '' }}"
                        wire:key="row-{{ $row->type }}-{{ $row->key }}"
                        @if ($row->url)
                            x-data
                            x-on:click="
                                if ($event.target.closest('a, button, input, label, .dropdown')) return;
                                if (window.getSelection().toString() !== '') return;
                                $el.querySelector('[data-row-link]').click();
                            "
                        @endif>
                        <td class="subs-table__check">
                            <input type="checkbox" class="form-check-input" value="{{ $row->key }}"
                                wire:model="selected">
                        </td>

                        <td>
                            <div class="subs-contact"
                                x-data="{
                                    open: false,
                                    x: 0,
                                    y: 0,
                                    place() {
                                        const r = $el.getBoundingClientRect();
                                        const card = 300;
                                        this.x = Math.min(r.left, window.innerWidth - 330);
                                        // Flip above the row when there is not
                                        // room below, so the card is never half
                                        // off the bottom of the window.
                                        this.y = (r.bottom + card > window.innerHeight)
                                            ? Math.max(8, r.top - card - 8)
                                            : r.bottom + 8;
                                        this.open = true;
                                    }
                                }"
                                x-on:mouseenter="place()"
                                x-on:mouseleave="open = false">
                                <span class="subs-avatar" style="background: hsl({{ $hue }} 62% 46%);">
                                    {{ $initials }}
                                </span>
                                <span class="subs-contact__name">
                                    @if ($row->url)
                                        <a href="{{ $row->url }}" wire:navigate data-row-link>{{ $row->label }}</a>
                                    @else
                                        {{ $row->label }}
                                    @endif
                                </span>

                                {{-- Hover card: enough to answer "who is this"
                                     without leaving the list. Teleported to
                                     the body so the table's own scrollbox
                                     cannot clip it. --}}
                                <template x-teleport="body">
                                <div class="subs-peek" x-show="open" x-cloak x-transition.opacity.duration.120ms
                                    :style="`left:${x}px; top:${y}px;`">
                                    <div class="subs-peek__head">
                                        <span class="subs-avatar" style="background: hsl({{ $hue }} 62% 46%);">
                                            {{ $initials }}
                                        </span>
                                        <span class="subs-peek__name">{{ $row->label }}</span>
                                        @if ($row->first_seen && $row->first_seen->gt(now()->subWeek()))
                                            <span class="subs-chip subs-chip--new">{{ __('New') }}</span>
                                        @endif
                                    </div>
                                    <dl class="subs-peek__facts">
                                        <div>
                                            <dt>{{ __('Connection') }}</dt>
                                            <dd class="{{ $row->is_live ? 'is-live' : '' }}">
                                                {{ $row->is_live ? __('Online now') : __('Offline') }}
                                            </dd>
                                        </div>
                                        <div>
                                            <dt>{{ __('Plan') }}</dt>
                                            <dd>{{ $row->plan ?: '—' }}</dd>
                                        </div>
                                        <div>
                                            <dt>{{ __('Expiry') }}</dt>
                                            <dd>
                                                @if ($row->expires_at)
                                                    {{ $row->expires_at->isToday() ? __('Expires today') : $row->expires_at->format('d M Y') }}
                                                    <span>{{ $row->expires_at->format('H:i') }}</span>
                                                @else
                                                    —
                                                @endif
                                            </dd>
                                        </div>
                                        <div>
                                            <dt>{{ __('Lifetime spend') }}</dt>
                                            <dd>{{ money($row->spent, 2) }}</dd>
                                        </div>
                                        <div>
                                            <dt>{{ __('Router') }}</dt>
                                            <dd>{{ $row->router ?: '—' }}</dd>
                                        </div>
                                        <div>
                                            <dt>{{ __('Type') }}</dt>
                                            <dd>{{ ucfirst($row->type) }}</dd>
                                        </div>
                                    </dl>
                                    @if ($row->url)
                                        <div class="subs-peek__foot">{{ __('Click to open profile') }}</div>
                                    @endif
                                </div>
                                </template>
                            </div>
                        </td>

                        <td class="subs-muted">
                            {{ $row->phone ?: ($row->mac ?: '—') }}
                            @if ($row->email)
                                <span class="subs-sub">{{ $row->email }}</span>
                            @endif
                        </td>

                        <td>
                            <span class="subs-strong">{{ $row->plan ?: '—' }}</span>
                            @if ($row->plan_price)
                                <span class="subs-sub">{{ money($row->plan_price, 0) }}</span>
                            @elseif ($row->purchases)
                                <span class="subs-sub">
                                    {{ trans_choice(':count purchase|:count purchases', $row->purchases, ['count' => $row->purchases]) }}
                                    · {{ money($row->spent, 0) }}
                                </span>
                            @endif
                        </td>

                        <td>
                            @if ($row->expires_at)
                                <span class="subs-strong {{ $row->expires_at->isPast() ? 'is-over' : '' }}">
                                    @if ($row->expires_at->isPast())
                                        {{ __('Expired') }}
                                    @elseif ($row->expires_at->isToday())
                                        {{ __('Expires today') }}
                                    @else
                                        {{ $row->expires_at->format('d M Y') }}
                                    @endif
                                </span>
                                <span class="subs-sub">{{ $row->expires_at->format('H:i') }}</span>
                            @else
                                <span class="subs-muted">—</span>
                            @endif
                        </td>

                        <td>
                            @if ($row->is_live)
                                <span class="subs-chip subs-chip--online">{{ __('Online') }}</span>
                            @elseif ($seen = $this->lastSeen[$row->key] ?? null)
                                @php $seenAt = \Carbon\Carbon::parse($seen); @endphp
                                <span class="subs-strong">
                                    {{ $seenAt->isToday() ? __('Today') : $seenAt->format('d M Y') }}
                                </span>
                                <span class="subs-sub">{{ $seenAt->format('H:i') }}</span>
                            @else
                                <span class="subs-muted">{{ __('Never') }}</span>
                            @endif
                        </td>

                        <td class="subs-muted">{{ $row->router ?: '—' }}</td>

                        <td class="subs-table__end">
                            <div class="dropdown">
                                <button type="button" class="subs-dots" data-bs-toggle="dropdown"
                                    aria-expanded="false">
                                    <i class="bi bi-three-dots"></i>
                                </button>
                                <ul class="dropdown-menu dropdown-menu-end">
                                    @if ($row->url)
                                        <li>
                                            <a class="dropdown-item small" href="{{ $row->url }}" wire:navigate>
                                                {{ __('View') }}
                                            </a>
                                        </li>
                                        <li>
                                            <a class="dropdown-item small"
                                                href="{{ $row->type === 'hotspot' ? $row->url.'?tab=overview' : $row->url }}"
                                                wire:navigate>{{ __('Edit') }}</a>
                                        </li>
                                    @endif
                                    @if ($row->type === 'hotspot')
                                        <li><hr class="dropdown-divider"></li>
                                        <li>
                                            <button type="button" class="dropdown-item small text-danger"
                                                wire:click="deleteSubscriber('{{ $row->key }}')"
                                                wire:confirm="{{ __('Delete :who? Their history goes and their login is revoked on the router.', ['who' => $row->label]) }}">
                                                {{ __('Delete') }}
                                            </button>
                                        </li>
                                    @endif
                                </ul>
                            </div>
                        </td>
                    </tr>
                @empty
                    <tr>
                        <td colspan="8" class="subs-empty">
                            @if ($tab === 'bindings')
                                <i class="bi bi-hdd-network"></i>
                                {{ __('No IP bindings on your routers. These are MAC addresses let through without paying — you add them on the MikroTik.') }}
                            @elseif ($search !== '')
                                <i class="bi bi-search"></i>
                                {{ __('Nothing matches ":term".', ['term' => $search]) }}
                            @else
                                <i class="bi bi-people"></i>
                                {{ __('Nobody here yet.') }}
                            @endif
                        </td>
                    </tr>
                @endforelse
            </tbody>
        </table>
    </div>
</div>