document.addEventListener("DOMContentLoaded", function() {
    document.querySelectorAll('.dropdown-submenu a.dropdown-toggle').forEach(function(element) {
        element.addEventListener('click', function(e) {
            if (!this.nextElementSibling.classList.contains('show')) {
                this.parentElement.parentElement.querySelectorAll('.dropdown-menu').forEach(function(menu) {
                    menu.classList.remove('show');
                });
            }
            this.nextElementSibling.classList.toggle('show');
            e.stopPropagation();
        });
    });
});

// Function to handle checkbox state changes
function handleCheckboxChange() {
    let checkedNodeInfo = [];
    document.querySelectorAll('.dropdown-item input[type="checkbox"]').forEach((checkbox) => {
        if (checkbox.checked) {
            checkedNodeInfo.push(checkbox.id);
        }
    });
    console.log("Checked nodes:", checkedNodeInfo); // Use this array in your app
    // updateGrid(checkedNodeInfo);
}

// Attach event listeners to checkboxes
document.querySelectorAll('.dropdown-item input[type="checkbox"]').forEach((checkbox) => {
    checkbox.addEventListener('change', handleCheckboxChange);
});

let firstNode = null;
let secondNode = null;

const socket = new WebSocket("ws://" + location.host);

socket.onmessage = (event) => {
    const { nodeData, nodeStatus } = JSON.parse(event.data);
    renderGrid(nodeData, nodeStatus);
};

function renderGrid(nodeData, nodeStatus) {
    const gridContainer = document.getElementById("grid");
    gridContainer.innerHTML = "";

    nodeData.forEach((row, y) => {
        const rowDiv = document.createElement("div");
        rowDiv.className = "row";

        row.forEach((cell, x) => {
            const cellDiv = document.createElement("div");
            cellDiv.className = "node";
            cellDiv.innerHTML = cell || "-";
            cellDiv.style.backgroundColor = nodeStatus?.[y]?.[x] || "white";

            const indicator = document.createElement("div");
            indicator.className = "indicator";
            cellDiv.appendChild(indicator);
            
            const nodeKey = `${y}-${x}`;
            if (nodeKey === firstNode) {
                cellDiv.classList.add("selected");
                indicator.style.display = "block";
                indicator.innerText = "1";
            } else if (nodeKey === secondNode) {
                cellDiv.classList.add("selected");
                indicator.style.display = "block";
                indicator.innerText = "2";
            }
            
            cellDiv.addEventListener("click", () => {
                if (nodeKey === firstNode) {
                    firstNode = null;
                    secondNode = null;
                } else if (nodeKey === secondNode) {
                    secondNode = null;
                } else if (!firstNode) {
                    firstNode = nodeKey;
                } else {
                    secondNode = nodeKey;
                }
                renderGrid(nodeData, nodeStatus);
            });

            rowDiv.appendChild(cellDiv);
        });

        gridContainer.appendChild(rowDiv);
    });
}

// function updateGrid(selectedMetrics) {
//     document.querySelectorAll('.node').forEach(node => {
//         let nodeId = node.getAttribute('data-node-id');
//         node.innerHTML = nodeId;
        
//         if (selectedMetrics.includes("temp")) {
//             node.innerHTML += "<br>Temp: 45°C";
//         }
//         if (selectedMetrics.includes("cutil")) {
//             node.innerHTML += "<br>CPU: 75%";
//         }
//         if (selectedMetrics.includes("mutil")) {
//             node.innerHTML += "<br>Mem: 60%";
//         }
//         if (selectedMetrics.includes("uptime")) {
//             node.innerHTML += "<br>Uptime: 2d 4h";
//         }
//     });
// }

// Initialize with an empty grid
renderGrid(
    Array.from({ length: 5 }, () => Array(5).fill(null)),
    Array.from({ length: 5 }, () => Array(5).fill("white"))
);