import Phaser from "phaser";

interface MenuButtonOptions {
  x: number;
  y: number;
  width: number;
  height: number;
  title: string;
  subtitle?: string;
  onClick: () => void;
}

export function createMenuBackdrop(scene: Phaser.Scene): void {
  const width = scene.scale.width;
  const height = scene.scale.height;

  const bg = scene.add.graphics();
  bg.fillStyle(0x07121b, 1);
  bg.fillRect(0, 0, width, height);
  bg.fillGradientStyle(0x102133, 0x102133, 0x06111b, 0x06111b, 1, 1, 1, 1);
  bg.fillRect(0, 0, width, height);

  const grid = scene.add.graphics();
  grid.lineStyle(1, 0x1b3f56, 0.35);
  const cell = 40;
  for (let x = 0; x <= width; x += cell) {
    grid.beginPath();
    grid.moveTo(x + 0.5, 0);
    grid.lineTo(x + 0.5, height);
    grid.strokePath();
  }
  for (let y = 0; y <= height; y += cell) {
    grid.beginPath();
    grid.moveTo(0, y + 0.5);
    grid.lineTo(width, y + 0.5);
    grid.strokePath();
  }

  for (let i = 0; i < 28; i += 1) {
    const x = Phaser.Math.Between(10, width - 10);
    const y = Phaser.Math.Between(10, height - 10);
    const radius = Phaser.Math.FloatBetween(1.5, 3.4);
    const orb = scene.add.circle(x, y, radius, 0x9af5ff, Phaser.Math.FloatBetween(0.12, 0.35));
    orb.setBlendMode(Phaser.BlendModes.ADD);
    scene.tweens.add({
      targets: orb,
      alpha: Phaser.Math.FloatBetween(0.55, 0.95),
      duration: Phaser.Math.Between(620, 1400),
      ease: "Sine.easeInOut",
      yoyo: true,
      repeat: -1,
      delay: Phaser.Math.Between(0, 800)
    });
  }

  for (let i = 0; i < 12; i += 1) {
    const w = Phaser.Math.Between(12, 22);
    const h = Phaser.Math.Between(12, 20);
    const baseY = Phaser.Math.Between(Math.floor(height * 0.45), height - 32);
    const block = scene.add.rectangle(
      Phaser.Math.Between(24, width - 24),
      baseY,
      w,
      h,
      0x88f6ff,
      Phaser.Math.FloatBetween(0.14, 0.28)
    );
    block.setStrokeStyle(1, 0x9ff9ff, 0.4);
    scene.tweens.add({
      targets: block,
      y: baseY - Phaser.Math.Between(10, 28),
      duration: Phaser.Math.Between(760, 1600),
      ease: "Sine.easeInOut",
      yoyo: true,
      repeat: -1,
      delay: Phaser.Math.Between(0, 1100)
    });
  }

  const scan = scene.add.rectangle(-220, Math.floor(height * 0.36), 230, 4, 0xbfffff, 0.2);
  scan.setBlendMode(Phaser.BlendModes.ADD);
  scene.tweens.add({
    targets: scan,
    x: width + 220,
    duration: 4800,
    ease: "Sine.easeInOut",
    repeat: -1
  });
}

export function createMenuButton(scene: Phaser.Scene, options: MenuButtonOptions): Phaser.GameObjects.Container {
  const { x, y, width, height, title, subtitle, onClick } = options;
  const container = scene.add.container(x, y);

  const glow = scene.add.rectangle(0, 0, width + 18, height + 14, 0x79f0ff, 0.14);
  const card = scene.add.rectangle(0, 0, width, height, 0x0f2534, 0.9);
  card.setStrokeStyle(2, 0x98f8ff, 0.44);

  const titleText = scene.add.text(0, subtitle ? -9 : 0, title, {
    fontFamily: '"Chakra Petch", "Trebuchet MS", sans-serif',
    fontSize: subtitle ? "24px" : "26px",
    color: "#eafcff"
  }).setOrigin(0.5);

  const subtitleText = subtitle
    ? scene.add.text(0, 14, subtitle, {
      fontFamily: '"Chakra Petch", "Trebuchet MS", sans-serif',
      fontSize: "14px",
      color: "#8bd6e5"
    }).setOrigin(0.5)
    : null;

  container.add([glow, card, titleText]);
  if (subtitleText) {
    container.add(subtitleText);
  }

  card.setInteractive({ useHandCursor: true });
  card.on("pointerover", () => {
    scene.tweens.add({
      targets: container,
      scaleX: 1.04,
      scaleY: 1.04,
      duration: 120,
      ease: "Sine.easeOut"
    });
    card.setStrokeStyle(2, 0xd4ffff, 0.9);
    glow.setAlpha(0.25);
  });

  card.on("pointerout", () => {
    scene.tweens.add({
      targets: container,
      scaleX: 1,
      scaleY: 1,
      duration: 130,
      ease: "Sine.easeOut"
    });
    card.setStrokeStyle(2, 0x98f8ff, 0.44);
    glow.setAlpha(0.14);
  });

  card.on("pointerdown", () => {
    scene.tweens.add({
      targets: container,
      scaleX: 0.97,
      scaleY: 0.97,
      duration: 80,
      ease: "Sine.easeOut",
      yoyo: true
    });
    onClick();
  });

  return container;
}
