{{-- Polling pauses while a config is on screen: every poll re-renders this
     page, and that would put the private key into an HTTP response every five
     seconds. Traffic figures can wait the minute someone needs to copy a key. --}}
<div class="space-y-5" @if (! $newConfig) wire:poll.5s="refreshPeers" @endif>
    <div class="animate-rise">
        <h1 class="text-2xl font-bold tracking-tight text-ink">{{ __('vpn.title') }}</h1>
        <p class="mt-1 text-sm text-muted">{{ __('vpn.subtitle') }}</p>
    </div>

    @if ($hubEndpoint === '' || $hubPublicKey === '')
        <div class="flex items-start gap-3 rounded-lg border border-warning-border bg-warning-bg p-4 animate-rise">
            <x-ui.icon name="alert-triangle" class="mt-0.5 size-5 shrink-0 text-warning" />
            <div class="text-sm">
                <p class="font-medium text-ink">{{ __('vpn.hub_incomplete_title') }}</p>
                <p class="mt-0.5 text-muted">{{ __('vpn.hub_incomplete_body') }}</p>
            </div>
        </div>
    @endif

    {{-- Shown once. The private key exists only in this response; a reload loses it. --}}
    @if ($newConfig)
        <div class="rounded-lg border border-accent-border bg-accent-bg p-5 animate-rise">
            <div class="flex items-start justify-between gap-4">
                <div>
                    <h2 class="font-semibold text-ink">{{ __('vpn.config_ready', ['name' => $newConfigName]) }}</h2>
                    <p class="mt-0.5 text-sm text-muted">{{ __('vpn.config_once') }}</p>
                </div>
                <button type="button" wire:click="dismissConfig" aria-label="{{ __('common.close') }}"
                        class="grid size-8 shrink-0 place-items-center rounded-md border border-line text-muted hover:text-ink">
                    <x-ui.icon name="x" class="size-4" />
                </button>
            </div>
            <div class="mt-3" x-data="vpnConfigActions(@js($this->configFilename()))">
                <pre x-ref="config" class="max-h-64 overflow-auto rounded-lg border border-line bg-surface p-4 font-mono text-xs leading-relaxed text-body">{{ $newConfig }}</pre>
                <div class="mt-3 flex flex-wrap items-center gap-2">
                    <x-ui.button variant="primary" x-on:click="download()">
                        <x-ui.icon name="download" class="size-4" />{{ __('vpn.download') }}
                    </x-ui.button>
                    <x-ui.button variant="secondary" x-on:click="copy()">
                        <x-ui.icon name="copy" class="size-4" />
                        <span x-text="copied ? @js(__('vpn.copied')) : @js(__('vpn.copy'))"></span>
                    </x-ui.button>
                    <x-ui.button variant="secondary" wire:click="toggleQr" wire:loading.attr="disabled">
                        <x-ui.icon name="qr-code" class="size-4" />
                        {{ $showQr ? __('vpn.qr_hide') : __('vpn.qr_show') }}
                    </x-ui.button>
                    {{-- Only surfaces when copying is impossible (no clipboard API
                         outside a secure context) — silence would look like a dead button. --}}
                    <p x-show="failed" x-cloak class="text-xs text-danger">{{ __('vpn.copy_failed') }}</p>
                </div>

                @if ($qrSvg)
                    <div class="mt-4 flex flex-col items-center gap-2 rounded-lg border border-line bg-surface p-4">
                        <div class="[&>svg]:rounded [&>svg]:shadow-xs">{!! $qrSvg !!}</div>
                        <p class="text-xs text-muted">{{ __('vpn.qr_hint') }}</p>
                    </div>
                @endif
            </div>
        </div>
    @endif

    <div class="grid grid-cols-1 gap-5 lg:grid-cols-[1fr_320px] lg:items-start">
        {{-- Peer list --}}
        <div class="overflow-hidden rounded-lg border border-line bg-surface shadow-xs animate-rise [animation-delay:60ms]">
            <div class="flex items-center justify-between border-b border-line px-4 py-3">
                <h2 class="text-sm font-semibold text-ink">{{ __('vpn.peers') }}</h2>
                <span class="text-xs text-muted">
                    {{ $lastSync ? __('vpn.last_sync', ['time' => \Illuminate\Support\Carbon::parse($lastSync)->diffForHumans()]) : __('vpn.never_synced') }}
                </span>
            </div>

            @if ($peers->isEmpty())
                <p class="p-8 text-center text-sm text-muted">{{ __('vpn.empty') }}</p>
            @else
                {{-- Zwei Gruppen, nicht eine Liste.

                     Personen und Hosts standen gemischt untereinander, nach
                     Verbindungszustand sortiert — ein Host-Zugang konnte also
                     zwischen zwei Mitarbeitern stehen. Beide sind Peers im
                     selben Netz und haben dieselben Messwerte, aber es sind
                     zwei verschiedene Fragen: „wer von uns ist im Netz" und
                     „welche Maschinen hängen dran". Wer die eine stellt, liest
                     die Antworten der anderen als Rauschen.

                     Eine Gruppe ohne Einträge wird gar nicht erst gezeichnet:
                     eine leere Überschrift ist eine Aussage über nichts. --}}
                @foreach ([
                    ['title' => __('vpn.group_people'), 'peers' => $peopleAccesses],
                    ['title' => __('vpn.group_hosts'), 'peers' => $hostAccesses],
                ] as $group)
                    @continue($group['peers']->isEmpty())

                    <div class="flex items-baseline justify-between gap-3 border-b border-line bg-surface-2 px-4 py-2">
                        <h3 class="text-xs font-semibold uppercase tracking-wide text-muted">{{ $group['title'] }}</h3>
                        <span class="font-mono text-xs text-faint">{{ $group['peers']->count() }}</span>
                    </div>

                    <ul class="divide-y divide-line">
                        @foreach ($group['peers'] as $peer)
                            <x-admin.vpn-peer-row :peer="$peer" />
                        @endforeach
                    </ul>
                @endforeach
            @endif
        </div>

        <div class="space-y-5">
            {{-- New access --}}
            @if ($canManage)
                <form wire:submit="create" class="space-y-4 rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:120ms]">
                    <h2 class="font-semibold text-ink">{{ __('vpn.add') }}</h2>
                    <x-ui.input name="name" wire:model="name" :label="__('vpn.name')" placeholder="Notebook Boban" />

                    <div>
                        <label class="text-sm font-medium text-body" for="vpn-owner">{{ __('vpn.owner') }}</label>
                        <select id="vpn-owner" wire:model="ownerId" class="mt-1.5 w-full rounded-md border border-line-strong bg-surface px-3 py-2 text-sm text-body">
                            @foreach ($operators as $operator)
                                <option value="{{ $operator->id }}">{{ $operator->name }} ({{ $operator->email }})</option>
                            @endforeach
                        </select>
                        <p class="mt-1 text-xs text-muted">{{ __('vpn.owner_hint') }}</p>
                        @error('ownerId') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
                    </div>

                    <x-ui.input name="publicKey" wire:model="publicKey" :label="__('vpn.own_key')" :hint="__('vpn.own_key_hint')" placeholder="{{ __('vpn.own_key_placeholder') }}" />

                    <div>
                        <label class="flex items-start gap-2 text-sm text-body">
                            <input type="checkbox" wire:model="storeConfig" @disabled(! $vaultAvailable)
                                   class="mt-0.5 size-4 rounded border-line-strong text-accent focus:ring-accent">
                            <span>
                                {{ __('vpn.store_config') }}
                                <span class="mt-0.5 block text-xs text-muted">
                                    {{ $vaultAvailable ? __('vpn.store_config_hint') : __('vpn.vault_unavailable') }}
                                </span>
                            </span>
                        </label>
                        @error('storeConfig') <p class="mt-1 text-xs text-danger">{{ $message }}</p> @enderror
                    </div>

                    <x-ui.button variant="primary" type="submit" class="w-full">
                        <x-ui.icon name="plus" class="size-4" />{{ __('vpn.add') }}
                    </x-ui.button>
                </form>
            @endif

            {{-- Hub facts an operator needs when configuring a peer by hand --}}
            <div class="space-y-3 rounded-lg border border-line bg-surface p-5 shadow-xs animate-rise [animation-delay:180ms]">
                <h2 class="font-semibold text-ink">{{ __('vpn.hub') }}</h2>
                <div>
                    <div class="text-xs font-semibold text-muted">{{ __('vpn.endpoint') }}</div>
                    <div class="mt-0.5 break-all font-mono text-xs text-body">{{ $hubEndpoint ?: '—' }}</div>
                </div>
                <div>
                    <div class="text-xs font-semibold text-muted">{{ __('vpn.hub_key') }}</div>
                    <div class="mt-0.5 break-all font-mono text-xs text-body">{{ $hubPublicKey ?: '—' }}</div>
                </div>
                <div>
                    <div class="text-xs font-semibold text-muted">{{ __('vpn.subnet') }}</div>
                    <div class="mt-0.5 font-mono text-xs text-body">{{ config('provisioning.wireguard.subnet') }}</div>
                </div>
            </div>
        </div>
    </div>
</div>