import { Scene } from 'phaser';
import { GAME_WIDTH, GAME_HEIGHT } from '../config/game.config.js';

export class BootScene extends Scene {
  constructor() {
    super({ key: 'BootScene' });
  }

  preload() {
    // New individual sprites
    this.load.image('player_idle', 'assets/sprites/player_idle.png');
    this.load.image('player_dead', 'assets/sprites/player_dead.png');
    this.load.image('player_propeller', 'assets/sprites/player_propeller.png');
    this.load.image('propeller_hat', 'assets/sprites/propeller_hat.png');
    this.load.image('rocket', 'assets/sprites/rocket.png');
    this.load.image('player_rocket', 'assets/sprites/player_rocket.png');
    this.load.image('enemy_bug', 'assets/sprites/enemy_bug.png');
  }

  create() {
    this.createBackgrounds();
    this.createBackgroundTextures();
    this.createParticleTextures();
    this.scene.start('MenuScene');
  }

  // --- Canvas2D background painting (rich gradients, glows, bokeh) ---

  _canvasTex(key, draw) {
    const w = GAME_WIDTH;
    const h = GAME_HEIGHT;
    if (this.textures.exists(key)) this.textures.remove(key);
    const canvas = document.createElement('canvas');
    canvas.width = w;
    canvas.height = h;
    const ctx = canvas.getContext('2d');
    draw(ctx, w, h);
    this.textures.addCanvas(key, canvas);
  }

  _vgrad(ctx, w, h, stops) {
    const g = ctx.createLinearGradient(0, 0, 0, h);
    stops.forEach(([o, c]) => g.addColorStop(o, c));
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, w, h);
  }

  // Soft radial glow filling the canvas; color is an rgba string at full center.
  _glow(ctx, x, y, r, color) {
    const g = ctx.createRadialGradient(x, y, 0, x, y, r);
    g.addColorStop(0, color);
    g.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = g;
    ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
  }

  // Elongated, rotated glow used for aurora ribbons / light beams.
  _ribbon(ctx, cx, cy, rx, ry, rot, color) {
    ctx.save();
    ctx.translate(cx, cy);
    ctx.rotate(rot);
    ctx.scale(rx / ry, 1);
    const g = ctx.createRadialGradient(0, 0, 0, 0, 0, ry);
    g.addColorStop(0, color);
    g.addColorStop(1, 'rgba(0,0,0,0)');
    ctx.fillStyle = g;
    ctx.beginPath();
    ctx.arc(0, 0, ry, 0, Math.PI * 2);
    ctx.fill();
    ctx.restore();
  }

  _stars(ctx, w, h, count, colors, maxR = 1.6, yMax = 1) {
    for (let i = 0; i < count; i++) {
      const x = Math.random() * w;
      const y = Math.random() * h * yMax;
      const r = Math.random() * maxR + 0.3;
      ctx.globalAlpha = 0.3 + Math.random() * 0.7;
      ctx.fillStyle = colors[(Math.random() * colors.length) | 0];
      ctx.beginPath();
      ctx.arc(x, y, r, 0, Math.PI * 2);
      ctx.fill();
    }
    ctx.globalAlpha = 1;
  }

  createBackgroundTextures() {
    // 1) Nebula — colorful deep-space clouds
    this._canvasTex('bg_nebula', (ctx, w, h) => {
      this._vgrad(ctx, w, h, [[0, '#05010f'], [1, '#0a0420']]);
      ctx.globalCompositeOperation = 'screen';
      this._glow(ctx, w * 0.28, h * 0.28, w * 0.75, 'rgba(236,72,153,0.85)');
      this._glow(ctx, w * 0.80, h * 0.46, w * 0.70, 'rgba(34,211,238,0.6)');
      this._glow(ctx, w * 0.50, h * 0.72, w * 0.85, 'rgba(168,85,247,0.8)');
      this._glow(ctx, w * 0.15, h * 0.9, w * 0.5, 'rgba(245,158,11,0.35)');
      ctx.globalCompositeOperation = 'source-over';
      this._stars(ctx, w, h, 220, ['#ffffff', '#d8b4fe', '#a5f3fc', '#fbcfe8']);
      // a few bright stars with halo
      ctx.globalCompositeOperation = 'screen';
      for (let i = 0; i < 7; i++) {
        const x = Math.random() * w; const y = Math.random() * h;
        this._glow(ctx, x, y, 22, 'rgba(255,255,255,0.5)');
      }
      ctx.globalCompositeOperation = 'source-over';
    });

    // 2) Aurora — northern lights over a night sky
    this._canvasTex('bg_aurora', (ctx, w, h) => {
      this._vgrad(ctx, w, h, [[0, '#02030f'], [0.5, '#061a2e'], [1, '#01020a']]);
      this._stars(ctx, w, h, 130, ['#ffffff', '#bfdbfe'], 1.4, 0.55);
      ctx.globalCompositeOperation = 'lighter';
      this._ribbon(ctx, w * 0.45, h * 0.32, w * 0.9, h * 0.16, -0.35, 'rgba(34,245,170,0.45)');
      this._ribbon(ctx, w * 0.55, h * 0.45, w * 0.85, h * 0.14, 0.28, 'rgba(34,211,238,0.4)');
      this._ribbon(ctx, w * 0.5, h * 0.6, w * 1.0, h * 0.18, -0.18, 'rgba(168,85,247,0.38)');
      this._ribbon(ctx, w * 0.35, h * 0.52, w * 0.5, h * 0.1, 0.5, 'rgba(132,255,214,0.35)');
      ctx.globalCompositeOperation = 'source-over';
    });

    // 3) Sunset — synthwave sky with a glowing sun + horizon grid
    this._canvasTex('bg_sunset', (ctx, w, h) => {
      this._vgrad(ctx, w, h, [
        [0, '#241047'], [0.4, '#6d28d9'], [0.58, '#db2777'],
        [0.74, '#fb6f4d'], [1, '#ffd27a'],
      ]);
      const sunY = h * 0.52;
      ctx.globalCompositeOperation = 'lighter';
      this._glow(ctx, w * 0.5, sunY, w * 0.6, 'rgba(255,225,140,0.9)');
      this._glow(ctx, w * 0.5, sunY, w * 0.35, 'rgba(255,120,90,0.7)');
      ctx.globalCompositeOperation = 'source-over';
      // sun disc
      const sun = ctx.createLinearGradient(0, sunY - 90, 0, sunY + 90);
      sun.addColorStop(0, '#fff1a8');
      sun.addColorStop(1, '#ff5e8a');
      ctx.fillStyle = sun;
      ctx.beginPath();
      ctx.arc(w * 0.5, sunY, 90, 0, Math.PI * 2);
      ctx.fill();
      // horizon perspective grid
      ctx.strokeStyle = 'rgba(255,45,149,0.55)';
      ctx.lineWidth = 1.5;
      const horizon = h * 0.62;
      for (let i = 1; i <= 9; i++) {
        const y = horizon + Math.pow(i / 9, 2) * (h - horizon);
        ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke();
      }
      ctx.strokeStyle = 'rgba(0,229,255,0.4)';
      for (let i = -7; i <= 7; i++) {
        ctx.beginPath();
        ctx.moveTo(w / 2 + i * 24, horizon);
        ctx.lineTo(w / 2 + i * 120, h);
        ctx.stroke();
      }
      this._stars(ctx, w, h, 50, ['#ffffff', '#ffe1c0'], 1.2, 0.4);
    });

    // 4) Ocean — sunlit depths
    this._canvasTex('bg_ocean', (ctx, w, h) => {
      this._vgrad(ctx, w, h, [
        [0, '#9fe9ff'], [0.22, '#34a7d8'], [0.5, '#0c5b8f'],
        [0.78, '#06304f'], [1, '#021526'],
      ]);
      ctx.globalCompositeOperation = 'lighter';
      // caustic light beams from the surface
      for (let i = 0; i < 5; i++) {
        const x = w * (0.15 + i * 0.18);
        this._ribbon(ctx, x, h * 0.18, w * 0.07, h * 0.45, 0.12 * (i % 2 ? 1 : -1), 'rgba(200,245,255,0.18)');
      }
      ctx.globalCompositeOperation = 'source-over';
      // bubbles
      for (let i = 0; i < 40; i++) {
        const x = Math.random() * w; const y = h * (0.35 + Math.random() * 0.65);
        ctx.globalAlpha = 0.1 + Math.random() * 0.2;
        ctx.fillStyle = '#ffffff';
        ctx.beginPath(); ctx.arc(x, y, Math.random() * 3 + 1, 0, Math.PI * 2); ctx.fill();
      }
      ctx.globalAlpha = 1;
    });

    // 5) Dreamscape — soft pastel bokeh
    this._canvasTex('bg_dream', (ctx, w, h) => {
      this._vgrad(ctx, w, h, [
        [0, '#cdbdff'], [0.35, '#f2abfc'], [0.68, '#fbcfe8'], [1, '#ffd9b3'],
      ]);
      ctx.globalCompositeOperation = 'lighter';
      const orbs = ['rgba(255,255,255,0.35)', 'rgba(244,114,182,0.25)', 'rgba(167,139,250,0.25)', 'rgba(125,211,252,0.22)'];
      for (let i = 0; i < 16; i++) {
        const x = Math.random() * w; const y = Math.random() * h;
        const r = 30 + Math.random() * 90;
        this._glow(ctx, x, y, r, orbs[(Math.random() * orbs.length) | 0]);
      }
      ctx.globalCompositeOperation = 'source-over';
      this._stars(ctx, w, h, 40, ['#ffffff']);
    });

    // 6) Monad — signature purple cosmos
    this._canvasTex('bg_monad', (ctx, w, h) => {
      this._vgrad(ctx, w, h, [[0, '#1a0533'], [0.5, '#2e0a52'], [1, '#0d0020']]);
      ctx.globalCompositeOperation = 'screen';
      this._glow(ctx, w * 0.3, h * 0.24, w * 0.8, 'rgba(192,38,211,0.7)');
      this._glow(ctx, w * 0.78, h * 0.58, w * 0.75, 'rgba(124,58,237,0.8)');
      this._glow(ctx, w * 0.5, h * 0.92, w * 0.7, 'rgba(219,39,119,0.5)');
      this._glow(ctx, w * 0.5, h * 0.5, w * 0.55, 'rgba(168,85,247,0.25)');
      ctx.globalCompositeOperation = 'source-over';
      this._stars(ctx, w, h, 180, ['#ffffff', '#d8b4fe', '#f0abfc']);
    });
  }

  createParticleTextures() {
    // All white so emitters can tint per-use. Keep textures tiny.

    // Solid square (jump dust, explosion, sparks, puff)
    const sq = this.make.graphics({ x: 0, y: 0, add: false });
    sq.fillStyle(0xffffff, 1);
    sq.fillRect(0, 0, 8, 8);
    sq.generateTexture('px_square', 8, 8);
    sq.destroy();

    // Soft round dot (flame core, glow sparks)
    const soft = this.make.graphics({ x: 0, y: 0, add: false });
    soft.fillStyle(0xffffff, 0.35);
    soft.fillCircle(8, 8, 8);
    soft.fillStyle(0xffffff, 0.7);
    soft.fillCircle(8, 8, 5);
    soft.fillStyle(0xffffff, 1);
    soft.fillCircle(8, 8, 2.5);
    soft.generateTexture('px_soft', 16, 16);
    soft.destroy();

    // Thin streak (wind, speed lines)
    const streak = this.make.graphics({ x: 0, y: 0, add: false });
    streak.fillStyle(0xffffff, 1);
    streak.fillRect(0, 0, 3, 18);
    streak.generateTexture('px_streak', 3, 18);
    streak.destroy();

    // Ring (boost burst shockwave)
    const ring = this.make.graphics({ x: 0, y: 0, add: false });
    ring.lineStyle(4, 0xffffff, 1);
    ring.strokeCircle(32, 32, 28);
    ring.generateTexture('px_ring', 64, 64);
    ring.destroy();
  }

  createBackgrounds() {
    // Star / particle texture
    const sGfx = this.make.graphics({ x: 0, y: 0, add: false });
    sGfx.fillStyle(0xffffff, 0.9);
    sGfx.fillCircle(2, 2, 2);
    sGfx.generateTexture('star', 4, 4);

    // Gwei particle
    const gGfx = this.make.graphics({ x: 0, y: 0, add: false });
    gGfx.fillStyle(0xa855f7, 1);
    gGfx.fillRect(0, 0, 5, 5);
    gGfx.generateTexture('gwei', 5, 5);

    // Platform texture — cartoon 3D block inspired by concept art
    const pw = 110;
    const ph = 32;
    const pGfx = this.make.graphics({ x: 0, y: 0, add: false });

    // Drop shadow
    pGfx.fillStyle(0x000000, 0.25);
    pGfx.fillRoundedRect(3, 4, pw, ph, 10);

    // Bottom / side face (darker purple for 3D look)
    pGfx.fillStyle(0x5b21b6, 1);
    pGfx.fillRoundedRect(0, 4, pw, ph - 4, 10);

    // Top face (main purple)
    pGfx.fillStyle(0x8b5cf6, 1);
    pGfx.fillRoundedRect(0, 0, pw, ph - 6, 10);

    // Thick cartoon outline
    pGfx.lineStyle(3, 0x1e1b4b, 1);
    pGfx.strokeRoundedRect(0, 0, pw, ph - 6, 10);

    // Highlight on top edge
    pGfx.fillStyle(0xffffff, 0.35);
    pGfx.fillRoundedRect(5, 2, pw - 10, 6, 4);

    // Subtle edge line separating top and side faces
    pGfx.lineStyle(2, 0x6d28d9, 0.8);
    pGfx.beginPath();
    pGfx.moveTo(2, ph - 6);
    pGfx.lineTo(pw - 2, ph - 6);
    pGfx.strokePath();

    pGfx.generateTexture('platform', pw, ph);

    // Spring texture (procedural)
    const springGfx = this.make.graphics({ x: 0, y: 0, add: false });
    springGfx.lineStyle(3, 0xffd700, 1);
    springGfx.beginPath();
    for (let i = 0; i < 5; i++) {
      springGfx.moveTo(5, i * 6);
      springGfx.lineTo(15, i * 6 + 3);
      springGfx.moveTo(15, i * 6 + 3);
      springGfx.lineTo(5, i * 6 + 6);
    }
    springGfx.strokePath();
    springGfx.generateTexture('spring', 20, 32);
  }
}
