{% extends "base.html" %}

{% block title %}Cluster Nodes - VidAI{% endblock %}

{% block head %}
<style>
    .container { max-width: 1400px; margin: 2rem auto; padding: 0 2rem; }
    .admin-card { background: white; padding: 2rem; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05); margin-bottom: 2rem; }
    .card-header { margin-bottom: 1.5rem; }
    .card-header h3 { margin: 0; color: #1e293b; }
    .btn { padding: 0.75rem 2rem; background: #667eea; color: white; border: none; border-radius: 8px; font-size: 1rem; font-weight: 600; cursor: pointer; text-decoration: none; display: inline-block; }
    .btn:hover { background: #5a67d8; }
    .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; }
    .table { width: 100%; border-collapse: collapse; margin-top: 1rem; }
    .table th, .table td { padding: 1rem; text-align: left; border-bottom: 1px solid #e5e7eb; }
    .table th { background: #f8fafc; font-weight: 600; color: #374151; }
    .status-connected { color: #065f46; font-weight: 500; }
    .status-disconnected { color: #dc2626; font-weight: 500; }
    .alert { padding: 0.75rem; border-radius: 8px; margin-bottom: 1rem; }
    .alert-error { background: #fee2e2; color: #dc2626; border: 1px solid #fecaca; }
    .alert-success { background: #d1fae5; color: #065f46; border: 1px solid #a7f3d0; }

    /* Modal styles */
    .modal { display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); }
    .modal-content { background-color: white; margin: 15% auto; padding: 2rem; border-radius: 12px; width: 90%; max-width: 500px; box-shadow: 0 4px 20px rgba(0,0,0,0.15); }
    .modal-header { margin-bottom: 1.5rem; }
    .modal-header h3 { margin: 0; color: #1e293b; }
    .close { color: #aaa; float: right; font-size: 28px; font-weight: bold; cursor: pointer; }
    .close:hover { color: #000; }
    .form-group { margin-bottom: 1rem; }
    .form-group label { display: block; margin-bottom: 0.5rem; font-weight: 500; color: #374151; }
    .form-group select { width: 100%; padding: 0.75rem; border: 1px solid #d1d5db; border-radius: 8px; font-size: 1rem; }
    .modal-footer { text-align: right; margin-top: 2rem; }
    .btn-secondary { background: #6b7280; }
    .btn-secondary:hover { background: #4b5563; }
</style>
{% endblock %}

{% block content %}
<div class="container">
    <div class="admin-card">
        <div class="card-header">
            <h3><i class="fas fa-server"></i> Cluster Nodes</h3>
            <p>Monitor and manage connected cluster nodes and their configurations.</p>
        </div>

        {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ 'error' if category == 'error' else 'success' }}">{{ message }}</div>
            {% endfor %}
        {% endif %}
        {% endwith %}

        <table class="table" id="nodesTable">
            <thead>
                <tr>
                    <th>Status</th>
                    <th>Token Name</th>
                    <th>Hostname</th>
                    <th>GPUs</th>
                    <th>GPU Memory</th>
                    <th>Workers</th>
                    <th>IP Address</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="nodesTableBody">
                <tr>
                    <td colspan="8" style="text-align: center; color: #6b7280;">Loading cluster nodes...</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

<!-- Driver Selection Modal -->
<div id="driverModal" class="modal">
    <div class="modal-content">
        <div class="modal-header">
            <span class="close" onclick="closeModal()">&times;</span>
            <h3>Select Driver for <span id="modalHostname"></span></h3>
        </div>
        <form id="driverForm">
            <input type="hidden" id="modalHostnameInput" name="hostname">
            <input type="hidden" id="modalTokenInput" name="token">
            <div class="form-group">
                <label for="driverSelect">Preferred Driver:</label>
                <select id="driverSelect" name="driver">
                    <option value="cuda">CUDA</option>
                    <option value="rocm">ROCm</option>
                </select>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                <button type="submit" class="btn">Save Preference</button>
            </div>
        </form>
    </div>
</div>

<script>
let nodesData = [];

function updateNodesTable() {
    fetch('/api/admin/cluster_nodes')
        .then(response => response.json())
        .then(data => {
            nodesData = data.nodes || [];
            renderNodesTable();
        })
        .catch(error => {
            console.error('Error fetching nodes:', error);
            document.getElementById('nodesTableBody').innerHTML =
                '<tr><td colspan="8" style="text-align: center; color: #dc2626;">Error loading cluster nodes</td></tr>';
        });
}

function renderNodesTable() {
    const tbody = document.getElementById('nodesTableBody');

    if (nodesData.length === 0) {
        tbody.innerHTML = '<tr><td colspan="8" style="text-align: center; color: #6b7280;">No cluster nodes found</td></tr>';
        return;
    }

    tbody.innerHTML = nodesData.map(node => `
        <tr>
            <td>
                <span class="status-${node.connected ? 'connected' : 'disconnected'}">
                    ${node.connected ? '● Connected' : '● Disconnected'}
                </span>
            </td>
            <td>${node.token_name}</td>
            <td>${node.hostname}</td>
            <td>${node.gpus}</td>
            <td>
                ${node.gpu_memory.length > 0 ? node.gpu_memory.join('<br>') : 'No GPU info'}
                ${node.total_memory > 0 ? `<br><strong>Total: ${node.total_memory}GB</strong>` : ''}
            </td>
            <td>${node.workers_available}</td>
            <td>${node.ip_address}</td>
            <td>
                <button class="btn btn-sm" onclick="openDriverModal('${node.hostname}', '${node.token}', '${node.hostname}')">
                    Set Driver
                </button>
            </td>
        </tr>
    `).join('');
}

function openDriverModal(hostname, tokenName, hostnameValue) {
    // Find the token for this hostname (simplified - in real implementation, pass token)
    // For now, we'll use tokenName as token, but actually need the actual token string
    // This is a placeholder - you'd need to modify the API to include token
    document.getElementById('modalHostname').textContent = hostname;
    document.getElementById('modalHostnameInput').value = hostnameValue;
    document.getElementById('modalTokenInput').value = tokenName; // This should be the actual token, not name
    document.getElementById('driverModal').style.display = 'block';
}

function closeModal() {
    document.getElementById('driverModal').style.display = 'none';
}

document.getElementById('driverForm').addEventListener('submit', function(e) {
    e.preventDefault();

    const formData = new FormData(this);

    fetch('/api/admin/cluster_nodes/set_driver', {
        method: 'POST',
        body: formData
    })
    .then(response => response.json())
    .then(data => {
        if (data.success) {
            closeModal();
            // Show success message
            showNotification('Driver preference saved successfully!', 'success');
        } else {
            showNotification('Failed to save driver preference: ' + (data.error || 'Unknown error'), 'error');
        }
    })
    .catch(error => {
        console.error('Error saving driver preference:', error);
        showNotification('Error saving driver preference', 'error');
    });
});

function showNotification(message, type) {
    const container = document.getElementById('notificationContainer');
    const notification = document.createElement('div');
    notification.className = `notification ${type}`;
    notification.innerHTML = `
        <span class="notification-close" onclick="this.parentElement.remove()">&times;</span>
        ${message}
    `;
    container.appendChild(notification);

    // Auto-remove after 5 seconds
    setTimeout(() => {
        if (notification.parentElement) {
            notification.remove();
        }
    }, 5000);
}

// Auto-update every 10 seconds
setInterval(updateNodesTable, 10000);

// Initial load
document.addEventListener('DOMContentLoaded', function() {
    updateNodesTable();
});

// Close modal when clicking outside
window.onclick = function(event) {
    const modal = document.getElementById('driverModal');
    if (event.target == modal) {
        closeModal();
    }
}
</script>
{% endblock %}