<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dashboard - WSSSHD control panel</title>
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
<div class="container">
<a class="navbar-brand" href="/">
<i class="fas fa-terminal"></i> WSSSHD control panel</a>
<div class="navbar-nav ms-auto">
<span class="navbar-text me-3">%s</span>
<a class="nav-link" href="/logout">Logout</a>
</div></div></nav>
%s
<div class="container mt-4">
<div class="row">
    <div class="col-md-8">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title mb-0">
                    <i class="fas fa-server"></i> Registered Clients
                </h3>
            </div>
            <div class="card-body">
                <div id="client-list">%s</div>
            </div>
        </div>
    </div>

    <div class="col-md-4">
        <div class="card">
            <div class="card-header">
                <h3 class="card-title mb-0">
                    <i class="fas fa-cogs"></i> Quick Actions
                </h3>
            </div>
            <div class="card-body">
                %s
                <button class="btn btn-outline-secondary btn-sm w-100" onclick="location.reload()">
                    <i class="fas fa-sync"></i> Refresh Status
                </button>
            </div>
        </div>

        <div class="card mt-3">
            <div class="card-header">
                <h3 class="card-title mb-0">
                    <i class="fas fa-info-circle"></i> System Info
                </h3>
            </div>
            <div class="card-body">
                <p class="mb-1"><strong>WebSocket Port:</strong> <span id="websocket-port">%d</span></p>
                <p class="mb-1"><strong>Domain:</strong> <span id="domain">%s</span></p>
                <p class="mb-0"><strong>Connected Clients:</strong> <span id="client-count">%d</span></p>
            </div>
        </div>
    </div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
function showNotification(message, type = 'info') {
    const notificationArea = document.getElementById('notification-area');
    const notification = document.createElement('div');
    notification.className = `alert alert-${type} alert-dismissible fade show`;
    notification.innerHTML = `${message}<button type="button" class="btn-close" data-bs-dismiss="alert"></button>`;
    notificationArea.appendChild(notification);
    setTimeout(() => {
        if (notification.parentNode) {
            notification.remove();
        }
    }, 5000);
}

function updateClients() {
    fetch('/api/clients')
        .then(response => response.json())
        .then(data => {
            // Update client count
            document.getElementById('client-count').textContent = data.count;

            // Generate HTML for client list
            let clientListHtml = '';
            if (data.count === 0) {
                clientListHtml = '<div class="text-center py-5"><i class="fas fa-server fa-4x text-muted mb-3"></i><h4 class="text-muted">No clients registered</h4><p class="text-muted">Clients will appear here when they register.</p></div>';
            } else {
                clientListHtml = '<div class="row">';
                for (const [clientId, clientData] of Object.entries(data.clients)) {
                    const statusIcon = clientData.status === 'connected' ? 'fa-desktop text-success' : 'fa-server text-warning';
                    const statusText = clientData.status === 'connected' ? 'Connected' : 'Registered';
                    const services = clientData.services;
                    let actionsHtml = '';
                    if (services.includes('ssh')) {
                        actionsHtml += `<a href="/terminal/${clientId}" class="btn btn-primary btn-sm me-1"><i class="fas fa-terminal"></i> SSH</a>`;
                    }
                    if (services.includes('vnc')) {
                        actionsHtml += `<a href="/vnc/${clientId}" class="btn btn-info btn-sm me-1"><i class="fas fa-desktop"></i> VNC</a>`;
                    }
                    if (services.includes('rdp')) {
                        actionsHtml += `<a href="/rdp/${clientId}" class="btn btn-primary btn-sm me-1"><i class="fas fa-desktop"></i> RDP</a>`;
                    }
                    clientListHtml += `
                        <div class="col-md-4 mb-3">
                            <div class="card client-card h-100">
                                <div class="card-body text-center">
                                    <i class="fas ${statusIcon} fa-3x mb-3"></i>
                                    <h5 class="card-title">${clientId}</h5>
                                    <p class="card-text text-muted">${statusText}</p>
                                    <p class="card-text small">Services: ${services}</p>
                                    <div class="d-flex justify-content-center">${actionsHtml}</div>
                                </div>
                            </div>
                        </div>`;
                }
                clientListHtml += '</div>';
            }

            // Update client list only if changed
            const clientListDiv = document.getElementById('client-list');
            if (clientListDiv.innerHTML !== clientListHtml) {
                clientListDiv.innerHTML = clientListHtml;
            }
        })
        .catch(error => {
            console.log('Error fetching client data:', error);
        });
}

// Update every 5 seconds
setInterval(updateClients, 5000);

// Initial update after 1 second
setTimeout(updateClients, 1000);
</script>
</body>
</html>