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

/**
 * 主游戏场景（空白骨架）。
 *
 * 执行脚手架后，此场景显示 "Hello Phaser!" 文字和布局参考网格，
 * 作为开发起点。替换 create() 中的内容即可开始编写游戏逻辑。
 */
export class GameScene extends Scene {
  private fpsText?: Phaser.GameObjects.Text;

  constructor() {
    super(SceneKeys.Game);
  }

  create(): void {
    const layout = computeUiLayout(this);
    const { width, height, centerX, centerY, uiScale, vScale, isLandscape } =
      layout;

    // ─── 背景 ───
    this.cameras.main.setBackgroundColor(0xf5f5f5);

    // ─── 参考十字线（设计期辅助，正式项目可删除） ───
    const crosshair = this.add.graphics();
    crosshair.lineStyle(1, 0xcccccc, 0.5);
    crosshair.lineBetween(centerX, 0, centerX, height);
    crosshair.lineBetween(0, centerY, width, centerY);

    // ─── 安全区可视化边框 ───
    const safeMargin = 40 * uiScale;
    const safeRect = this.add.graphics();
    safeRect.lineStyle(1, 0x4488ff, 0.3);
    safeRect.strokeRect(safeMargin, safeMargin, width - safeMargin * 2, height - safeMargin * 2);

    // ─── 标题 ───
    this.add
      .text(centerX, centerY - 40 * uiScale, "Hello Phaser!", {
        fontSize: `${48 * uiScale}px`,
        color: "#333333",
        fontFamily: "Arial, sans-serif",
        fontStyle: "bold",
      })
      .setOrigin(0.5);

    // ─── 布局信息（帮助开发者理解坐标系） ───
    const info = [
      `canvas: ${width} × ${height}`,
      `design: ${GameConfig.baseWidth} × ${GameConfig.baseHeight}`,
      `uiScale: ${uiScale.toFixed(3)}  vScale: ${vScale.toFixed(3)}`,
      `orientation: ${isLandscape ? "landscape" : "portrait"}`,
      `dpr: ${window.devicePixelRatio}`,
    ].join("\n");

    this.add
      .text(centerX, centerY + 30 * uiScale, info, {
        fontSize: `${14 * uiScale}px`,
        color: "#888888",
        fontFamily: "monospace",
        align: "center",
        lineSpacing: 6 * uiScale,
      })
      .setOrigin(0.5, 0);

    // ─── FPS 显示 ───
    if (GameConfig.showFps) {
      this.fpsText = this.add
        .text(10, 10, "FPS: 0", {
          fontSize: `${12 * uiScale}px`,
          color: "#00cc00",
          fontFamily: "monospace",
          backgroundColor: "#00000066",
          padding: { x: 4, y: 2 },
        })
        .setScrollFactor(0)
        .setDepth(9999);
    }
  }

  update(): void {
    if (this.fpsText) {
      this.fpsText.setText(`FPS: ${this.game.loop.actualFps.toFixed(0)}`);
    }
  }
}