<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="px-6 py-4 border-b border-gray-100 flex justify-between items-center bg-gray-50">
        <h3 class="text-lg font-semibold text-gray-800">Servidores Registrados</h3>
        <a href="/admin/servers/create"
            class="bg-primary-600 hover:bg-primary-700 text-white px-4 py-2 rounded-lg text-sm font-medium transition-colors flex items-center">
            <svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"></path>
            </svg>
            Novo Servidor
        </a>
    </div>
    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Nome
                    </th>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Cliente
                    </th>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">IP (v4)
                    </th>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Serial
                        Key</th>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Status
                    </th>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Agente
                    </th>
                    <th class="px-6 py-3 text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50">Ações
                    </th>
                </tr>
            </thead>
            <tbody class="divide-y divide-gray-100">
                <?php if (!empty($servers)): ?>
                    <?php foreach ($servers as $server): ?>
                        <?php
                        $lastSeen = !empty($server['last_seen']) ? strtotime($server['last_seen']) : 0;
                        // Servidor só está online se está ATIVO e foi visto nos últimos 5 minutos
                        $isOnline = $server['status'] === 'active' && $lastSeen && (time() - $lastSeen < 300);
                        $lastSeenText = $lastSeen ? date('d/m/Y H:i', $lastSeen) : 'Nunca';

                        // Define a cor do badge do agente
                        if ($server['status'] !== 'active') {
                            $agentClass = 'bg-gray-100 text-gray-600';
                            $agentText = 'Inativo';
                        } elseif ($isOnline) {
                            $agentClass = 'bg-green-100 text-green-800';
                            $agentText = 'Online';
                        } else {
                            $agentClass = 'bg-red-100 text-red-800';
                            $agentText = 'Offline';
                        }
                        ?>
                        <tr class="hover:bg-gray-50 transition-colors">
                            <td class="px-6 py-4 text-sm font-medium text-gray-900"><?= htmlspecialchars($server['name']) ?>
                            </td>
                            <td class="px-6 py-4 text-sm text-gray-500"><?= htmlspecialchars($server['client_name']) ?></td>
                            <td class="px-6 py-4 text-sm text-gray-500"><?= htmlspecialchars($server['ip_v4']) ?></td>
                            <td class="px-6 py-4 text-sm text-gray-400 font-mono text-xs">
                                <div class="flex items-center space-x-2">
                                    <span><?= substr($server['serial_key'], 0, 8) ?>...</span>
                                    <button
                                        onclick="navigator.clipboard.writeText('<?= $server['serial_key'] ?>'); window.notify('success', 'Sucesso', 'Key copiada!');"
                                        class="text-primary-600 hover:text-primary-800" title="Copiar Serial Completo">
                                        <svg class="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                                                d="M8 16H6a2 2 0 01-2-2V6a2 2 0 012-2h8a2 2 0 012 2v2m-6 12h8a2 2 0 002-2v-8a2 2 0 00-2-2h-8a2 2 0 00-2 2v8a2 2 0 002 2z">
                                            </path>
                                        </svg>
                                    </button>
                                </div>
                            </td>
                            <td class="px-6 py-4 text-sm">
                                <span
                                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <?= $server['status'] == 'active' ? 'bg-green-100 text-green-800' : 'bg-gray-100 text-gray-800' ?>">
                                    <?= $server['status'] == 'active' ? 'Ativo' : 'Inativo' ?>
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm">
                                <span title="Visto por último: <?= $lastSeenText ?>"
                                    class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full <?= $agentClass ?>">
                                    <?= $agentText ?>
                                </span>
                            </td>
                            <td class="px-6 py-4 text-sm font-medium">
                                <a href="/admin/servers/edit/<?= $server['id'] ?>"
                                    class="text-[#1e3a8a] hover:text-blue-900 mr-3">Editar</a>
                                <a href="/admin/servers/delete/<?= $server['id'] ?>" class="text-red-600 hover:text-red-900"
                                    onclick="return confirm('Tem certeza?')">Excluir</a>
                            </td>
                        </tr>
                    <?php endforeach; ?>
                <?php else: ?>
                    <tr>
                        <td colspan="6" class="px-6 py-4 text-center text-gray-500">Nenhum servidor encontrado.</td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>
</div>