import Phaser from "phaser";

export class MenuScene extends Phaser.Scene {
  private background!: Phaser.GameObjects.Image;

  constructor() {
    super("MenuScene");
  }

  create() {
    const { width, height } = this.scale;

    // Restore Splash Background
    if (this.textures.exists('splash_bg')) {
        this.background = this.add.image(width / 2, height / 2, 'splash_bg');
        const scale = Math.max(width / this.background.width, height / this.background.height);
        this.background.setScale(scale);
        
        // Add a slight tint to make the UI pop more
        this.background.setTint(0xcccccc);
    } else {
        // Fallback gradient if image fails
        const graphics = this.add.graphics();
        graphics.fillGradientStyle(0x0a0510, 0x0a0510, 0x1a0a2a, 0x1a0a2a, 1);
        graphics.fillRect(0, 0, width, height);
    }

    // Atmospheric Effects
    this.createWindEffect();
    this.createSmokeEffect(width, height);
    this.createAtmosphere(width, height);

    this.cameras.main.fadeIn(1000, 0, 0, 0);

    // Stylish Title
    const title = this.add.text(width / 2, height * 0.35, "ROGUE", {
      fontSize: "96px",
      color: "#ff2266",
      fontStyle: "bold",
      fontFamily: "Georgia, serif",
      stroke: "#111",
      strokeThickness: 10,
      shadow: { blur: 30, color: "#ff0044", fill: true, offsetX: 0, offsetY: 0 }
    }).setOrigin(0.5);

    // Animate title (Slight float)
    this.tweens.add({
        targets: title,
        y: height * 0.33,
        duration: 3000,
        ease: 'Sine.easeInOut',
        yoyo: true,
        loop: -1
    });

    // Buttons
    const buttonYStart = height * 0.65;
    const startBtn = this.createButton(width / 2, buttonYStart, "ENTER DUNGEON", 0x2288ff);
    const optBtn = this.createButton(width / 2, buttonYStart + 80, "OPTIONS", 0x444444);

    startBtn.on("pointerdown", () => {
      this.cameras.main.fadeOut(1000, 0, 0, 0);
      this.cameras.main.once(Phaser.Cameras.Scene2D.Events.FADE_OUT_COMPLETE, () => {
          this.scene.start("GameScene");
      });
    });

    optBtn.on("pointerdown", () => {
      console.log("Options clicked");
    });
  }

  private createWindEffect() {
      if (!this.background) return;
      
      // Subtle swaying of the background to simulate wind/heat haze
      this.tweens.add({
          targets: this.background,
          x: (this.scale.width / 2) + 10,
          duration: 4000,
          ease: 'Sine.easeInOut',
          yoyo: true,
          loop: -1
      });
  }

  private createSmokeEffect(width: number, height: number) {
      // Create many tiny, soft smoke particles instead of big circles
      for (let i = 0; i < 60; i++) {
          const x = Phaser.Math.Between(0, width);
          const y = height + Phaser.Math.Between(0, 400);
          const size = Phaser.Math.Between(15, 40);
          const smoke = this.add.circle(x, y, size, 0xdddddd, 0.03);
          
          this.tweens.add({
              targets: smoke,
              y: -200,
              x: x + Phaser.Math.Between(-150, 150),
              alpha: 0,
              scale: 2.5,
              duration: Phaser.Math.Between(6000, 12000),
              ease: 'Linear',
              loop: -1,
              delay: Phaser.Math.Between(0, 10000)
          });
      }

      // Add "Heat Haze" / Distant Smoke
      for (let i = 0; i < 30; i++) {
          const x = Phaser.Math.Between(0, width);
          const y = Phaser.Math.Between(height * 0.4, height);
          const haze = this.add.circle(x, y, Phaser.Math.Between(40, 80), 0xeeeeee, 0.01);
          
          this.tweens.add({
              targets: haze,
              alpha: 0.04,
              scale: 1.2,
              x: x + 20,
              duration: Phaser.Math.Between(3000, 6000),
              ease: 'Sine.easeInOut',
              yoyo: true,
              loop: -1,
              delay: Phaser.Math.Between(0, 3000)
          });
      }
  }

  private createAtmosphere(width: number, height: number) {
      // Drifting Embers (Fire sparks)
      for (let i = 0; i < 40; i++) {
          const x = Phaser.Math.Between(0, width);
          const y = height + Phaser.Math.Between(0, 200);
          const color = Phaser.Math.RND.pick([0xff4400, 0xffaa00, 0xffffff]);
          const ember = this.add.circle(x, y, Phaser.Math.Between(1, 2), color, 0.8);
          
          // Drift diagonally to simulate wind
          this.tweens.add({
              targets: ember,
              y: -100,
              x: x - Phaser.Math.Between(100, 300),
              alpha: 0,
              duration: Phaser.Math.Between(4000, 7000),
              ease: 'Cubic.easeOut',
              loop: -1,
              delay: Phaser.Math.Between(0, 5000)
          });

          // Add a little flicker/wobble
          this.tweens.add({
              targets: ember,
              alpha: 0.2,
              duration: 200,
              yoyo: true,
              loop: -1,
              delay: Phaser.Math.Between(0, 500)
          });
      }

      // Subtle Distant Ash (White particles)
      for (let i = 0; i < 20; i++) {
        const x = Phaser.Math.Between(0, width);
        const y = -10;
        const ash = this.add.circle(x, y, 1, 0xffffff, 0.3);
        
        this.tweens.add({
            targets: ash,
            y: height + 10,
            x: x - 100,
            duration: Phaser.Math.Between(8000, 15000),
            ease: 'Linear',
            loop: -1,
            delay: Phaser.Math.Between(0, 8000)
        });
      }
  }

  private createButton(x: number, y: number, text: string, accentColor: number) {
    const width = 280;
    const height = 58;
    
    const bg = this.add.graphics();
    this.drawButtonShape(bg, width, height, 0x000000);
    bg.setAlpha(0.7);
    
    const border = this.add.graphics();
    border.lineStyle(2, 0x666666, 0.8);
    this.drawButtonBorder(border, width, height);

    const accent = this.add.graphics();
    accent.fillStyle(accentColor, 1);
    accent.fillRect(-width/2, -height/2, 4, height);
    accent.setAlpha(0.6);

    const txt = this.add.text(0, 0, text, { 
        fontSize: "18px", 
        color: "#ffffff",
        fontFamily: "Verdana, Geneva, sans-serif",
        letterSpacing: 3,
        fontStyle: "bold"
    }).setOrigin(0.5);
    
    const container = this.add.container(x, y, [bg, border, accent, txt]);
    container.setSize(width, height);
    container.setInteractive({ useHandCursor: true });

    container.on("pointerover", () => {
        this.tweens.add({
            targets: [bg, border],
            alpha: 1,
            duration: 200
        });
        this.tweens.add({
            targets: accent,
            alpha: 1,
            scaleX: 2,
            duration: 200
        });
        border.clear();
        border.lineStyle(2, accentColor, 1);
        this.drawButtonBorder(border, width, height);
    });

    container.on("pointerout", () => {
        this.tweens.add({
            targets: [bg, border],
            alpha: 0.7,
            duration: 200
        });
        this.tweens.add({
            targets: accent,
            alpha: 0.6,
            scaleX: 1,
            duration: 200
        });
        border.clear();
        border.lineStyle(2, 0x666666, 0.8);
        this.drawButtonBorder(border, width, height);
    });

    return container;
  }

  private drawButtonShape(g: Phaser.GameObjects.Graphics, w: number, h: number, color: number) {
      g.fillStyle(color, 1);
      g.fillRect(-w/2, -h/2, w, h);
  }

  private drawButtonBorder(g: Phaser.GameObjects.Graphics, w: number, h: number) {
      g.strokeRect(-w/2, -h/2, w, h);
  }
}
