export class IntroScene extends Phaser.Scene {
  constructor() {
    super({ key: 'IntroScene' });
  }

  preload() {
    this.load.video('menu-bg', './assets/video/menu.mp4');
    this.load.audio('music-menu', './assets/music/menuBackground.mp3');
    this.load.image('logo', './assets/images/logo.png');
  }

  create() {
    const W = this.scale.width;
    const H = this.scale.height;

    // Background video sized exactly to the canvas, looping
    const video = this.add.video(W / 2, H / 2, 'menu-bg').setDepth(0);
    //video.setDisplaySize(W, H);
    video.play(true); // true = loop

    // Dark overlay so text stays readable
    this.add.rectangle(W / 2, H / 2, W, H, 0x000000, 0.45).setDepth(1);

    const logo = this.add.image(W / 2 + 200, H / 5 + 25, 'logo').setOrigin(0.5).setScale(0.6).setAlpha(0).setDepth(2);

    // Fade in, then yoyo scale between 0.6 and 0.7
    this.tweens.add({
      targets: logo,
      alpha: 1,
      duration: 1200,
      ease: 'Sine.easeIn',
      onComplete: () => {
        this.tweens.add({
          targets: logo,
          scaleX: 0.65,
          scaleY: 0.65,
          duration: 1800,
          yoyo: true,
          repeat: -1,
          ease: 'Sine.easeInOut',
        });
      },
    });

    const prompt = this.add.text(W / 2 + 190, H / 2 + 80, 'Press ENTER or click to start', {
      fontSize: '22px',
      fill: '#ffffff',
    }).setOrigin(0.5).setDepth(2);

    // Blink the prompt
    this.tweens.add({
      targets: prompt,
      alpha: 0,
      duration: 600,
      yoyo: true,
      repeat: -1,
    });

    // Controls hint
    this.add.text(W / 2 + 190, H - 60, 'WASD — Move     Mouse — Aim     Left Click — Fire', {
      fontSize: '14px',
      fill: '#666666',
    }).setOrigin(0.5).setDepth(2);

    this._menuMusic = this.sound.add('music-menu', { loop: true, volume: 1.0 });
    this._menuMusic.play();

    // Attempt fullscreen immediately; browsers that require a user gesture will
    // ignore this and the _start() fallback will catch it instead.
    if (!this.scale.isFullscreen) this.scale.startFullscreen();

    this.input.keyboard.once('keydown-ENTER', () => this._start());
    this.input.once('pointerdown', () => this._start());
  }

  _start() {
    if (!this.scale.isFullscreen) this.scale.startFullscreen();
    this._menuMusic.stop();
    this.scene.start('GameScene');
  }
}