import { createEngine } from '@pixeljs/core';
import {
  runGame,
  GAME_WIDTH,
  GAME_HEIGHT,
  type DemoEngine,
  type GameController,
  type GameSnapshot,
} from '../javascript/game.js';
import { bindGameControls } from '../javascript/controls.js';

// The typed consumer uses the same Pac-Man game as the JavaScript example.
// Its controller declarations preserve the actual @pixeljs/core engine type.
const canvas = document.querySelector<HTMLCanvasElement>('canvas');
const status = document.querySelector<HTMLElement>('[data-status]');
const pause = document.querySelector<HTMLButtonElement>('[data-pause]');
const restart = document.querySelector<HTMLButtonElement>('[data-restart]');
if (!canvas || !status || !pause || !restart) throw new Error('The example markup is incomplete.');

let game: GameController | undefined;
let engine: DemoEngine | undefined;
let paused = false;
const unbindControls = bindGameControls(canvas, document, () => game);
try {
  engine = await createEngine({
    canvas,
    width: GAME_WIDTH,
    height: GAME_HEIGHT,
    onError: (error: unknown): void => {
      status.textContent = `Runtime error: ${String(error)}`;
    },
  });
  game = runGame(engine, {
    onProgress: (snapshot: GameSnapshot): void => {
      status.textContent = `Score ${snapshot.score} · Lives ${snapshot.lives} · Level ${snapshot.level} · ${snapshot.status}`;
    },
  });
  pause.disabled = false;
  restart.disabled = false;
  canvas.focus({ preventScroll: true });
  restart.addEventListener('click', (): void => {
    if (!game) return;
    game.restart();
    if (paused) game.resume();
    paused = false;
    pause.textContent = 'Pause';
    canvas.focus({ preventScroll: true });
  });
  pause.addEventListener('click', (): void => {
    if (!game) return;
    paused = !paused;
    if (paused) game.pause();
    else game.resume();
    pause.textContent = paused ? 'Resume' : 'Pause';
    if (!paused) canvas.focus({ preventScroll: true });
  });
  window.addEventListener(
    'pagehide',
    (): void => {
      unbindControls();
      void game?.dispose();
    },
    { once: true },
  );
} catch (error: unknown) {
  await engine?.dispose();
  status.textContent = `Unable to start PixelJS: ${String(error)}`;
}