const $ = e =>document.querySelector(e);
const board = Array(9).fill(0);
const step = [];
let fitstMove = true;

const winPatterns = [
    [0, 1, 2], [3, 4, 5], [6, 7, 8], // poziome
    [0, 3, 6], [1, 4, 7], [2, 5, 8], // pionowe
    [0, 4, 8], [2, 4, 6]             // przekątne
];



function restart(){ 
    board.clear();
    board.push(...Array(9).fill(0));
    step = [];
    fitstMove = !fitstMove;

    initializeBoard();
}

function checkWin(board) {
    for (let pattern of winPatterns) {
        const [a, b, c] = pattern;
        if (board[a] !== 0 && board[a] === board[b] && board[a] === board[c]) {
            return board[a];
        }
    }
    return 0;
}

function initializeBoard() {
    const boardElement =$('.board');
    boardElement.innerHTML = '';
    
    for(let i = 0; i < 9; i++) {
        const div = document.createElement('div');
        div.className = 'cell';
        div.id = 'cell-' + i;
        div.addEventListener('click', () => handleMove(i));
        boardElement.appendChild(div);
    }
    if(!fitstMove){
        apiStep();
    }
    updateBoardDisplay();
}

function updateBoardDisplay() {
    board.forEach((value, index) => {
        const cell = $('#cell-' + index);
        cell.className = 'cell';
        if (value === 1) {
            cell.classList.add('o');
        } else if (value === -1) {
            cell.classList.add('x');
        }
    });

    const winner = checkWin(board);
    const messageElement =$('.message');
    if (winner === 1) {
        messageElement.textContent = 'Komputer wygrał!';
    } else if (winner === -1) {
        messageElement.textContent = 'Wygrałeś!';
        let newBoard = []
        for (let i = 0; i < 9 - 1; i++) {
            let value = 0;
            if(board[i]!=0)
                value = board[i]==1?-1:1;
            newBoard.push(value);
        }
        fetch('/savegame', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({ final_board: newBoard, sequence:step })
            }).then(res => res.json());
      

    } else if (!board.includes(0)) {
        messageElement.textContent = 'Remis!';
    } else {
        messageElement.textContent = '';
    }
}

async function apiStep() {
    try {
        // Wysłanie stanu planszy do API
        const response = await fetch('/move', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ board: board })
        });

        const data = await response.json();

        if (data.status === 'success' && data.move >= 0 && data.move < 9) {
            // Ruch komputera
            board[data.move] = 1;
            updateBoardDisplay();
        }
    } catch (error) {
        console.error('Błąd podczas komunikacji z API:', error);
    }
}

async function handleMove(index) {
    if (board[index] !== 0 || checkWin(board)) return;

    // Ruch gracza
    board[index] = -1;
    // dodaj gkrok do historii
    step.push(index);    
    updateBoardDisplay();


    if (checkWin(board)) return;

    apiStep();
}

// Inicjalizacja gry i pobranie aktualnego stanu
async function initGame() {
    
    $('.restart').addEventListener('click', (e)=>{
            console.log('add event restart');
            restart();
    });

    try {
        const response = await fetch('/status');
        const data = await response.json();
        // Tutaj możesz zaktualizować planszę zgodnie z danymi z serwera
        console.log(data);
    } catch (error) {
        console.error('Błąd podczas pobierania stanu gry:', error);
    }
    initializeBoard();
}



initGame();