const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
ctx.imageSmoothingEnabled = false;

const backgroundImg = new Image();
backgroundImg.src = "/images/plainSky.png"

const cloudsImg = new Image();
cloudsImg.src = "/images/clouds.png";

const CLOUD_HEIGHT = canvas.height * 4;
let cloudY1 = 0;
let cloudY2 = -CLOUD_HEIGHT;
let cloudScrollSpeed = 0.75; // Adjust to match your game’s feel
let cloudsMoving = false;

const goatImg = new Image();
goatImg.src = "/images/goatOutline.png";

// Assume original goat pixel art is 32x32. Adjust this if needed.
const GOAT_PIXEL_WIDTH = 18;
const GOAT_PIXEL_HEIGHT = 32;
const GOAT_SCALE = 3;
const JUNK_PIXEL_SIZE = 16;
const JUNK_SCALE = 3;
const JUNK_SIZE = JUNK_PIXEL_SIZE * JUNK_SCALE;

let sound = true;

let score;

const goat = {
  width: GOAT_PIXEL_WIDTH * GOAT_SCALE,
  height: GOAT_PIXEL_HEIGHT * GOAT_SCALE,
  x: 180,
  y: 350,
  speed: 1.2
};

let keys = {};
document.addEventListener("keydown", e => keys[e.key] = true);
document.addEventListener("keyup", e => keys[e.key] = false);

// Game state variable
let gameState = "start"; // Can be 'start', 'playing', or 'gameOver'

function update() {
  if (gameState === "playing") {
    if (keys["ArrowLeft"] || keys["a"] || touchDirection === "left"){
      goat.x -= goat.speed;
    }
    else if (keys["ArrowRight"] || keys["d"] || touchDirection === "right"){
      goat.x += goat.speed;
    }
    goat.x = Math.max(0, Math.min(canvas.width - goat.width, goat.x));

    for (let i = junkList.length - 1; i >= 0; i--) {
      const junk = junkList[i];
      junk.y -= junk.speed;
    
      // Remove junk if it goes off screen
      if (junk.y > canvas.height) {
        junkList.splice(i, 1);
      }
    }

    for (let i = 0; i < junkList.length; i++) {
      if (isColliding(goat, junkList[i])) {
        stopMusic()
        gameState = "gameOver";
        cloudsMoving = false;
        playDeathSound();
        if(highScore < score){
          highScore = score;
          localStorage.setItem("highScore", highScore);
        }
        document.getElementById("startButton").style.display = "block";
        document.getElementById("highScore").style.display = "block";
        document.getElementById("homeButton").style.display = "flex";
        document.getElementById("highScore").textContent = "High Score: " + highScore;
        document.getElementById("score").style.right = "auto";
        document.getElementById("score").style.top = "20%";
        document.getElementById("score").style.left = "50%";
        document.getElementById("score").style.transform = "translateX(-50%)";
        document.getElementById("startButton").innerHTML = "Play Again";
        document.getElementById("title").style.display = "block";
        document.getElementById("soundToggle").style.display = "flex";
        cancelAnimationFrame(gameLoopId);
        return;
      }
    }
  }

  if (cloudsMoving === true){
    cloudY1 -= cloudScrollSpeed;
    cloudY2 -= cloudScrollSpeed;

    if (cloudY1 <= -CLOUD_HEIGHT) {
      cloudY1 = cloudY2 + CLOUD_HEIGHT;
    }
    if (cloudY2 <= -CLOUD_HEIGHT) {
      cloudY2 = cloudY1 + CLOUD_HEIGHT;
    }
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas

  // Draw the background image with scaling to match the pixel grid
  if (backgroundImg.complete) {
    const backgroundScale = 3; // Adjust this scale to match your design
    ctx.drawImage(backgroundImg, 0, 0, backgroundImg.width * backgroundScale, backgroundImg.height * backgroundScale);
  }

  if (cloudsImg.complete) {
    // Draw clouds at their current positions
    ctx.drawImage(cloudsImg, 0, cloudY1, canvas.width, CLOUD_HEIGHT);
    ctx.drawImage(cloudsImg, 0, cloudY2, canvas.width, CLOUD_HEIGHT);
  }

  // Draw other game elements (goat, junk, etc.)
  if (gameState === "start") {
    drawStartScreen();
  } else if (gameState === "playing") {
    drawGame();
  } else if (gameState === "gameOver") {
    drawGameOverScreen();
  } else if (gameState === "paused") {
    drawGame();
  }
}


function drawStartScreen() {
  document.getElementById("title").style.display = "block";
  document.getElementById("title").innerHTML = "Goat Glide";
}

function drawGame() {
  for (const junk of junkList) {
    if (junk.img.complete) {
      ctx.drawImage(junk.img, junk.x, junk.y, junk.width, junk.height);
    }
  }  

  if (goatImg.complete) {
    ctx.drawImage(goatImg, goat.x, goat.y, goat.width, goat.height);
  }
}

function drawGameOverScreen() {
  document.getElementById("title").style.display = "block";
  document.getElementById("title").innerHTML = "Game Over";
  document.getElementById("pauseButton").style.display = "none";
  junkSpeed = 0.5;
}

let lastSpawn = 0;
const spawnInterval = 1000; // every 1 second
let gameLoopId; // To store the animation frame ID

function loop(timestamp) {
  if (gameState === "playing") {
    if (timestamp - lastSpawn > spawnInterval) {
      spawnJunk();
      lastSpawn = timestamp;
      junkSpeed += 0.03;
    }
  }

  update();
  draw();
  gameLoopId = requestAnimationFrame(loop); // Save the loop ID
}

gameLoopId = requestAnimationFrame(loop); // Start the loop

const junkList = [];
const junkImages = [
  "/images/box.png",
  "/images/boxWithLabel.png",
  "/images/trashBag.png",
  "/images/football.png",
  "/images/rubberDuck.png",
  "/images/TV.png",
  "/images/trafficCone.png",
  "/images/toilet.png",
  "/images/fan.png",
  "/images/shoe.png",
  "/images/wheel.png",
  "/images/tennisBall.png",
  "/images/pillow.png",
  "/images/trashCan.png",
  "/images/camera.png",
  "/images/bluepanda.png",
  "/images/banana.png",
  "/images/iceCream.png",
  "/images/vhsTape.png",
  "/images/birdHouse.png",
  "/images/apple.png",
  "/images/sunGlasses.png",
  "/images/coffee.png"
];
let junkSpeed = 0.5;

function spawnJunk() {
  const junk = {
    x: Math.random() * (canvas.width - JUNK_SIZE),
    y: 615,
    width: JUNK_SIZE,
    height: JUNK_SIZE,
    speed: junkSpeed + Math.random() * 0.5,
    img: new Image()
  };
  junk.img.src = junkImages[Math.floor(Math.random() * junkImages.length)];
  junkList.push(junk);
  score += 1;
  document.getElementById("score").textContent = "score: " + score;
}

function isColliding(a, b) {
  const padding = 5; // Set a margin for the collision
  return (
    a.x + padding < b.x + b.width - padding &&
    a.x + a.width - padding > b.x + padding &&
    a.y + padding < b.y + b.height - padding &&
    a.y + a.height - padding > b.y + padding
  );
}

// Handle keyboard input for state transitions
document.addEventListener("keydown", e => {
  if (e.key === "Enter") {
    if (gameState === "start") {
      gameState = "playing";
      cloudsMoving = true;
      document.getElementById("pauseButton").style.display = "flex";
      document.getElementById("startButton").style.display = "none";
      document.getElementById("aboutButton").style.display = "none";
      document.getElementById("soundToggle").style.display = "none";
      document.getElementById("highScore").style.display = "none";
      document.getElementById("score").style.display = "block";
      document.getElementById("score").style.right = "20px";
      document.getElementById("score").style.top = "20px";
      document.getElementById("score").style.left = "";
      document.getElementById("score").style.transform = "";
      score = 0;
      document.getElementById("score").textContent = "score: " + score;
      document.getElementById("title").style.display = "none";
      document.getElementById("title").innerHTML = "";
      playRandomMusic()
    } else if (gameState === "gameOver") {
      restartGame();
      document.getElementById("title").style.display = "none";
      document.getElementById("title").innerHTML = "";
    }
  }
});

function startScript(){
  if (gameState === "start"){
    gameState = "playing";
    cloudsMoving = true;
    document.getElementById("pauseButton").style.display = "flex";
    document.getElementById("startButton").style.display = "none";
    document.getElementById("aboutButton").style.display = "none";
    document.getElementById("soundToggle").style.display = "none";
    document.getElementById("highScore").style.display = "none";
    document.getElementById("score").style.display = "block";
    document.getElementById("score").style.right = "20px";
    document.getElementById("score").style.top = "20px";
    document.getElementById("score").style.left = "";
    document.getElementById("score").style.transform = "";
    score = 0;
    document.getElementById("score").textContent = "score: " + score;
    document.getElementById("title").style.display = "none";
    document.getElementById("title").innerHTML = "";
    playRandomMusic()
  } else if (gameState === "gameOver") {
    restartGame();
    document.getElementById("title").style.display = "none";
    document.getElementById("title").innerHTML = "";
  }
}

function restartGame() {
  junkList.length = 0; // Clear any leftover junk
  document.getElementById("soundToggle").style.display = "none";
  document.getElementById("startButton").style.display = "none";
  document.getElementById("homeButton").style.display = "none";
  document.getElementById("title").style.display = "none";
  document.getElementById("pauseButton").style.display = "flex";
  document.getElementById("highScore").style.display = "none";
  document.getElementById("score").style.display = "block";
  document.getElementById("score").style.right = "20px";
  document.getElementById("score").style.top = "20px";
  document.getElementById("score").style.left = "";
  document.getElementById("score").style.transform = "";
  gameState = "playing";
  cloudsMoving = true;
  goat.x = 180;  // Reset goat position
  goat.y = 350;  // Reset goat position
  score = 0;
  document.getElementById("score").textContent = "score: " + score;
  playRandomMusic()
}

let touchStartX = null;
let touchDirection = null;

canvas.addEventListener("touchstart", e => {
  touchStartX = e.touches[0].clientX; // Record initial touch position
  touchDirection = null; // Reset direction
});

canvas.addEventListener("touchmove", e => {
  if (!touchStartX) return; // Ignore if no touch start

  const currentX = e.touches[0].clientX;
  const deltaX = currentX - touchStartX;

  // Slow down the movement by multiplying deltaX by a factor
  const speedFactor = 0.5;  // Adjust this factor to make the goat move slower
  goat.x += deltaX * speedFactor; 

  // Update touchStartX to keep moving in sync with the finger
  touchStartX = currentX;
});

canvas.addEventListener("touchend", () => {
  touchStartX = null; // Reset the touch position when the touch ends
});

function onLoadScript(){
  highScore = localStorage.getItem("highScore");
  sound = localStorage.getItem("sound");
  if(sound === "true"){
    document.getElementById("soundToggleImg").src = "/images/volume-high-solid.svg"
  }
  else{
    document.getElementById("soundToggleImg").src = "/images/volume-xmark-solid.svg"
  }
}

function togglePause() {
  if (gameState === "playing") {
    gameState = "paused";
    cloudsMoving = false;

    document.getElementById("bigHomeButton").style.display = "block";
    document.getElementById("title").style.display = "block";
    document.getElementById("title").innerHTML = "Game Paused";
    document.getElementById("pauseImg").src = "/images/play-solid.svg";
    document.getElementById("bigPauseButton").style.display = "block";
    ctx.filter = 'blur(5px)';

    var audio = document.getElementById('audioPlayer');
    audio.volume = 0.3;

  } else if (gameState === "paused") {
    gameState = "playing";
    cloudsMoving = true;
    
    document.getElementById("bigHomeButton").style.display = "none";
    document.getElementById("bigPauseButton").style.display = "none";
    document.getElementById("title").style.display = "none";
    document.getElementById("title").innerHTML = "";
    document.getElementById("pauseImg").src = "/images/pause-solid.svg";
    ctx.filter = 'none';

    var audio = document.getElementById('audioPlayer');
    audio.volume = 1;
  }
}

document.addEventListener("keydown", e => {
  if (e.key === "Escape") {
    if (gameState === "playing" || gameState === "paused") {
      togglePause();
    }
  }   
});


function playRandomMusic() {
  if(sound === "true"){
    var audio = document.getElementById('audioPlayer');

    const songs = [
      "/sounds/4eyes.ogg",
      "/sounds/acoustic_comedy.mp3",
      "/sounds/goofy_attitude.mp3",
      "/sounds/oga_majitapioka.mp3",
      "/sounds/POL-chubby-cat-short.wav"
    ];
  
    // Function to play a new song at random
    function playNextSong() {
      var randomSong = songs[Math.floor(Math.random() * songs.length)];
      audio.src = randomSong; // Set the new song
  
      // Wait for the audio to be ready to play before starting
      audio.load();  // Explicitly load the new song
      audio.play().catch(err => console.error("Error playing the audio:", err));  // Handle potential errors
  
      // Reset the current time to 0 in case it's interrupted
      audio.currentTime = 0;
    }
  
    // Remove any previous event listeners to prevent multiple listeners from stacking
    audio.removeEventListener('ended', playNextSong);
  
    // Add event listener to play next song after the current one ends
    audio.addEventListener('ended', function() {
      // Delay playing the next song to allow proper switching
      setTimeout(playNextSong, 100);  // Small delay before changing to a new song
    });
  
    // Start the first song
    playNextSong();
  }
}

function stopMusic() {
  var audio = document.getElementById('audioPlayer');
  audio.pause();
  audio.currentTime = 0;
  audio.src = "";
}

function showAbout(){
  document.getElementById("aboutBox").style.display = "block";
  document.getElementById("aboutButton").style.display = "none";
  document.getElementById("soundToggle").style.display = "none";
}

function closeAbout(){
  document.getElementById("aboutBox").style.display = "none";
  document.getElementById("aboutButton").style.display = "flex";
  document.getElementById("soundToggle").style.display = "flex";
}

function toggleSound() {
  const img = document.getElementById("soundToggleImg");
  const currentSrc = img.src;

  if (currentSrc.includes("volume-high-solid.svg")) {
    img.src = "/images/volume-xmark-solid.svg";
    sound = "false";
    localStorage.setItem("sound", "false");
  } else if (currentSrc.includes("volume-xmark-solid.svg")) {
    img.src = "/images/volume-high-solid.svg";
    sound = "true";
    localStorage.setItem("sound", "true");
  }
}

function playDeathSound() {
  if(sound === "true"){
    var audio = document.getElementById('deathAudioPlayer');

    audio.src = "/sounds/Goat Bah-SoundBible.com-959734934.mp3"

    audio.load();
    audio.play().catch(err => console.error("Error playing the audio:", err));

    audio.currentTime = 0;
  }
}