<script>
  import { getGame, bundleUrl } from "../lib/api.js";
  import { push } from "../lib/router.js";

  let { id } = $props();

  let game = $state(null);
  let loading = $state(true);
  let error = $state("");
  let emulatorReady = $state(false);

  let dosContainer;

  async function load() {
    loading = true;
    try {
      game = await getGame(id);
    } catch (e) {
      error = "Game not found";
    }
    loading = false;
  }

  function startEmulator() {
    if (!game || !game.ready) return;

    // Load js-dos from CDN dynamically
    const css = document.createElement("link");
    css.rel = "stylesheet";
    css.href = "https://v8.js-dos.com/latest/js-dos.css";
    document.head.appendChild(css);

    const script = document.createElement("script");
    script.src = "https://v8.js-dos.com/latest/js-dos.js";
    script.onload = () => {
      const url = bundleUrl(game);
      if (window.Dos && dosContainer && url) {
        window.Dos(dosContainer, { url });
        emulatorReady = true;
      }
    };
    document.head.appendChild(script);
    emulatorReady = true;
  }

  $effect(() => { load(); });

  // Cleanup on unmount
  $effect(() => {
    return () => {
      // js-dos handles its own cleanup
    };
  });
</script>

{#if loading}
  <div class="loading">Loading...</div>
{:else if error}
  <div class="error">{error}</div>
  <a href="#/" class="back-link">← Back to Library</a>
{:else if game}
  <div class="play-page">
    <div class="play-header">
      <a href={`#/game/${game.id}`} class="back-link">← {game.title}</a>
      {#if !emulatorReady}
        <button class="btn btn-primary" onclick={startEmulator}>
          ▶ Launch Emulator
        </button>
      {/if}
    </div>

    {#if emulatorReady}
      <div class="emulator-wrapper">
        <div bind:this={dosContainer} class="dos-container"></div>
      </div>
    {:else}
      <div class="launch-screen">
        <div class="launch-icon">🕹️</div>
        <h2>{game.title}</h2>
        <p class="launch-info">
          {game.year ? `${game.year} · ` : ""}{game.genre || ""}
        </p>
        <p class="launch-hint">Click "Launch Emulator" above to start playing</p>
        <p class="save-hint">💾 Game saves are stored automatically in your browser</p>
      </div>
    {/if}
  </div>
{/if}

<style>
  .play-page { padding: 16px 0; }
  .loading { text-align: center; padding: 60px; color: var(--text-dim); }
  .error { background: #331111; border: 1px solid #cc3333; color: #ff6666; padding: 12px; border-radius: var(--radius-sm); margin-bottom: 16px; }
  .back-link { display: inline-block; color: var(--text-dim); }
  .back-link:hover { color: var(--phosphor); }
  .play-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
  }
  .emulator-wrapper {
    background: #000;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
  }
  .dos-container {
    width: 100%;
    aspect-ratio: 4/3;
    max-height: 80vh;
  }
  .dos-container :global(canvas) {
    width: 100% !important;
    height: 100% !important;
  }
  .launch-screen {
    text-align: center;
    padding: 80px 20px;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
  }
  .launch-icon { font-size: 4rem; margin-bottom: 16px; }
  .launch-screen h2 { color: var(--phosphor); font-family: var(--font-mono); margin-bottom: 8px; }
  .launch-info { color: var(--text-dim); margin-bottom: 24px; }
  .launch-hint { color: var(--text-dim); margin-bottom: 8px; }
  .save-hint {
    color: var(--phosphor-dim);
    font-size: 0.85rem;
    margin-top: 16px;
    background: var(--phosphor-burn);
    display: inline-block;
    padding: 6px 16px;
    border-radius: 12px;
  }
</style>