{% extends "base.html" %}

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

{% block head %}
<style>
    .container { width: 95%; max-width: none; 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; }
    .node-row-connected { background-color: #f0fdf4; } /* Light green background for connected nodes */
    .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; }

    /* Local worker styling */
    .local-worker-row { background-color: #f0f9ff; }
    .local-worker-row td { border-color: #bae6fd; }
    .local-worker-note { color: #64748b; font-size: 0.875rem; font-style: italic; }
</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 %}

        <!-- Cluster Master Stats -->
        <div class="admin-card" id="masterStats" style="margin-bottom: 2rem;">
            <div class="card-header">
                <h3><i class="fas fa-server"></i> Cluster Master Statistics</h3>
            </div>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; padding: 1rem;">
                <div style="text-align: center;">
                    <div style="font-size: 2rem; font-weight: bold; color: #667eea;" id="totalNodes">0</div>
                    <div style="color: #6b7280;">Total Nodes</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 2rem; font-weight: bold; color: #10b981;" id="connectedNodes">0</div>
                    <div style="color: #6b7280;">Connected</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 2rem; font-weight: bold; color: #f59e0b;" id="totalWorkers">0</div>
                    <div style="color: #6b7280;">Total Workers</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 2rem; font-weight: bold; color: #ef4444;" id="activeJobs">0</div>
                    <div style="color: #6b7280;">Active Jobs</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 2rem; font-weight: bold; color: #8b5cf6;" id="completedJobs">0</div>
                    <div style="color: #6b7280;">Completed Jobs</div>
                </div>
                <div style="text-align: center;">
                    <div style="font-size: 1.5rem; font-weight: bold; color: #6b7280;" id="masterUptime">00:00:00</div>
                    <div style="color: #6b7280;">Master Uptime</div>
                </div>
            </div>
        </div>

        <table class="table" id="nodesTable">
            <thead>
                <tr>
                    <th>Node Name</th>
                    <th>Hostname</th>
                    <th>Weight</th>
                    <th>GPUs</th>
                    <th>GPU Memory</th>
                    <th>Workers</th>
                    <th>IP Address</th>
                    <th>Uptime</th>
                    <th>Active Jobs</th>
                    <th>Completed Jobs</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody id="nodesTableBody">
                <tr>
                    <td colspan="12" 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 Drivers for Workers on <span id="modalHostname"></span></h3>
        </div>
        <form id="driverForm">
            <input type="hidden" id="modalHostnameInput" name="hostname">
            <input type="hidden" id="modalTokenInput" name="token">
            <div id="workerDriverSelections">
                <!-- Worker driver selections will be populated dynamically -->
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal()">Cancel</button>
                <button type="submit" class="btn">Save Preferences</button>
            </div>
        </form>
    </div>
</div>

<script>
let nodesData = [];

function formatUptime(seconds) {
    const hours = Math.floor(seconds / 3600);
    const minutes = Math.floor((seconds % 3600) / 60);
    const secs = Math.floor(seconds % 60);
    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
}

function updateNodesTable() {
    fetch('/api/admin/cluster_nodes')
        .then(response => response.json())
        .then(data => {
            // Update master stats
            if (data.master_stats) {
                document.getElementById('totalNodes').textContent = data.master_stats.total_nodes;
                document.getElementById('connectedNodes').textContent = data.master_stats.connected_nodes;
                document.getElementById('totalWorkers').textContent = data.master_stats.total_workers;
                document.getElementById('activeJobs').textContent = data.master_stats.total_active_jobs;
                document.getElementById('completedJobs').textContent = data.master_stats.total_completed_jobs;
                document.getElementById('masterUptime').textContent = formatUptime(data.master_stats.uptime_seconds);
            }

            nodesData = data.nodes || [];
            renderNodesTable();
        })
        .catch(error => {
            console.error('Error fetching nodes:', error);
            document.getElementById('nodesTableBody').innerHTML =
                '<tr><td colspan="11" 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="11" style="text-align: center; color: #6b7280;">No cluster nodes found</td></tr>';
        return;
    }

    tbody.innerHTML = nodesData.map(node => `
        <tr class="${node.is_local ? 'local-worker-row' : ''} ${node.connected ? 'node-row-connected' : ''}">
            <td>${node.token_name}${node.backend ? ` (${node.backend.toUpperCase()})` : ''}</td>
            <td>${node.hostname}</td>
            <td>${node.weight || 100}</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>
                <strong>${node.workers_available}</strong> workers<br>
                <small>${node.workers_summary || 'No workers'}</small>
                ${node.mixed_gpu ? '<br><small style="color: #059669; font-weight: bold;">● Mixed GPU Available</small>' : ''}
            </td>
            <td>${node.ip_address}</td>
            <td>${formatUptime(node.uptime_seconds || 0)}</td>
            <td>${node.active_jobs || 0}</td>
            <td>${node.completed_jobs || 0}</td>
            <td>
                <button class="btn btn-sm set-driver-btn" data-hostname="${node.hostname}" data-token="${node.token}">Set Driver</button>
            </td>
        </tr>
    `).join('');
}

function openDriverModal(hostname, token, hostnameValue) {
    // Find the node data
    const node = nodesData.find(n => n.hostname === hostname && n.token === token);
    if (!node) {
        console.error('Node not found:', hostname, token);
        return;
    }

    document.getElementById('modalHostname').textContent = hostname;
    document.getElementById('modalHostnameInput').value = hostnameValue;
    document.getElementById('modalTokenInput').value = token;

    // Populate worker driver selections
    const container = document.getElementById('workerDriverSelections');
    container.innerHTML = '';

    // Get GPU-requiring workers (analysis_cuda, training_cuda, analysis_rocm, training_rocm)
    const gpuWorkers = [];
    if (node.workers && node.workers.length > 0) {
        node.workers.forEach(worker => {
            if (worker.backend !== 'cpu') {
                gpuWorkers.push(worker);
            }
        });
    }

    if (gpuWorkers.length === 0) {
        container.innerHTML = '<p>No GPU-requiring workers found on this node.</p>';
        return;
    }

    // Create form fields for each GPU worker
    gpuWorkers.forEach(worker => {
        const workerDiv = document.createElement('div');
        workerDiv.className = 'form-group';

        // Get available GPU backends for this node (exclude CPU for GPU workers)
        const availableGpuBackends = node.available_backends.filter(b => b !== 'cpu');

        // If no GPU backends available, skip this worker or show warning
        if (availableGpuBackends.length === 0) {
            workerDiv.innerHTML = `
                <label>${worker.type} (${worker.backend.toUpperCase()}) Worker:</label>
                <p style="color: #dc2626;">No GPU backends available for this worker</p>
            `;
            container.appendChild(workerDiv);
            return;
        }

        // Create select with only available GPU backends
        let optionsHtml = '';
        availableGpuBackends.forEach(backend => {
            optionsHtml += `<option value="${backend}">${backend.toUpperCase()}</option>`;
        });

        workerDiv.innerHTML = `
            <label for="worker_${worker.type}_${worker.backend}_driver">${worker.type} (${worker.backend.toUpperCase()}) Worker:</label>
            <select id="worker_${worker.type}_${worker.backend}_driver" name="worker_${worker.type}_${worker.backend}_driver">
                ${optionsHtml}
            </select>
        `;
        container.appendChild(workerDiv);

        // Set current preference or default to first available
        const select = workerDiv.querySelector('select');
        if (availableGpuBackends.includes(worker.backend)) {
            select.value = worker.backend;
        } else {
            // Default to first available GPU backend
            select.value = availableGpuBackends[0];
        }
    });

    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();

    // Add event listeners for set driver buttons
    document.addEventListener('click', function(e) {
        if (e.target.classList.contains('set-driver-btn')) {
            const hostname = e.target.getAttribute('data-hostname');
            const token = e.target.getAttribute('data-token');
            openDriverModal(hostname, token, hostname);
        }
    });
});

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