document.addEventListener('DOMContentLoaded', () => {
    const nodeGridContainer = document.getElementById('node-grid-container');
    const nodeCountSpan = document.getElementById('node-count');
    const POLLING_INTERVAL_MS = 3000; // Poll every 3 seconds

    async function fetchNodeData() {
        try {
            const response = await fetch('/nodes/status');
            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }
            const data = await response.json();
            renderNodeGrid(data.nodes);
        } catch (error) {
            console.error("Error fetching node data:", error);
            nodeGridContainer.innerHTML = '<p class="loading-message">Error loading node data. Please check server connection.</p>';
        }
    }

    function renderNodeGrid(nodes) {
        nodeGridContainer.innerHTML = ''; // Clear existing nodes
        nodeCountSpan.textContent = nodes.length; // Update total node count

        if (nodes.length === 0) {
            nodeGridContainer.innerHTML = '<p class="loading-message">No nodes reporting yet. Start a client!</p>';
            return;
        }

        nodes.forEach(node => {
            const nodeCell = document.createElement('div');
            nodeCell.classList.add('node-cell');
            nodeCell.classList.add(`node-${node.health_status}`); // Apply health color class

            // Truncate UUID for display
            const displayUuid = node.uuid.substring(0, 8) + '...';

            nodeCell.innerHTML = `
                <div class="node-uuid" title="${node.uuid}">${displayUuid}</div>
                <div class="node-status-text">Status: ${node.health_status.toUpperCase()}</div>
                <div class="node-tooltip">
                    <p><strong>UUID:</strong> ${node.uuid}</p>
                    <p><strong>IP:</strong> ${node.ip}</p>
                    <p><strong>Last Seen:</strong> ${new Date(node.last_seen).toLocaleTimeString()}</p>
                    <p><strong>Uptime:</strong> ${node.uptime_seconds ? formatUptime(node.uptime_seconds) : 'N/A'}</p>
                    <p><strong>Load Avg (1m, 5m, 15m):</strong> ${node.load_avg ? node.load_avg.join(', ') : 'N/A'}</p>
                    <p><strong>Memory Usage:</strong> ${node.memory_usage_percent ? node.memory_usage_percent.toFixed(2) + '%' : 'N/A'}</p>
                </div>
            `;
            nodeGridContainer.appendChild(nodeCell);
        });
    }

    function formatUptime(seconds) {
        const days = Math.floor(seconds / (3600 * 24));
        seconds %= (3600 * 24);
        const hours = Math.floor(seconds / 3600);
        seconds %= 3600;
        const minutes = Math.floor(seconds / 60);
        const remainingSeconds = Math.floor(seconds % 60);

        let parts = [];
        if (days > 0) parts.push(`${days}d`);
        if (hours > 0) parts.push(`${hours}h`);
        if (minutes > 0) parts.push(`${minutes}m`);
        if (remainingSeconds > 0 || parts.length === 0) parts.push(`${remainingSeconds}s`); // Ensure at least seconds are shown

        return parts.join(' ');
    }

    // Initial fetch and then set up polling
    fetchNodeData();
    setInterval(fetchNodeData, POLLING_INTERVAL_MS);
});