import { Scene } from "phaser";
import { SceneKeys } from "../SceneKeys";
import { computeUiLayout } from "../utils/UiLayout";

/**
 * 通用预加载场景。
 *
 * 提供居中进度条 + "Loading..." 文字。
 * 在 preload() 中按需添加 this.load.image / this.load.audio 等调用即可。
 */
export class PreloaderScene extends Scene {
  constructor() {
    super(SceneKeys.Preloader);
  }

  preload(): void {
    const { centerX, centerY, uiScale } = computeUiLayout(this);

    // ─── 进度条 ───
    const barW = 300 * uiScale;
    const barH = 16 * uiScale;
    const barRadius = barH * 0.5;

    // 背景槽
    const barBg = this.add.graphics();
    barBg.fillStyle(0x333333, 1);
    barBg.fillRoundedRect(
      centerX - barW * 0.5,
      centerY - barH * 0.5,
      barW,
      barH,
      barRadius,
    );

    // 填充条
    const barFill = this.add.graphics();

    // Loading 文字
    const loadText = this.add
      .text(centerX, centerY + 30 * uiScale, "Loading...", {
        fontSize: `${16 * uiScale}px`,
        color: "#aaaaaa",
        fontFamily: "Arial, sans-serif",
      })
      .setOrigin(0.5);

    // ─── 进度回调 ───
    this.load.on("progress", (value: number) => {
      barFill.clear();
      barFill.fillStyle(0x4488ff, 1);
      barFill.fillRoundedRect(
        centerX - barW * 0.5,
        centerY - barH * 0.5,
        barW * value,
        barH,
        barRadius,
      );
    });

    this.load.on("complete", () => {
      loadText.setText("Ready");
    });

    // ──────────────────────────────────────────
    // 在下方添加你的资源加载调用，例如：
    //
    //   import logoImage from "assets/images/logo.webp";
    //   this.load.image("logo", logoImage);
    //
    //   import bgmAudio from "assets/sounds/bgm.mp3";
    //   this.load.audio("bgm", bgmAudio);
    // ──────────────────────────────────────────
  }

  create(): void {
    this.scene.start(SceneKeys.Game);
  }
}