<script>
  import {onMount} from 'svelte';
  import p5 from 'p5';
  import {createSketch} from './sketch.js';

  import StartScreen from './screens/StartScreen.svelte';
  import GameOverScreen from './screens/GameOverScreen.svelte';
  import GameClearScreen from './screens/GameClearScreen.svelte';

  let gameState = "start"; // 'start', 'play', 'clear', 'over'
  let p5Instance;
  let life = 3;
  let score = 0;

  function startGame() {
    gameState = "play";
  }

  function restartGame() {
    gameState = "start";
  }

  function retryGame() {
    gameState = "play";
  }

  function receiveGameData(data) {
    life = data.life;
    score = data.score;
    if (data.state && data.state !== gameState && data.state !== "play") {
      gameState = data.state;
    }
  }

  let hasStarted = false;

  $: if (gameState === "play" && !hasStarted) {
    hasStarted = true;
    setTimeout(() => {
      const canvasParent = document.getElementById('game-canvas');
      if (canvasParent) {
        p5Instance = new p5((p) => createSketch(p, receiveGameData), 'game-canvas');
      }
    }, 0);
  }

  $: if (gameState !== "play" && p5Instance) {
    p5Instance.remove();
    p5Instance = null;
    hasStarted = false;
  }
  
  $: if (gameState == "over" || gameState == "clear") {
    if (p5Instance) {
      p5Instance.remove();
      p5Instance = null;
    }
  }

  onMount(() => {
    const preventArrowScroll = (e) => {
      const keys = ["ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", "w", "a", "s", "d", "W", "A", "S", "D"];
      if (keys.includes(e.key)) {
        e.preventDefault();
      }
    };
    window.addEventListener("keydown", preventArrowScroll, {passive: false});

    const canvasParent = document.getElementById("game-canvas");
    if (canvasParent) {
      canvasParent.setAttribute("tabindex", "0");
      canvasParent.focus();
    }

    return () => {
      window.removeEventListener("keydown", preventArrowScroll);
    };
  });
</script>


{#if gameState == "start"}
  <StartScreen on:start={startGame} />
{:else if gameState == "play"}
  <div class="container">
    <div class="hud">
      <div>Score: {score}</div>
      <div class="life-icons">
        <span class="label">Life:</span>
        {#each Array(life) as _, i}
          <img src="/assets/items/heart.png" alt="life" class="life-icon" />
        {/each}
      </div>
    </div>
    <div id="game-canvas" tabindex="0"></div>
  </div>
{:else if gameState === "clear"}
  <GameClearScreen on:clear={restartGame} />
{:else if gameState == "over"}
  <GameOverScreen on:retry={retryGame} on:restart={restartGame} />
{/if}

<style>
  .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
  }

  #game-canvas {
    width: 1000px;
    height: 520px;
    background-color: black;
    margin-top: 20px;
  }

  .hud {
    display: flex;
    justify-content: center;
    gap: 40px;
    font-size: 1.2rem;
    color: white;
  }

  .life-icons {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-direction: row-reverse;
}

.life-icon {
  width: 20px;
  height: 20px;
}

.life-icons .label {
  margin-right: 6px;
  color: white;
  order: 1;
}

</style>