@php
    $statusChip = [
        'active' => 'bg-green-500/15 text-green-400',
        'registered' => 'bg-blue-500/15 text-blue-400',
        'inactive' => 'bg-yellow-500/15 text-yellow-400',
        'blocked' => 'bg-red-500/15 text-red-400',
        'removed' => 'bg-slate-500/15 text-slate-400',
        'transferred' => 'bg-indigo-500/15 text-indigo-300',
        'deactivated' => 'bg-slate-500/15 text-slate-400',
    ];
@endphp

<div>
    <nav class="mb-2 flex items-center gap-1.5 text-xs text-slate-500">
        <a href="{{ route('admin.dashboard') }}" wire:navigate class="hover:text-slate-300">Dashboard</a><x-lucide-chevron-right class="h-3.5 w-3.5" />
        <span class="text-slate-300">Device Management</span>
    </nav>
    <x-admin.page-head title="Device Management" subtitle="One desktop device per account. Reset or force-logout to transfer a license — the desktop reacts within 30 seconds." />

    <div class="grid gap-4 sm:grid-cols-2 xl:grid-cols-4">
        <x-admin.stat icon="monitor-smartphone" label="Active Devices" :value="number_format($analytics['total_active'])" tint="#7c3aed" />
        <x-admin.stat icon="wifi" label="Online Now" :value="number_format($analytics['online'])" tint="#22c55e" :sub="$analytics['offline'].' offline'" />
        <x-admin.stat icon="ban" label="Blocked / Inactive" :value="number_format($analytics['blocked'])" tint="#ef4444" />
        <x-admin.stat icon="shield-alert" label="Failed Logins (24h)" :value="number_format($analytics['failed_logins_24h'])" tint="#f59e0b" :sub="$analytics['waiting_heartbeat'].' awaiting heartbeat'" />
    </div>

    <x-admin.card class="mt-5">
        <div class="mb-4 flex flex-wrap items-center gap-3">
            <label class="flex h-10 flex-1 items-center gap-2 rounded-xl border border-edge bg-ink px-3">
                <x-lucide-search class="h-4 w-4 text-slate-500" />
                <input wire:model.live.debounce.300ms="search" placeholder="Search user, email or computer…" class="w-full border-0 bg-transparent p-0 text-sm text-slate-200 placeholder:text-slate-500 focus:ring-0">
            </label>
            <select wire:model.live="status" class="h-10 rounded-xl border-edge bg-ink text-sm text-slate-200 focus:border-brand focus:ring-brand/30">
                <option value="">All statuses</option>
                @foreach (['active', 'registered', 'inactive', 'blocked', 'removed', 'transferred'] as $s)<option value="{{ $s }}">{{ ucfirst($s) }}</option>@endforeach
            </select>
        </div>

        <div class="overflow-x-auto">
            <table class="w-full text-sm">
                <thead>
                    <tr class="border-b border-edge text-left text-xs uppercase tracking-wide text-slate-500">
                        <th class="px-3 py-2.5">User</th>
                        <th class="px-3 py-2.5">Computer</th>
                        <th class="px-3 py-2.5">OS / App</th>
                        <th class="px-3 py-2.5">Location / IP</th>
                        <th class="px-3 py-2.5">Last Heartbeat</th>
                        <th class="px-3 py-2.5">Status</th>
                        <th class="px-3 py-2.5 text-right">Actions</th>
                    </tr>
                </thead>
                <tbody>
                    @forelse ($devices as $d)
                        <tr class="border-b border-edge/60 hover:bg-raised/50">
                            <td class="px-3 py-3">
                                <div class="text-slate-200">{{ $d->user?->name ?? '—' }}</div>
                                <div class="text-xs text-slate-500">{{ $d->user?->email }}</div>
                            </td>
                            <td class="px-3 py-3">
                                <button wire:click="view({{ $d->id }})" class="text-brand-500 hover:underline">{{ $d->computer_name ?? $d->device_name ?? Str::limit($d->device_uuid, 14) }}</button>
                            </td>
                            <td class="px-3 py-3 text-slate-400">{{ $d->operating_system ?? $d->platform ?? '—' }}{{ $d->os_version ? ' '.$d->os_version : '' }}<div class="text-xs text-slate-500">v{{ $d->app_version ?? '?' }}</div></td>
                            <td class="px-3 py-3 text-slate-400">{{ trim(collect([$d->city, $d->country])->filter()->implode(', ')) ?: '—' }}<div class="text-xs text-slate-500">{{ $d->public_ip ?? $d->ip_address ?? '' }}</div></td>
                            <td class="px-3 py-3 text-slate-400">
                                <span class="inline-flex items-center gap-1.5">
                                    <span class="h-1.5 w-1.5 rounded-full {{ $d->isOnline() ? 'bg-green-400' : 'bg-slate-600' }}"></span>
                                    {{ $d->last_heartbeat_at ? $d->last_heartbeat_at->diffForHumans() : 'never' }}
                                </span>
                            </td>
                            <td class="px-3 py-3"><span class="admin-chip {{ $statusChip[$d->status] ?? 'bg-slate-500/15 text-slate-400' }}">{{ $d->status }}</span></td>
                            <td class="px-3 py-3">
                                <div class="flex items-center justify-end" x-data="{ open: false }">
                                    <div class="relative">
                                        <button @click="open=!open" class="inline-flex items-center gap-1 rounded-lg border border-edge bg-raised px-2.5 py-1.5 text-xs text-slate-200 hover:bg-card">Manage <x-lucide-chevron-down class="h-3.5 w-3.5" /></button>
                                        <div x-show="open" @click.outside="open=false" x-cloak x-transition class="absolute right-0 top-[calc(100%+4px)] z-20 w-48 rounded-xl border border-edge bg-card p-1.5 shadow-card">
                                            <button wire:click="view({{ $d->id }})" @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-slate-200 hover:bg-raised"><x-lucide-eye class="h-4 w-4" /> View</button>
                                            <button wire:click="forceLogout({{ $d->id }})" wire:confirm="Force-logout this user? Their desktop will exit within 30 seconds." @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-amber-400 hover:bg-raised"><x-lucide-log-out class="h-4 w-4" /> Force Logout</button>
                                            <button wire:click="deactivate({{ $d->id }})" wire:confirm="Deactivate this device?" @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-yellow-400 hover:bg-raised"><x-lucide-power class="h-4 w-4" /> Deactivate</button>
                                            <button wire:click="resetDevice({{ $d->id }})" wire:confirm="Reset this device? The user is logged out immediately and can register a new computer on next login." @click="open=false" class="flex w-full items-center gap-2 rounded-lg px-3 py-2 text-sm text-red-400 hover:bg-raised"><x-lucide-rotate-ccw class="h-4 w-4" /> Reset Device</button>
                                        </div>
                                    </div>
                                </div>
                            </td>
                        </tr>
                    @empty
                        <tr><td colspan="7" class="px-3 py-10 text-center text-slate-500">No devices registered yet.</td></tr>
                    @endforelse
                </tbody>
            </table>
        </div>
        <div class="mt-4">{{ $devices->links('pagination.dark') }}</div>
    </x-admin.card>

    {{-- View modal --}}
    @if ($viewing)
        <div class="fixed inset-0 z-50 overflow-y-auto bg-black/60 p-4 backdrop-blur-sm" x-data @keydown.escape.window="$wire.set('viewingId', null)">
            <div class="mx-auto my-6 w-full max-w-lg rounded-2xl border border-edge bg-card shadow-card">
                <div class="flex items-center justify-between border-b border-edge px-6 py-4">
                    <div>
                        <h3 class="text-base font-semibold text-white">{{ $viewing->computer_name ?? 'Device' }}</h3>
                        <p class="text-xs text-slate-400">{{ $viewing->user?->name }} · {{ $viewing->user?->email }}</p>
                    </div>
                    <button wire:click="$set('viewingId', null)" class="grid h-8 w-8 place-items-center rounded-lg text-slate-400 hover:bg-raised"><x-lucide-x class="h-5 w-5" /></button>
                </div>
                <div class="grid grid-cols-2 gap-x-6 gap-y-3 px-6 py-5 text-sm">
                    @php($rows = [
                        'Status' => $viewing->status,
                        'Computer Name' => $viewing->computer_name,
                        'Operating System' => trim(($viewing->operating_system ?? $viewing->platform).' '.$viewing->os_version),
                        'App Version' => $viewing->app_version,
                        'CPU' => $viewing->cpu_name,
                        'Motherboard UUID' => $viewing->motherboard_uuid,
                        'Disk Serial' => $viewing->disk_serial,
                        'Machine GUID' => $viewing->machine_guid,
                        'Device UUID' => $viewing->device_uuid,
                        'Public IP' => $viewing->public_ip,
                        'Private IP' => $viewing->private_ip,
                        'Location' => trim(collect([$viewing->city, $viewing->country])->filter()->implode(', ')),
                        'First Login' => optional($viewing->first_login_at)->format('M j, Y H:i'),
                        'Last Login' => optional($viewing->last_login_at)->format('M j, Y H:i'),
                        'Last Heartbeat' => optional($viewing->last_heartbeat_at)->format('M j, Y H:i'),
                    ])
                    @foreach ($rows as $label => $value)
                        <div>
                            <div class="text-xs uppercase tracking-wide text-slate-500">{{ $label }}</div>
                            <div class="mt-0.5 break-all text-slate-200">{{ $value ?: '—' }}</div>
                        </div>
                    @endforeach
                </div>
                <div class="flex items-center justify-end gap-2 border-t border-edge px-6 py-4">
                    <button wire:click="forceLogout({{ $viewing->id }})" wire:confirm="Force-logout this user?" class="rounded-xl border border-amber-500/30 bg-amber-500/10 px-3.5 py-2 text-sm text-amber-300 hover:bg-amber-500/20">Force Logout</button>
                    <button wire:click="resetDevice({{ $viewing->id }})" wire:confirm="Reset this device? The user is logged out immediately." class="rounded-xl bg-red-500 px-3.5 py-2 text-sm font-semibold text-white hover:bg-red-600">Reset Device</button>
                </div>
            </div>
        </div>
    @endif
</div>