<div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden">
    <div class="p-6 border-b border-gray-100 flex justify-between items-center">
        <h2 class="text-lg font-semibold text-gray-800">Logs de Conexão e Erros</h2>
        <span class="text-sm text-gray-500">Mostrando últimos registros</span>
    </div>

    <div class="overflow-x-auto">
        <table class="w-full text-left border-collapse">
            <thead>
                <tr class="bg-gray-50 text-gray-600 text-sm uppercase tracking-wider">
                    <th class="p-4 font-medium border-b border-gray-100">Data/Hora</th>
                    <th class="p-4 font-medium border-b border-gray-100">Servidor</th>
                    <th class="p-4 font-medium border-b border-gray-100">Ação</th>
                    <th class="p-4 font-medium border-b border-gray-100">Mensagem</th>
                    <th class="p-4 font-medium border-b border-gray-100">IP Origem</th>
                </tr>
            </thead>
            <tbody class="text-sm divide-y divide-gray-100">
                <?php foreach ($logs as $log): ?>
                    <tr class="hover:bg-gray-50 transition-colors">
                        <td class="p-4 text-gray-600 whitespace-nowrap">
                            <?= date('d/m/Y H:i:s', strtotime($log['created_at'])) ?>
                        </td>
                        <td class="p-4">
                            <?php if ($log['server_name']): ?>
                                <a href="/admin/servers/edit/<?= $log['server_id'] ?>"
                                    class="font-medium text-primary-600 hover:underline">
                                    <?= htmlspecialchars($log['server_name']) ?>
                                </a>
                                <div class="text-xs text-gray-400"><?= htmlspecialchars($log['ip_v4']) ?></div>
                            <?php else: ?>
                                <span class="text-gray-400 italic">Desconhecido / Falha Auth</span>
                            <?php endif; ?>
                        </td>
                        <td class="p-4">
                            <?php
                            $badgeColor = match ($log['action']) {
                                'sync' => 'bg-green-100 text-green-700',
                                'bind_machine' => 'bg-blue-100 text-blue-700',
                                'auth_failed', 'auth_blocked', 'error' => 'bg-red-100 text-red-700',
                                default => 'bg-gray-100 text-gray-700'
                            };
                            ?>
                            <span class="px-2 py-1 rounded-full text-xs font-medium <?= $badgeColor ?>">
                                <?= htmlspecialchars($log['action']) ?>
                            </span>
                        </td>
                        <td class="p-4 text-gray-700">
                            <?= htmlspecialchars($log['message']) ?>
                        </td>
                        <td class="p-4 text-gray-500 font-mono text-xs">
                            <?= htmlspecialchars($log['ip_address']) ?>
                        </td>
                    </tr>
                <?php endforeach; ?>

                <?php if (empty($logs)): ?>
                    <tr>
                        <td colspan="5" class="p-8 text-center text-gray-500">
                            Nenhum log registrado ainda.
                        </td>
                    </tr>
                <?php endif; ?>
            </tbody>
        </table>
    </div>

    <!-- Pagination -->
    <?php if ($totalPages > 1): ?>
        <div class="p-4 border-t border-gray-100 flex justify-center space-x-2">
            <?php if ($page > 1): ?>
                <a href="?page=<?= $page - 1 ?>"
                    class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50 text-sm">Anterior</a>
            <?php endif; ?>

            <span class="px-3 py-1 text-sm text-gray-600">Página <?= $page ?> de <?= $totalPages ?></span>

            <?php if ($page < $totalPages): ?>
                <a href="?page=<?= $page + 1 ?>"
                    class="px-3 py-1 border border-gray-300 rounded hover:bg-gray-50 text-sm">Próxima</a>
            <?php endif; ?>
        </div>
    <?php endif; ?>
</div>