document.addEventListener('DOMContentLoaded', () => {
  const canvas = document.getElementById('gameCanvas');
  const ctx = canvas.getContext('2d');
  const scoreElement = document.getElementById('score');
  const startMenu = document.getElementById('startMenu');

  let snake;
  let food;
  let score = 0;
  let intervalId;
  let touchStartX;
  let touchStartY;

  const tileSize = 20;
  const canvasSize = 400;
  const gridSize = canvasSize / tileSize;

  function initializeGame() {
      snake = {
          body: [{ x: 5, y: 5 }],
          direction: 'right'
      };
      generateFood();
      score = 0;
      updateScore();
      hideStartMenu();
      scoreElement.style.display = 'block';

      intervalId = setInterval(update, 150);

      // Add event listeners for arrow keys and touch events
      document.addEventListener('keydown', handleKeyDown);
      canvas.addEventListener('touchstart', handleTouchStart);
      canvas.addEventListener('touchmove', handleTouchMove);
  }

  function handleKeyDown(event) {
      switch (event.key) {
          case 'ArrowUp':
              changeDirection('up');
              break;
          case 'ArrowDown':
              changeDirection('down');
              break;
          case 'ArrowLeft':
              changeDirection('left');
              break;
          case 'ArrowRight':
              changeDirection('right');
              break;
      }
  }

  function handleTouchStart(event) {
      touchStartX = event.touches[0].clientX;
      touchStartY = event.touches[0].clientY;
  }

  function handleTouchMove(event) {
      if (!touchStartX || !touchStartY) {
          return;
      }

      const touchEndX = event.touches[0].clientX;
      const touchEndY = event.touches[0].clientY;

      const deltaX = touchEndX - touchStartX;
      const deltaY = touchEndY - touchStartY;

      if (Math.abs(deltaX) > Math.abs(deltaY)) {
          // Horizontal swipe
          if (deltaX > 0) {
              changeDirection('right');
          } else {
              changeDirection('left');
          }
      } else {
          // Vertical swipe
          if (deltaY > 0) {
              changeDirection('down');
          } else {
              changeDirection('up');
          }
      }

      // Reset touch start coordinates
      touchStartX = null;
      touchStartY = null;
  }

  function changeDirection(newDirection) {
      // Ensure the snake cannot reverse its direction instantly
      if (
          (newDirection === 'up' && snake.direction !== 'down') ||
          (newDirection === 'down' && snake.direction !== 'up') ||
          (newDirection === 'left' && snake.direction !== 'right') ||
          (newDirection === 'right' && snake.direction !== 'left')
      ) {
          snake.direction = newDirection;
      }
  }

  function generateFood() {
      food = {
          x: Math.floor(Math.random() * gridSize),
          y: Math.floor(Math.random() * gridSize)
      };

      // Ensure food does not appear on the snake
      while (isFoodOnSnake()) {
          food.x = Math.floor(Math.random() * gridSize);
          food.y = Math.floor(Math.random() * gridSize);
      }
  }

  function isFoodOnSnake() {
      return snake.body.some(segment => segment.x === food.x && segment.y === food.y);
  }

  function draw() {
      ctx.clearRect(0, 0, canvasSize, canvasSize);

      // Draw Snake
      ctx.fillStyle = '#00f';
      snake.body.forEach(segment => {
          ctx.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);
      });

      // Draw Food
      ctx.fillStyle = '#f00';
      ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
  }

  function update() {
      const head = Object.assign({}, snake.body[0]);

      switch (snake.direction) {
          case 'up':
              head.y -= 1;
              break;
          case 'down':
              head.y += 1;
              break;
          case 'left':
              head.x -= 1;
              break;
          case 'right':
              head.x += 1;
              break;
      }

      if (head.x < 0 || head.x >= gridSize || head.y < 0 || head.y >= gridSize || isSnakeCollision()) {
          clearInterval(intervalId);
          showStartMenu();
          document.removeEventListener('keydown', handleKeyDown);
          canvas.removeEventListener('touchstart', handleTouchStart);
          canvas.removeEventListener('touchmove', handleTouchMove);
          return;
      }

      if (head.x === food.x && head.y === food.y) {
          snake.body.unshift(food);
          generateFood();
          score += 10;
          updateScore();
      } else {
          snake.body.unshift(head);
          snake.body.pop();
      }

      draw();
  }

  function isSnakeCollision() {
      const [head, ...body] = snake.body;
      return body.some(segment => segment.x === head.x && segment.y === head.y);
  }

  function updateScore() {
      scoreElement.textContent = `Score: ${score}`;
  }

  function showStartMenu() {
      startMenu.style.display = 'block';
      scoreElement.style.display = 'none';
  }

  function hideStartMenu() {
      startMenu.style.display = 'none';
  }

  window.startGame = function () {
      hideStartMenu();
      initializeGame();
  };
});