document.addEventListener('DOMContentLoaded', () => {
    // Generate the board
    for (let i=0; i < 5; i++) {
        for (let j = 0; j < 5; j++) {
            const cell = document.createElement('div');
            cell.dataset.row = i;
            cell.dataset.col = j;
            cell.id = `cell-${i}-${j}`
            cell.dataset.piece = ""
            cell.classList.add('cell')
            if ((i + j) % 2 == 0) {
                cell.classList.add('dark')
            }
            else {
                cell.classList.add('light')
            }

            const board = document.getElementById('board')
            board.appendChild(cell)
        }
    }
    // Generate player token
    const player_token = document.createElement('div')
    const target_cell = document.getElementById('cell-4-0')
    player_token.id="player-token"
    player_token.classList.add('token')
    target_cell.appendChild(player_token)

    // Add logic for moving player token
    let isDragging = false;
    let offsetX, offsetY;

    // check for the player grabbing the player icon
    player_token.addEventListener('pointerdown', (e) => {
        const rect = player_token.getBoundingClientRect();
        player_token.style.width = `${rect.width}px`;
        player_token.style.height = `${rect.height}px`;
        isDragging = true;
        offsetX = e.offsetX;
        offsetY = e.offsetY;
        player_token.setPointerCapture(e.pointerId);
    });

    // Impliment the dragging
    player_token.addEventListener('pointermove', (e) => {
        if (!isDragging) return;
        player_token.style.position = 'absolute';
        player_token.style.left = `${e.pageX - offsetX}px`;
        player_token.style.top = `${e.pageY - offsetY}px`;
    });

    function resetToken() {
        const startingCell = document.getElementById(`cell-4-0`);
        // Reset position inside cell
        player_token.style.position = 'relative'; // back to relative so it sits inside the cell
        player_token.style.left = '';
        player_token.style.top = '';
        player_token.style.zIndex = '';

        originalCell.appendChild(token);
    }

    function getClosestCell(x,y) {
        const boardRect = board.getBoundingClientRect();
        const cellSize = boardRect.width / 5;

        // Convert page coordinates to board-relative coordinates
        const relX = x - boardRect.left;
        const relY = y - boardRect.top;

        // Find closest column and row
        const col = Math.min(4, Math.max(0, Math.floor(relX / cellSize)));
        const row = Math.min(4, Math.max(0, Math.floor(relY / cellSize)));

        return document.getElementById(`cell-${row}-${col}`);
    }



    // stop dragging once they let go
    player_token.addEventListener('pointerup', (e) => {
        isDragging = false;  

        // Find nearest cell
        const closestCell = getClosestCell(e.pageX, e.pageY);

        // Reset token style and append to cell
        player_token.style.position = 'relative';
        player_token.style.left = '';
        player_token.style.top = '';
        player_token.style.zIndex = '';

        closestCell.appendChild(player_token);
    });

    // Generate Target Tokens
    target_token_list = ['0-0', '1-2', '2-4', '3-1', '4-3']
    for (let index = 0; index < target_token_list.length; index++) {
        const element = target_token_list[index];
        const token = document.createElement('div');
        token.classList.add('token')
        const target_cell = document.getElementById(`cell-${element}`)
        target_cell.appendChild(token)
    }

})