import * as Phaser from "phaser";
import { computeUiLayout } from "../../utils/UiLayout";
import { SettingsManager } from "./SettingsManager";
import {
  ENABLE_DOWNLOAD_BUTTON,
  DOWNLOAD_BUTTON_COLOR,
} from "../../DebugConfig";

/**
 * Play button component
 * Displayed at the bottom center of the page, capsule-shaped with a subtle 3D shadow effect
 */
export class DownloadButton extends Phaser.GameObjects.Container {
  private breathTween?: Phaser.Tweens.Tween;

  constructor(scene: Phaser.Scene) {
    super(scene);

    if (!ENABLE_DOWNLOAD_BUTTON) {
      return;
    }

    scene.add.existing(this);

    const layout = computeUiLayout(scene);
    const { width, height, uiScale } = layout;

    // Button dimensions
    const buttonWidth = 240 * uiScale;
    const buttonHeight = 64 * uiScale;
    const borderRadius = buttonHeight / 2; // Full capsule shape
    const bottomMargin = 30 * uiScale;

    const buttonX = width / 2;
    const buttonY = height - bottomMargin - buttonHeight / 2;

    // Main button color (use config value, default #5c71ff)
    const mainColor = DOWNLOAD_BUTTON_COLOR;

    // ---------- Main button background ----------
    const button = scene.add.graphics();
    button.fillStyle(mainColor, 1);
    button.fillRoundedRect(
      -buttonWidth / 2,
      -buttonHeight / 2,
      buttonWidth,
      buttonHeight,
      borderRadius,
    );

    // ---------- "Play" text ----------
    const text = scene.add.text(0, 0, "Download", {
      fontFamily: "Poppins, Arial, sans-serif",
      fontSize: `${28 * uiScale}px`,
      color: "#FFFFFF",
      fontStyle: "bold",
    });
    text.setOrigin(0.5, 0.5);

    // Add all elements to container
    this.add([button, text]);
    this.setPosition(buttonX, buttonY);

    // Set interactive area
    const hitArea = new Phaser.Geom.Rectangle(
      -buttonWidth / 2,
      -buttonHeight / 2,
      buttonWidth,
      buttonHeight,
    );
    this.setInteractive(hitArea, Phaser.Geom.Rectangle.Contains);
    this.input!.cursor = "pointer";

    // Add click event
    this.setupInteractions(scene);

    // Set depth
    this.setDepth(1000);
  }

  /**
   * Set up button interaction events (press, release, hover).
   * @param scene Current scene
   */
  private setupInteractions(scene: Phaser.Scene): void {
    const settingsMgr = SettingsManager.instance;

    // Press effect
    this.on("pointerdown", () => {
      this.setScale(0.95);
      if (this.breathTween) {
        this.breathTween.pause();
      }
    });

    // Release effect
    const reset = () => {
      this.setScale(1);
      if (this.breathTween) {
        this.breathTween.resume();
      }
    };

    this.on("pointerup", () => {
      reset();
      settingsMgr.playButtonClick(scene);

      // Trigger download (SDK removed)
    });

    // Hover: slight scale up
    this.on("pointerover", () => {
      this.setScale(1.02);
    });

    this.on("pointerout", () => {
      reset();
    });
  }

  /**
   * Stop breath animation.
   */
  stopBreathAnimation(): void {
    if (this.breathTween) {
      this.breathTween.stop();
      this.breathTween = undefined;
    }
    this.setScale(1);
  }

  /** Destroy button and all child elements. */
  destroy(fromScene?: boolean): void {
    this.stopBreathAnimation();
    super.destroy(fromScene);
  }
}