// Space Game — app.js

(() => {
  // Element references
  const $ = (sel, ctx = document) => ctx.querySelector(sel);
  const $$ = (sel, ctx = document) => Array.from(ctx.querySelectorAll(sel));

  const canvas = $('#myCanvas');
  const ctx = canvas.getContext('2d');

  const btnStart = $('[data-action="start"]');
  const btnPause = $('[data-action="pause"]');
  const btnReset = $('[data-action="reset"]');
  const btnMute = $('[data-action="mute"]');
  const btnFullscreen = $('[data-action="fullscreen"]');
  const btnOpenSettings = $('[data-action="open-settings"]');

  const outScore = $('#score');
  const outLevel = $('#level');
  const outLives = $('#lives');
  const outShield = $('#shield');
  const outFps = $('#fps');
  const outTime = $('#time');

  const settingsDialog = $('#settingsDialog');
  const pauseDialog = $('#pauseDialog');

  const inputBgUrl = $('#bgImageUrl');
  const inputSpriteUpload = $('#spriteUpload');

  const sfxShoot = $('#sfxShoot');
  const sfxExplosion = $('#sfxExplosion');
  const bgMusic = $('#bgMusic');

  // Game config and state
  const BASE_WIDTH = 1024;
  const BASE_HEIGHT = 768;

  const settings = {
    difficulty: 'normal',     // easy | normal | hard | insane
    graphics: 'medium',       // low | medium | high | ultra
    musicVolume: 0.6,         // 0..1
    sfxVolume: 0.8,           // 0..1
    controlScheme: 'wasd',    // wasd | arrows | custom
    muted: false
  };

  const difficultyTable = {
    easy:   { enemyRate: 1.6, enemySpeed: 60,  maxEnemies: 12 },
    normal: { enemyRate: 1.2, enemySpeed: 90,  maxEnemies: 16 },
    hard:   { enemyRate: 0.9, enemySpeed: 120, maxEnemies: 22 },
    insane: { enemyRate: 0.7, enemySpeed: 160, maxEnemies: 28 }
  };

  const graphicsTable = {
    low:   { glow: false, blur: 0, starLayers: 1 },
    medium:{ glow: false, blur: 0, starLayers: 2 },
    high:  { glow: true,  blur: 0, starLayers: 3 },
    ultra: { glow: true,  blur: 2, starLayers: 4 }
  };

  let state = {
    running: false,
    paused: false,
    lastTs: 0,
    accTime: 0,
    fps: 0,
    frameCount: 0,
    frameTimer: 0,
    score: 0,
    level: 1,
    lives: 3,
    shield: 100,
    timeSec: 0,
    enemySpawnTimer: 0,
    fireCooldown: 0,
    specialCooldown: 0,
  };

  // Entities
  const player = {
    x: BASE_WIDTH / 2,
    y: BASE_HEIGHT - 140,
    r: 18,
    angle: -Math.PI / 2,
    speed: 240,
    vx: 0,
    vy: 0
  };

  const bullets = [];
  const enemies = [];
  const particles = [];

  // Background image
  let bgImage = null;
  inputBgUrl?.addEventListener('change', () => {
    const url = inputBgUrl.value.trim();
    if (!url) { bgImage = null; return; }
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => { bgImage = img; };
    img.onerror = () => { bgImage = null; };
    img.src = url;
  });

  // High-DPI canvas scaling while drawing in CSS pixels
  function resizeCanvas() {
    const dpr = Math.max(1, window.devicePixelRatio || 1);
    canvas.width = Math.floor(BASE_WIDTH * dpr);
    canvas.height = Math.floor(BASE_HEIGHT * dpr);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  }
  resizeCanvas();
  window.addEventListener('resize', resizeCanvas);

  // Input handling
  const keys = new Set();
  const keyMap = {
    up:    ['w', 'W', 'ArrowUp'],
    down:  ['s', 'S', 'ArrowDown'],
    left:  ['a', 'A', 'ArrowLeft'],
    right: ['d', 'D', 'ArrowRight'],
    fire:  [' ', 'Spacebar'],
    special: ['Shift'],
    pause: ['p', 'P'],
    fullscreen: ['f', 'F'],
  };

  window.addEventListener('keydown', (e) => {
    keys.add(e.key);
    if (keyMap.pause.includes(e.key)) {
      e.preventDefault();
      togglePause();
    }
    if (keyMap.fullscreen.includes(e.key)) {
      e.preventDefault();
      toggleFullscreen();
    }
    if (keyMap.fire.includes(e.key)) e.preventDefault();
  }, { passive: false });

  window.addEventListener('keyup', (e) => {
    keys.delete(e.key);
  });

  // Buttons
  btnStart?.addEventListener('click', startGame);
  btnPause?.addEventListener('click', togglePause);
  btnReset?.addEventListener('click', resetGame);
  btnMute?.addEventListener('click', toggleMute);
  btnFullscreen?.addEventListener('click', toggleFullscreen);
  btnOpenSettings?.addEventListener('click', () => {
    settingsDialog?.showModal();
  });

  // Settings dialog apply/close
  settingsDialog?.addEventListener('close', () => {
    if (settingsDialog.returnValue === 'apply') {
      const diff = $('#difficulty').value;
      const gfx = $('#graphics').value;
      const musicV = Number($('#musicVolume').value) / 100;
      const sfxV = Number($('#sfxVolume').value) / 100;
      const scheme = $('#controlScheme').value;
      settings.difficulty = diff;
      settings.graphics = gfx;
      settings.musicVolume = clamp01(musicV);
      settings.sfxVolume = clamp01(sfxV);
      settings.controlScheme = scheme;
      applyVolumes();
    }
  });

  // Pause dialog buttons (form method="dialog" maps button value)
  pauseDialog?.addEventListener('close', () => {
    const val = pauseDialog.returnValue;
    if (val === 'resume') {
      togglePause(false);
    } else if (val === 'restart') {
      resetGame();
      startGame();
    }
  });

  // Fullscreen events for UI sync
  document.addEventListener('fullscreenchange', () => {
    // Could update icon or button state here if desired
  });

  // Audio helpers
  function applyVolumes() {
    const vMusic = settings.muted ? 0 : settings.musicVolume;
    const vSfx = settings.muted ? 0 : settings.sfxVolume;
    if (bgMusic) bgMusic.volume = clamp01(vMusic);
    if (sfxShoot) sfxShoot.volume = clamp01(vSfx);
    if (sfxExplosion) sfxExplosion.volume = clamp01(vSfx);
  }
  applyVolumes();

  function toggleMute() {
    settings.muted = !settings.muted;
    btnMute?.setAttribute('aria-pressed', String(settings.muted));
    applyVolumes();
  }

  // Game lifecycle
  function startGame() {
    if (!state.running) {
      state.running = true;
      state.paused = false;
      state.lastTs = 0;
      // Try starting BG music on user gesture; ignore if blocked
      bgMusic?.play?.().catch(() => {/* Autoplay may be blocked until further interaction */});
      requestAnimationFrame(loop);
    }
  }

  function togglePause(force = null) {
    if (!state.running) return;
    const next = (force === null) ? !state.paused : !!force;
    state.paused = next;
    if (state.paused) {
      pauseDialog?.showModal();
    } else {
      if (pauseDialog?.open) pauseDialog.close('resume');
      // Reset lastTs so dt spike doesn’t occur
      state.lastTs = 0;
      requestAnimationFrame(loop);
    }
  }

  function resetGame() {
    state = {
      running: false,
      paused: false,
      lastTs: 0, accTime: 0, fps: 0, frameCount: 0, frameTimer: 0,
      score: 0, level: 1, lives: 3, shield: 100, timeSec: 0,
      enemySpawnTimer: 0, fireCooldown: 0, specialCooldown: 0,
    };
    bullets.length = 0;
    enemies.length = 0;
    particles.length = 0;
    player.x = BASE_WIDTH / 2;
    player.y = BASE_HEIGHT - 140;
    player.vx = 0; player.vy = 0; player.angle = -Math.PI / 2;
    updateHUD();
  }

  // Fullscreen
  async function toggleFullscreen() {
    try {
      if (!document.fullscreenElement) {
        await (canvas.requestFullscreen?.() || $('#play')?.requestFullscreen?.());
      } else {
        await document.exitFullscreen?.();
      }
    } catch {
      // ignore
    }
  }

  // Loop
  function loop(ts) {
    if (!state.running || state.paused) return;
    if (!state.lastTs) state.lastTs = ts;
    const dt = Math.min(0.033, (ts - state.lastTs) / 1000); // clamp 33ms
    state.lastTs = ts;

    // FPS calc
    state.frameTimer += dt;
    state.frameCount++;
    if (state.frameTimer >= 0.5) {
      state.fps = Math.round(state.frameCount / state.frameTimer);
      state.frameCount = 0;
      state.frameTimer = 0;
    }

    // Update world
    update(dt);
    // Render
    render();

    requestAnimationFrame(loop);
  }

  // Update
  function update(dt) {
    state.timeSec += dt;

    // Controls
    const scheme = settings.controlScheme;
    const up = (scheme === 'arrows') ? keys.has('ArrowUp') : (keys.has('w') || keys.has('W') || keys.has('ArrowUp'));
    const down = (scheme === 'arrows') ? keys.has('ArrowDown') : (keys.has('s') || keys.has('S') || keys.has('ArrowDown'));
    const left = (scheme === 'arrows') ? keys.has('ArrowLeft') : (keys.has('a') || keys.has('A') || keys.has('ArrowLeft'));
    const right = (scheme === 'arrows') ? keys.has('ArrowRight') : (keys.has('d') || keys.has('D') || keys.has('ArrowRight'));
    const firing = keys.has(' ') || keys.has('Spacebar');
    const special = keys.has('Shift');

    const accel = player.speed;
    player.vx = (right ? 1 : 0) - (left ? 1 : 0);
    player.vy = (down ? 1 : 0) - (up ? 1 : 0);

    const mag = Math.hypot(player.vx, player.vy) || 1;
    player.vx = (player.vx / mag) * accel;
    player.vy = (player.vy / mag) * accel;

    player.x += player.vx * dt;
    player.y += player.vy * dt;

    // Boundaries
    player.x = clamp(player.x, player.r + 4, BASE_WIDTH - player.r - 4);
    player.y = clamp(player.y, player.r + 4, BASE_HEIGHT - player.r - 4);

    // Aim angle toward movement if moving
    if (mag > 1) {
      player.angle = Math.atan2(player.vy, player.vx);
    }

    // Firing
    state.fireCooldown -= dt;
    if (firing && state.fireCooldown <= 0) {
      fireBullet();
      state.fireCooldown = 0.15;
    }

    // Special (smart-bomb)
    state.specialCooldown -= dt;
    if (special && state.specialCooldown <= 0 && state.shield >= 25) {
      state.specialCooldown = 6;
      state.shield = Math.max(0, state.shield - 25);
      // Clear enemies in a wave
      enemies.splice(0, enemies.length);
      explode(player.x, player.y, 28, 'special');
      sfxExplosion?.cloneNode(true)?.play?.().catch(()=>{});
    }

    // Enemies spawn
    const diff = difficultyTable[settings.difficulty] || difficultyTable.normal;
    state.enemySpawnTimer -= dt;
    if (state.enemySpawnTimer <= 0 && enemies.length < diff.maxEnemies) {
      spawnEnemy(diff.enemySpeed);
      state.enemySpawnTimer = diff.enemyRate;
    }

    // Update bullets
    for (let i = bullets.length - 1; i >= 0; i--) {
      const b = bullets[i];
      b.x += Math.cos(b.a) * b.speed * dt;
      b.y += Math.sin(b.a) * b.speed * dt;
      b.life -= dt;
      if (b.life <= 0 || b.x < -20 || b.x > BASE_WIDTH + 20 || b.y < -20 || b.y > BASE_HEIGHT + 20) {
        bullets.splice(i, 1);
      }
    }

    // Update enemies
    for (let i = enemies.length - 1; i >= 0; i--) {
      const e = enemies[i];
      const dx = player.x - e.x;
      const dy = player.y - e.y;
      const ang = Math.atan2(dy, dx);
      e.x += Math.cos(ang) * e.speed * dt;
      e.y += Math.sin(ang) * e.speed * dt;
      e.a = ang;

      // Bullet collision
      let hit = false;
      for (let j = bullets.length - 1; j >= 0; j--) {
        const b = bullets[j];
        if (dist2(e.x, e.y, b.x, b.y) < (e.r + b.r) * (e.r + b.r)) {
          bullets.splice(j, 1);
          hit = true;
          break;
        }
      }
      if (hit) {
        state.score += Math.round(25 + Math.random() * 25);
        explode(e.x, e.y, 10, 'enemy');
        sfxExplosion?.cloneNode(true)?.play?.().catch(()=>{});
        enemies.splice(i, 1);
        continue;
      }

      // Player collision
      if (dist2(e.x, e.y, player.x, player.y) < (e.r + player.r) * (e.r + player.r)) {
        state.shield -= 25;
        explode(player.x, player.y, 16, 'player');
        sfxExplosion?.cloneNode(true)?.play?.().catch(()=>{});
        enemies.splice(i, 1);
        if (state.shield <= 0) {
          state.lives -= 1;
          state.shield = 100;
          if (state.lives <= 0) {
            gameOver();
            return;
          }
        }
      }
    }

    // Particles
    for (let i = particles.length - 1; i >= 0; i--) {
      const p = particles[i];
      p.x += p.vx * dt;
      p.y += p.vy * dt;
      p.life -= dt;
      if (p.life <= 0) particles.splice(i, 1);
    }

    // Level scaling
    const newLevel = 1 + Math.floor(state.timeSec / 30);
    if (newLevel !== state.level) state.level = newLevel;

    updateHUD();
  }

  function updateHUD() {
    outScore.textContent = String(state.score);
    outLevel.textContent = String(state.level);
    outLives.textContent = String(state.lives);
    outShield.textContent = `${Math.max(0, Math.min(100, Math.round(state.shield)))}%`;
    outFps.textContent = String(state.fps);
    outTime.textContent = toMMSS(state.timeSec);
  }

  // Render
  function render() {
    // Clear
    ctx.clearRect(0, 0, BASE_WIDTH, BASE_HEIGHT);

    // Background
    if (bgImage) {
      drawCoverImage(bgImage, 0, 0, BASE_WIDTH, BASE_HEIGHT);
    } else {
      // Starfield layers
      const starLayers = graphicsTable[settings.graphics]?.starLayers ?? 2;
      for (let i = 0; i < starLayers; i++) {
        const density = 40 + i * 30;
        drawStars(density, i * 1000);
      }
    }

    // Effects
    const gfx = graphicsTable[settings.graphics] || graphicsTable.medium;
    if (gfx.blur) {
      ctx.filter = `blur(${gfx.blur}px)`;
    }

    // Enemies
    ctx.save();
    for (const e of enemies) {
      ctx.save();
      ctx.translate(e.x, e.y);
      ctx.rotate(e.a);
      ctx.fillStyle = '#ff6b6b';
      if (gfx.glow) {
        ctx.shadowColor = '#ff6b6b';
        ctx.shadowBlur = 12;
      }
      ctx.beginPath();
      ctx.arc(0, 0, e.r, 0, Math.PI * 2);
      ctx.fill();
      ctx.restore();
    }
    ctx.restore();

    // Bullets
    ctx.save();
    for (const b of bullets) {
      ctx.save();
      ctx.translate(b.x, b.y);
      ctx.rotate(b.a);
      ctx.fillStyle = '#a78bfa';
      if (gfx.glow) {
        ctx.shadowColor = '#a78bfa';
        ctx.shadowBlur = 10;
      }
      ctx.fillRect(-2, -8, 4, 16);
      ctx.restore();
    }
    ctx.restore();

    // Player
    ctx.save();
    ctx.translate(player.x, player.y);
    ctx.rotate(player.angle);
    ctx.fillStyle = '#5ac8fa';
    if (gfx.glow) {
      ctx.shadowColor = '#5ac8fa';
      ctx.shadowBlur = 14;
    }
    drawTriangle(0, 0, player.r);
    ctx.restore();

    // Particles
    ctx.save();
    for (const p of particles) {
      ctx.globalAlpha = Math.max(0, p.life / p.maxLife);
      ctx.fillStyle = p.color;
      ctx.fillRect(p.x, p.y, p.s, p.s);
    }
    ctx.globalAlpha = 1;
    ctx.restore();

    // Reset filter
    ctx.filter = 'none';
  }

  // Helpers: drawing
  function drawTriangle(x, y, r) {
    ctx.beginPath();
    ctx.moveTo(x + r, y);
    ctx.lineTo(x - r * 0.7, y - r * 0.9);
    ctx.lineTo(x - r * 0.7, y + r * 0.9);
    ctx.closePath();
    ctx.fill();
  }

  function drawStars(count, seed) {
    // Simple deterministic star positions based on seed
    const rand = mulberry32(Math.floor(state.timeSec * 60) + seed);
    ctx.save();
    ctx.fillStyle = 'rgba(255,255,255,0.9)';
    for (let i = 0; i < count; i++) {
      const x = Math.floor(rand() * BASE_WIDTH);
      const y = Math.floor(rand() * BASE_HEIGHT);
      const s = rand() * 2;
      ctx.fillRect(x, y, s, s);
    }
    ctx.restore();
  }

  function drawCoverImage(img, x, y, w, h) {
    const iw = img.naturalWidth || img.width;
    const ih = img.naturalHeight || img.height;
    const scale = Math.max(w / iw, h / ih);
    const dw = iw * scale;
    const dh = ih * scale;
    const dx = x + (w - dw) / 2;
    const dy = y + (h - dh) / 2;
    ctx.drawImage(img, dx, dy, dw, dh);
  }

  // Spawn and effects
  function spawnEnemy(speed) {
    // Spawn at a random edge
    const edge = Math.floor(Math.random() * 4);
    let x = 0, y = 0;
    if (edge === 0) { x = Math.random() * BASE_WIDTH; y = -20; }
    if (edge === 1) { x = BASE_WIDTH + 20; y = Math.random() * BASE_HEIGHT; }
    if (edge === 2) { x = Math.random() * BASE_WIDTH; y = BASE_HEIGHT + 20; }
    if (edge === 3) { x = -20; y = Math.random() * BASE_HEIGHT; }
    enemies.push({
      x, y, r: 16 + Math.random() * 8, a: 0,
      speed: speed * (0.8 + Math.random() * 0.4)
    });
  }

  function fireBullet() {
    bullets.push({
      x: player.x + Math.cos(player.angle) * (player.r + 6),
      y: player.y + Math.sin(player.angle) * (player.r + 6),
      a: player.angle,
      speed: 540,
      life: 1.2,
      r: 6
    });
    // Low-latency clone for overlapping sounds
    sfxShoot?.cloneNode(true)?.play?.().catch(()=>{});
  }

  function explode(x, y, count, type) {
    for (let i = 0; i < count; i++) {
      const a = Math.random() * Math.PI * 2;
      const sp = 60 + Math.random() * 180;
      particles.push({
        x, y,
        vx: Math.cos(a) * sp,
        vy: Math.sin(a) * sp,
        s: 2 + Math.random() * 3,
        life: 0.6 + Math.random() * 0.6,
        maxLife: 1.2,
        color: type === 'player' ? '#ff6b6b' : (type === 'special' ? '#5ac8fa' : '#a78bfa')
      });
    }
  }

  // Game over
  function gameOver() {
    state.running = false;
    // Persist score
    try {
      const key = 'spaceGameScores';
      const list = JSON.parse(localStorage.getItem(key) || '[]');
      list.push({ initials: 'YOU', score: state.score, t: Date.now() });
      list.sort((a, b) => b.score - a.score);
      localStorage.setItem(key, JSON.stringify(list.slice(0, 10)));
      renderScores(list.slice(0, 10));
    } catch {
      // ignore
    }
    // Show pause dialog as "Restart"
    if (!pauseDialog?.open) pauseDialog?.showModal();
  }

  function renderScores(list) {
    const ol = $('#scores');
    if (!ol) return;
    ol.innerHTML = '';
    list.forEach(item => {
      const li = document.createElement('li');
      const pretty = item.score.toLocaleString();
      li.dataset.initials = item.initials || 'YOU';
      li.dataset.score = String(item.score);
      li.textContent = `${li.dataset.initials} — ${pretty}`;
      ol.appendChild(li);
    });
  }

  // Utilities
  function clamp(v, a, b) { return Math.max(a, Math.min(b, v)); }
  function clamp01(v) { return clamp(v, 0, 1); }
  function dist2(x1, y1, x2, y2) { const dx = x1 - x2, dy = y1 - y2; return dx*dx + dy*dy; }
  function toMMSS(sec) {
    const s = Math.floor(sec);
    const m = Math.floor(s / 60);
    const r = s % 60;
    return `${String(m).padStart(2, '0')}:${String(r).padStart(2, '0')}`;
  }
  function mulberry32(a) {
    return function() {
      let t = a += 0x6D2B79F5;
      t = Math.imul(t ^ t >>> 15, t | 1);
      t ^= t + Math.imul(t ^ t >>> 7, t | 61);
      return ((t ^ t >>> 14) >>> 0) / 4294967296;
    }
  }

  // Initial scores render
  try {
    const key = 'spaceGameScores';
    const list = JSON.parse(localStorage.getItem(key) || '[]');
    renderScores(list.slice(0, 10));
  } catch {
    // ignore
  }

  // Expose minimal API for external hooking if needed
  window.SpaceGame = {
    start: startGame,
    pause: () => togglePause(true),
    resume: () => togglePause(false),
    reset: resetGame,
    fullscreen: toggleFullscreen,
    mute: toggleMute
  };
})();