document.addEventListener('DOMContentLoaded', () => {
    const MAX_SNAP_DISTANCE = 90;

    // 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(startingCell) {
        if (startingCell == null) {
            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 = '';

        startingCell.appendChild(player_token);
    }

    function getClosestCellByDistance(x, y) {
        let closestCell = null;
        let minDistance = Infinity;

        const cells = document.querySelectorAll('.cell');
        cells.forEach(cell => {
            const rect = cell.getBoundingClientRect();
            const cellCenterX = rect.left + rect.width / 2;
            const cellCenterY = rect.top + rect.height / 2;

            const dx = x - cellCenterX;
            const dy = y - cellCenterY;
            const distance = Math.sqrt(dx*dx + dy*dy);

            if (distance < minDistance) {
                minDistance = distance;
                closestCell = cell;
            }
        });

        return { cell: closestCell, distance: minDistance };
    }

    function checkMoveValid(startingCell, endingCell) {
        const startRow = startingCell.dataset.row
        const startCol = startingCell.dataset.col
        const endRow = endingCell.dataset.row
        const endCol = endingCell.dataset.col

        const rowDiff = Math.abs(startRow - endRow)
        const colDiff = Math.abs(startCol - endCol)

        return ( (rowDiff == 1 && colDiff == 2) || (rowDiff == 2 && colDiff == 1) );
    }

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

        // Find nearest cell
        const {cell: closestCell, distance} = getClosestCellByDistance(e.pageX, e.pageY);
        
        if (distance > MAX_SNAP_DISTANCE) {
            resetToken(player_token.parentElement);
            return;
        }

        const isValid = checkMoveValid(player_token.parentElement, closestCell);

        if (!isValid) {
            resetToken(player_token.parentElement)
            return;
        }

        // 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)
    }

})