@php
    $admin = auth('admin')->user();
    $inSync = $server->applied_state_hash === $desiredHash;
@endphp

<x-layouts.admin :title="$server->name" :heading="$server->name">

    <div class="space-y-6">

        {{-- ============================================================ Header --}}
        <div class="zylo-panel p-6">
            <div class="flex flex-wrap items-start justify-between gap-4">
                <div>
                    <div class="flex items-center gap-3">
                        <h2 class="font-display text-xl font-semibold text-silver-100">{{ $server->name }}</h2>
                        <x-ui.badge :variant="$server->status->badge()" dot
                                    :pulse="$server->status === \App\Enums\ServerStatus::Online">
                            {{ $server->status->label() }}
                        </x-ui.badge>
                    </div>
                    <p class="mt-1 font-mono text-sm text-silver-400">{{ $server->endpoint() }}</p>
                    <p class="mt-0.5 text-xs text-silver-500">
                        {{ $server->location?->display_name }} · {{ $server->provider ?: 'Unknown provider' }}
                    </p>
                </div>

                <div class="flex flex-wrap gap-2">
                    @if ($admin->hasPermission('vpn_servers.update'))
                        <x-ui.button size="sm" variant="secondary"
                                     :href="route('admin.servers.edit', $server)">Edit</x-ui.button>

                        @foreach (\App\Enums\ServerStatus::adminAssignable() as $status)
                            @continue($status === $server->status)
                            <form method="POST" action="{{ route('admin.servers.status', $server) }}">
                                @csrf
                                @method('PATCH')
                                <input type="hidden" name="status" value="{{ $status->value }}">
                                <x-ui.button size="sm" variant="ghost" type="submit">
                                    Mark {{ $status->label() }}
                                </x-ui.button>
                            </form>
                        @endforeach
                    @endif
                </div>
            </div>
        </div>

        {{-- ============================================================= Stats --}}
        @php
            $stats = [
                ['Peers', $activePeers.' / '.$server->capacity, 'active / capacity'],
                ['Free addresses', number_format($freeAddresses), 'across active pools'],
                ['Last heartbeat', $server->last_heartbeat_at?->diffForHumans() ?? 'never',
                 $server->isHeartbeatFresh() ? 'healthy' : 'stale'],
                ['CPU / RAM',
                 ($server->cpu_usage !== null ? round($server->cpu_usage).'%' : '—').' / '
                    .($server->ram_usage !== null ? round($server->ram_usage).'%' : '—'),
                 'latest sample'],
            ];
        @endphp

        <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
            @foreach ($stats as [$label, $value, $meta])
                <div class="zylo-panel p-5">
                    <p class="text-xs font-medium uppercase tracking-wide text-silver-500">{{ $label }}</p>
                    <p class="mt-2 font-display text-2xl font-semibold text-silver-100">{{ $value }}</p>
                    <p class="mt-1 text-xs text-silver-400">{{ $meta }}</p>
                </div>
            @endforeach
        </div>

        {{-- ========================================================= Node sync --}}
        <x-ui.card title="Node synchronisation"
                   subtitle="What the agent has applied versus what it should have">
            <dl class="space-y-4 text-sm">
                <div class="flex flex-wrap items-center justify-between gap-3">
                    <dt class="text-silver-400">Sync state</dt>
                    <dd>
                        <x-ui.badge :variant="$inSync ? 'success' : 'warning'" dot>
                            {{ $inSync ? 'In sync' : 'Pending sync' }}
                        </x-ui.badge>
                    </dd>
                </div>

                <div>
                    <dt class="text-xs text-silver-500">Desired state hash</dt>
                    <dd class="mt-1 truncate font-mono text-xs text-silver-300">{{ $desiredHash }}</dd>
                </div>

                <div>
                    <dt class="text-xs text-silver-500">Applied state hash</dt>
                    <dd class="mt-1 truncate font-mono text-xs text-silver-300">
                        {{ $server->applied_state_hash ?? 'never reported' }}
                    </dd>
                </div>

                <div class="flex flex-wrap items-center justify-between gap-3">
                    <dt class="text-silver-400">Server public key</dt>
                    <dd class="font-mono text-xs text-silver-300">
                        {{ $server->public_key ?? 'awaiting first heartbeat' }}
                    </dd>
                </div>
            </dl>

            @unless ($inSync)
                <p class="mt-4 text-xs text-silver-500">
                    The agent picks changes up on its next poll (every
                    {{ config('zylovpn.node.poll_interval') }}s). A hash that stays stale means
                    the agent is not running or cannot reach this panel.
                </p>
            @endunless

            @if ($admin->hasPermission('vpn_servers.rotate_token'))
                <div class="zylo-divider my-5"></div>
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <div>
                        <p class="text-sm font-medium text-silver-200">Agent token</p>
                        <p class="mt-0.5 text-xs text-silver-500">
                            Only its hash is stored. Rotating invalidates the current token
                            immediately — the node stops syncing until you install the new one.
                            {{ $server->agent_token_rotated_at
                                ? 'Last rotated '.$server->agent_token_rotated_at->diffForHumans().'.'
                                : '' }}
                        </p>
                    </div>
                    <form method="POST" action="{{ route('admin.servers.rotate-token', $server) }}"
                          onsubmit="return confirm('Rotate the agent token? The node will stop syncing until updated.')">
                        @csrf
                        <x-ui.button size="sm" variant="secondary" type="submit">Rotate token</x-ui.button>
                    </form>
                </div>
            @endif
        </x-ui.card>

        {{-- ========================================================== IP pools --}}
        <x-ui.card title="IP pools" subtitle="Address ranges this node hands out" padding="p-0">
            <x-slot:actions>
                @if ($admin->hasPermission('ip_management.manage'))
                    <x-ui.button size="sm" :href="route('admin.servers.pools.create', $server)">
                        Add pool
                    </x-ui.button>
                @endif
            </x-slot:actions>

            @if ($server->ipPools->isEmpty())
                <x-ui.empty-state
                    title="No IP pools"
                    description="Without a pool this server cannot be assigned any peers, so it will never be selected."
                    icon="M4 7h16M4 12h16M4 17h16">
                    <x-slot:action>
                        @if ($admin->hasPermission('ip_management.manage'))
                            <x-ui.button :href="route('admin.servers.pools.create', $server)">Add pool</x-ui.button>
                        @endif
                    </x-slot:action>
                </x-ui.empty-state>
            @else
                <ul class="divide-y divide-line">
                    @foreach ($server->ipPools as $pool)
                        <li class="flex flex-wrap items-center gap-4 px-6 py-4">
                            <div class="min-w-0 flex-1">
                                <a href="{{ route('admin.servers.pools.show', [$server, $pool]) }}"
                                   class="font-mono text-sm font-medium text-silver-100 hover:text-electric-300">
                                    {{ $pool->cidr() }}
                                </a>
                                <p class="mt-0.5 text-xs text-silver-500">
                                    gateway {{ $pool->gateway }} ·
                                    {{ $pool->assigned_addresses }}/{{ $pool->total_addresses }} assigned
                                </p>
                            </div>

                            <div class="h-1.5 w-24 overflow-hidden rounded-full bg-abyss">
                                @php $pct = min(100, (int) round($pool->utilisation() * 100)); @endphp
                                <div class="h-full rounded-full {{ $pct >= 90 ? 'bg-danger' : 'bg-electric-500' }}"
                                     style="width: {{ $pct }}%"></div>
                            </div>

                            <x-ui.badge :variant="$pool->is_active ? 'success' : 'neutral'">
                                {{ $pool->is_active ? 'Active' : 'Draining' }}
                            </x-ui.badge>

                            @if ($admin->hasPermission('ip_management.manage'))
                                <form method="POST"
                                      action="{{ route('admin.servers.pools.toggle', [$server, $pool]) }}">
                                    @csrf
                                    @method('PATCH')
                                    <x-ui.button size="sm" variant="ghost" type="submit">
                                        {{ $pool->is_active ? 'Disable' : 'Enable' }}
                                    </x-ui.button>
                                </form>
                            @endif
                        </li>
                    @endforeach
                </ul>
            @endif
        </x-ui.card>

        {{-- ==================================================== Danger zone --}}
        @if ($admin->hasPermission('vpn_servers.delete'))
            <x-ui.card title="Remove server">
                <div class="flex flex-wrap items-center justify-between gap-4">
                    <p class="max-w-lg text-sm text-silver-400">
                        Removal is blocked while peers remain on this node. Put it in maintenance
                        first and let its peers rotate elsewhere.
                    </p>
                    <form method="POST" action="{{ route('admin.servers.destroy', $server) }}"
                          onsubmit="return confirm('Remove {{ $server->name }}?')">
                        @csrf
                        @method('DELETE')
                        <x-ui.button variant="danger" type="submit">Remove server</x-ui.button>
                    </form>
                </div>
            </x-ui.card>
        @endif
    </div>

</x-layouts.admin>