// rl_script.js

const grid = document.getElementById('grid');
const startButton = document.getElementById('startButton');
const stepButton = document.getElementById('stepButton');
const resetButton = document.getElementById('resetButton');

const gridRows = 5;
const gridCols = 5;

const initialState = { row: 0, col: 0 };
const goalState = { row: 4, col: 4 };
const obstacles = [{ row: 1, col: 1 }, { row: 2, col: 2 }, { row: 3, 3 }];

let agentState = { ...initialState };
let gridCells = [];

function createGrid() {
    for (let row = 0; row < gridRows; row++) {
        for (let col = 0; col < gridCols; col++) {
            const cell = document.createElement('div');
            cell.classList.add('cell');
            if (row === agentState.row && col === agentState.col) {
                cell.classList.add('agent');
            } else if (row === goalState.row && col === goalState.col) {
                cell.classList.add('goal');
            } else if (obstacles.some(o => o.row === row && o.col === col)) {
                cell.classList.add('obstacle');
            }
            grid.appendChild(cell);
            gridCells.push(cell);
        }
    }
}

function moveAgent(action) {
    const { row, col } = agentState;
    let newRow = row;
    let newCol = col;

    switch (action) {
        case 'up':
            newRow = Math.max(0, row - 1);
            break;
        case 'down':
            newRow = Math.min(gridRows - 1, row + 1);
            break;
        case 'left':
            newCol = Math.max(0, col - 1);
            break;
        case 'right':
            newCol = Math.min(gridCols - 1, col + 1);
            break;
    }

    if (!obstacles.some(o => o.row === newRow && o.col === newCol)) {
        agentState = { row: newRow, col: newCol };
    }

    updateGrid();
}

function updateGrid() {
    gridCells.forEach((cell, index) => {
        const row = Math.floor(index / gridCols);
        const col = index % gridCols;
        cell.classList.remove('agent', 'goal', 'obstacle');
        if (row === agentState.row && col === agentState.col) {
            cell.classList.add('agent');
        } else if (row === goalState.row && col === goalState.col) {
            cell.classList.add('goal');
        } else if (obstacles.some(o => o.row === row && o.col === col)) {
            cell.classList.add('obstacle');
        }
    });
}

function startRL() {
    // Initialize the agent and grid
    agentState = { ...initialState };
    updateGrid();
}

function stepRL() {
    // Simple policy: Move randomly
    const actions = ['up', 'down', 'left', 'right'];
    const action = actions[Math.floor(Math.random() * actions.length)];
    moveAgent(action);
}

function resetRL() {
    startRL();
}

createGrid();

startButton.addEventListener('click', startRL);
stepButton.addEventListener('click', stepRL);
resetButton.addEventListener('click', resetRL);