const board = document.getElementById('game-board');
const pointsDisplay = document.getElementById('points');
const resetButton = document.getElementById('reset-button');
const messageContainer = document.getElementById('message-container');
const gridSize = 4;
let tiles = [];
let points = 0;
let isGameOverShown = false;
let gameOverMessage = null;
let gameWonMessage = null;

function createTile(value) {
  const tile = document.createElement('div');
  tile.className = 'tile';
  tile.textContent = value !== 0 ? value : '';
  return tile;
}

function initializeBoard() {
  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      const tile = createTile(0);
      board.appendChild(tile);
      tiles.push({ element: tile, value: 0 });
    }
  }
}

function getRandomPosition() {
  return Math.floor(Math.random() * gridSize * gridSize);
}

function addRandomTile() {
  const emptyTiles = tiles.filter(tile => tile.value === 0);
  if (emptyTiles.length === 0) return;

  const randomTile = emptyTiles[getRandomPosition() % emptyTiles.length];
  randomTile.value = Math.random() < 0.9 ? 2 : 4;
  updateBoard();
}

function updateBoard() {
  tiles.forEach(tile => {
    tile.element.textContent = tile.value !== 0 ? tile.value : '';
    tile.element.className = 'tile';
    if (tile.value !== 0) {
      tile.element.classList.add(`tile-${tile.value}`);
    }
  });
  pointsDisplay.textContent = points;
}

function getNeighbors(index) {
  const neighbors = [];
  const row = Math.floor(index / gridSize);
  const col = index % gridSize;

  if (row > 0) neighbors.push((row - 1) * gridSize + col); // 上
  if (row < gridSize - 1) neighbors.push((row + 1) * gridSize + col); // 下
  if (col > 0) neighbors.push(row * gridSize + col - 1); // 左
  if (col < gridSize - 1) neighbors.push(row * gridSize + col + 1); // 右

  return neighbors;
}

function isGameOver() {
  if (tiles.every(tile => tile.value !== 0)) {
    for (let i = 0; i < tiles.length; i++) {
      const tile = tiles[i];
      const neighbors = getNeighbors(i);
      for (const neighbor of neighbors) {
        if (tiles[neighbor].value === tile.value) {
          return false;
        }
      }
    }
    return true;
  }
  return false;
}

function isGameWon() {
  return tiles.some(tile => tile.value === 2048);
}

function showGameOverMessage() {
  if (!isGameOverShown) {
    gameOverMessage = document.createElement('div');
    gameOverMessage.id = 'game-over';
    gameOverMessage.textContent = 'Game Over';
    messageContainer.appendChild(gameOverMessage);
    isGameOverShown = true;
  }
}

function removeGameOverMessage() {
  if (gameOverMessage) {
    gameOverMessage.remove();
    gameOverMessage = null;
    isGameOverShown = false;
  }
}

function showGameWonMessage() {
  if (!gameWonMessage) {
    gameWonMessage = document.createElement('div');
    gameWonMessage.id = 'game-won';
    gameWonMessage.textContent = 'Congratulations! You Win!';
    messageContainer.appendChild(gameWonMessage);
  }
}

function removeGameWonMessage() {
  if (gameWonMessage) {
    gameWonMessage.remove();
    gameWonMessage = null;
  }
}

// キー操作によるゲームプレイの実装
document.addEventListener('keydown', handleKeydown);

function handleKeydown(event) {
  const arrowKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'];
  if (arrowKeys.includes(event.key)) {
    event.preventDefault();
    if (isGameOver() && !isGameOverShown) {
      showGameOverMessage();
      return;
    }
    if (isGameOverShown) {
      removeGameOverMessage();
    }
    if (gameWonMessage) {
      removeGameWonMessage();
    }
    const moveDirection = event.key.replace('Arrow', '');
    moveTiles(moveDirection);
    addRandomTile();
    if (isGameWon()) {
      showGameWonMessage();
    }
    if (isGameOver()) {
      showGameOverMessage();
    }
  }
}

// タイルの移動処理
function moveTiles(direction) {
  const rowVectors = {
    Up: [-1, 0],
    Down: [1, 0],
    Left: [0, -1],
    Right: [0, 1]
  };

  const [r, c] = rowVectors[direction];
  let moved = false;

  for (let i = 0; i < gridSize; i++) {
    for (let j = 0; j < gridSize; j++) {
      const currentTile = tiles[i * gridSize + j];
      if (currentTile.value !== 0) {
        let newRow = i + r;
        let newCol = j + c;

        while (newRow >= 0 && newRow < gridSize && newCol >= 0 && newCol < gridSize) {
          const newTile = tiles[newRow * gridSize + newCol];

          if (newTile.value === 0) {
            newTile.value = currentTile.value;
            currentTile.value = 0;
            moved = true;
          } else if (newTile.value === currentTile.value) {
            newTile.value *= 2;
            points += newTile.value;
            currentTile.value = 0;
            moved = true;
            break;
          } else {
            break;
          }

          newRow += r;
          newCol += c;
        }
      }
    }
  }

  if (moved) {
    updateBoard();
  }
}

// ゲームの初期化
initializeBoard();
addRandomTile();
addRandomTile();

// リセットボタンのクリックイベント
resetButton.addEventListener('click', resetGame);

function resetGame() {
  if (gameOverMessage) {
    removeGameOverMessage();
  }
  if (gameWonMessage) {
    removeGameWonMessage();
  }
  tiles = [];
  points = 0;
  pointsDisplay.textContent = points;
  board.innerHTML = '';
  initializeBoard();
  addRandomTile();
  addRandomTile();
}