const startScreen = document.querySelector(".start-screen");
const startButton = document.querySelector(".start-button");
const boardSizeInput = document.querySelector("#board-size");
const kittensPerPlayerInput = document.querySelector("#kittens-per-player");

startButton.addEventListener("click", startGame);

function startGame() {
const boardSize = parseInt(boardSizeInput.value, 10);
const kittensPerPlayer = parseInt(kittensPerPlayerInput.value, 10);

if (isNaN(boardSize) || isNaN(kittensPerPlayer)) {
alert("Please enter valid values for board size and kittens per player.");
return;
}

createGrid(boardSize);
createKittens(kittensPerPlayer);
startScreen.style.display = "none";
}

function createGrid(boardSize) {
for (let i = 0; i < boardSize * boardSize; i++) {
const gridItem = document.createElement("div");
gridItem.classList.add("grid-item");
gridItem.addEventListener("click", () => placeKitten(gridItem));
gridContainer.appendChild(gridItem);
}
}

function createKittens(kittensPerPlayer) {
for (let i = 0; i < kittensPerPlayer; i++) {
const kitten1 = document.createElement("div");
kitten1.classList.add("kitten");
kitten1.setAttribute("data-player", 1);
kitten1.addEventListener("click", setActiveKitten);
player1Kittens.appendChild(kitten1);

const kitten2 = document.createElement("div");
kitten2.classList.add("kitten");
kitten2.setAttribute("data-player", 2);
kitten2.addEventListener("click", setActiveKitten);
player2Kittens.appendChild(kitten2);
}
}

function setActiveKitten(event) {
const selectedKitten = event.target;
const player = parseInt(selectedKitten.getAttribute("data-player"), 10);

if (player === currentPlayer) {
activeKitten = selectedKitten;
}
}

function setKittenColor(kitten, player) {
if (player === 1) {
kitten.style.backgroundColor = "green";
} else if (player === 2) {
kitten.style.backgroundColor = "blue";
}
}

function pushAdjacentKittens(gridItem) {
const index = Array.from(gridContainer.children).indexOf(gridItem);
const row = Math.floor(index / 6);
const col = index % 6;
const directions = [
[-1, 0], // Up
[1, 0], // Down
[0, -1], // Left
[0, 1], // Right
[-1, -1], // Diagonal Up-Left
[-1, 1], // Diagonal Up-Right
[1, -1], // Diagonal Down-Left
[1, 1], // Diagonal Down-Right
];

directions.forEach(([dx, dy]) => {
const newRow = row + dx;
const newCol = col + dy;

if (newRow >= 0 && newRow < 6 && newCol >= 0 && newCol < 6) {
const adjacentIndex = newRow * 6 + newCol;
const adjacentGridItem = gridContainer.children[adjacentIndex];

if (adjacentGridItem.childElementCount > 0) {
const newRowPushed = newRow + dx;
const newColPushed = newCol + dy;

if (newRowPushed >= 0 && newRowPushed < 6 && newColPushed >= 0 && newColPushed < 6) {
const pushedIndex = newRowPushed * 6 + newColPushed;
const pushedGridItem = gridContainer.children[pushedIndex];

if (pushedGridItem.childElementCount === 0) {
pushedGridItem.appendChild(adjacentGridItem.firstChild);
}
} else {
// Kitten pushed off the board, return to the player's bench
const pushedKitten = adjacentGridItem.firstChild;
const pushedKittenPlayer = parseInt(pushedKitten.getAttribute("data-player"), 10);
const playerBench = pushedKittenPlayer === 1 ? player1Kittens : player2Kittens;

playerBench.appendChild(pushedKitten);
}
}
}
});
}


let player1Score = 0;
let player2Score = 0;

function checkForThreeInARow() {
const grid = Array.from(gridContainer.children);
const checkWin = (index1, index2, index3) => {
const item1 = grid[index1].firstChild;
const item2 = grid[index2].firstChild;
const item3 = grid[index3].firstChild;

if (item1 && item2 && item3) {
const player1 = parseInt(item1.getAttribute("data-player"), 10);
const player2 = parseInt(item2.getAttribute("data-player"), 10);
const player3 = parseInt(item3.getAttribute("data-player"), 10);

if (player1 === player2 && player2 === player3) {
return { winningPlayer: player1, indexes: [index1, index2, index3] };
}
}

return null;
};

for (let row = 0; row < 6; row++) {
for (let col = 0; col < 6; col++) {
const index = row * 6 + col;

// Check horizontal
if (col < 4) {
const result = checkWin(index, index + 1, index + 2);
if (result) return result;
}

// Check vertical
if (row < 4) {
const result = checkWin(index, index + 6, index + 12);
if (result) return result;
}

// Check diagonal /
if (row < 4 && col < 4) {
const result = checkWin(index, index + 7, index + 14);
if (result) return result;
}

// Check diagonal \
if (row < 4 && col >= 2) {
const result = checkWin(index, index + 5, index + 10);
if (result) return result;
}
}
}

return null;
}

const player1ScoreElement = document.getElementById("player1-score");
const player2ScoreElement = document.getElementById("player2-score");

function updateScoreDisplay() {
player1ScoreElement.textContent = player1Score;
player2ScoreElement.textContent = player2Score;
}

function handleWin(result) {
const { winningPlayer, indexes } = result;
const playerBench = winningPlayer === 1 ? player1Kittens : player2Kittens;

indexes.forEach((index) => {
const gridItem = gridContainer.children[index];
const kitten = gridItem.firstChild;
playerBench.appendChild(kitten);
});

if (winningPlayer === currentPlayer) {
currentPlayer === 1 ? player1Score++ : player2Score++;
} else {
currentPlayer === 1 ? player2Score++ : player1Score++;
}

updateScoreDisplay();
}

const targetScore = 5; // Change this value to set the target score

function checkGameOver() {
if (player1Score >= targetScore) {
alert("Player 1 wins!");
return true;
}

if (player2Score >= targetScore) {
alert("Player 2 wins!");
return true;
}

const player1KittensOnField = Array.from(gridContainer.children).filter(
(item) => item.childElementCount > 0 && parseInt(item.firstChild.getAttribute("data-player"), 10) === 1
).length;

const player2KittensOnField = Array.from(gridContainer.children).filter(
(item) => item.childElementCount > 0 && parseInt(item.firstChild.getAttribute("data-player"), 10) === 2
).length;

if (player1KittensOnField === 8) {
alert("Player 1 has all kittens on the field and loses!");
return true;
}

if (player2KittensOnField === 8) {
alert("Player 2 has all kittens on the field and loses!");
return true;
}

return false;
}

function placeKitten(gridItem) {
if (gridItem.childElementCount === 0 && activeKitten) {
const activeKittenPlayer = parseInt(activeKitten.getAttribute("data-player"), 10);

if (activeKittenPlayer === currentPlayer) {
setKittenColor(activeKitten, currentPlayer);
gridItem.appendChild(activeKitten);
pushAdjacentKittens(gridItem);

const result = checkForThreeInARow();
if (result) {
handleWin(result);
}

if (!checkGameOver()) {
currentPlayer = currentPlayer === 1 ? 2 : 1;
activeKitten = null;
}
}
}
}


createGrid();
createKittens();