function colorCell(cellName, colorName) {
    console.log(`colorCell called with: ${cellName}, ${colorName}`);
    
    // Map of valid named colors to their hex values
    const validColors = {
        "white": "#FFFFFF",
        "lightGray": "#E4E4E4",
        "mediumGray": "#888888",
        "darkGray": "#222222",
        "pink": "#FFA7D1",
        "red": "#E50000",
        "orange": "#E59500",
        "brown": "#A06A42",
        "yellow": "#E5D900",
        "lightGreen": "#94E044",
        "green": "#02BE01",
        "cyan": "#00D3DD",
        "blue": "#0083C7",
        "darkBlue": "#0000EA",
        "purple": "#CF6EE4",
        "darkPurple": "#820080",
        "black": "#000000"
    };

    // Check if the provided color name is valid
    if (!validColors[colorName]) {
        console.warn(`Invalid color name: ${colorName}. Please use a valid named color.`);
        return;
    }

    // Find the cell using its class name
    const cell = document.querySelector(`.cell.${cellName}`);
    
    // If the cell exists, change its background color to the corresponding hex value
    if (cell) {
        cell.style.backgroundColor = validColors[colorName];
    } else {
        console.warn(`Cell ${cellName} not found.`);
    }
}

// Attach colorCell function to the window object to make it globally accessible
window.colorCell = colorCell;

document.addEventListener('DOMContentLoaded', function() {
    const gridSize = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--grid-size').trim());
    const grid = document.querySelector('.grid-container');

    function getLabel(index) {
        let label = '';
        while (index >= 0) {
            label = String.fromCharCode((index % 26) + 65) + label;
            index = Math.floor(index / 26) - 1;
        }
        return label;
    }

    // Create top labels
    grid.innerHTML += '<div class="label"></div>'; // Empty top-left corner
    for (let i = 0; i < gridSize; i++) {
        grid.innerHTML += `<div class="label">${getLabel(i)}</div>`;
    }
    grid.innerHTML += '<div class="label"></div>'; // Empty top-right corner

    // Create rows with side labels and cells
    for (let i = 1; i <= gridSize; i++) {
        grid.innerHTML += `<div class="label">${i}</div>`;
        for (let j = 0; j < gridSize; j++) {
            let cellName = `${getLabel(j)}${i}`; // This will generate names like A1, A2, B1, etc.
            grid.innerHTML += `<div class="cell ${cellName}"></div>`;
        }
        grid.innerHTML += `<div class="label">${i}</div>`;
    }

    // Create bottom labels
    grid.innerHTML += '<div class="label"></div>'; // Empty bottom-left corner
    for (let i = 0; i < gridSize; i++) {
        grid.innerHTML += `<div class="label">${getLabel(i)}</div>`;
    }
    grid.innerHTML += '<div class="label"></div>'; // Empty bottom-right corner

    // Fetch and apply the current state
    fetch('/api/current-state')
        .then(response => response.json())
        .then(data => {
            data.forEach(pixel => {
                colorCell(`${pixel.x}${pixel.y}`, pixel.color);
            });
        })
        .catch(error => {
            console.error('Error fetching current state:', error);
        });
});