import { ReactiveScene } from 'boardgame-phaser';

export class MenuScene extends ReactiveScene {
  private titleText!: Phaser.GameObjects.Text;
  private startButton!: Phaser.GameObjects.Container;
  private startButtonText!: Phaser.GameObjects.Text;
  private startButtonBg!: Phaser.GameObjects.Rectangle;

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

  create(): void {
    super.create();

    const centerX = this.game.scale.width / 2;
    const centerY = this.game.scale.height / 2;

    // 标题
    this.titleText = this.add.text(centerX, centerY - 100, 'Tic-Tac-Toe', {
      fontSize: '48px',
      fontFamily: 'Arial',
      color: '#1f2937',
    }).setOrigin(0.5);

    // 添加标题动画
    this.titleText.setScale(0);
    this.tweens.add({
      targets: this.titleText,
      scale: 1,
      duration: 600,
      ease: 'Back.easeOut',
    });

    // 开始按钮
    this.startButtonBg = this.add.rectangle(centerX, centerY + 40, 200, 60, 0x3b82f6)
      .setInteractive({ useHandCursor: true });

    this.startButtonText = this.add.text(centerX, centerY + 40, 'Start Game', {
      fontSize: '24px',
      fontFamily: 'Arial',
      color: '#ffffff',
    }).setOrigin(0.5);

    this.startButton = this.add.container(centerX, centerY + 40, [
      this.startButtonBg,
      this.startButtonText,
    ]);

    // 按钮交互
    this.startButtonBg.on('pointerover', () => {
      this.startButtonBg.setFillStyle(0x2563eb);
      this.tweens.add({
        targets: this.startButton,
        scale: 1.05,
        duration: 100,
      });
    });

    this.startButtonBg.on('pointerout', () => {
      this.startButtonBg.setFillStyle(0x3b82f6);
      this.tweens.add({
        targets: this.startButton,
        scale: 1,
        duration: 100,
      });
    });

    this.startButtonBg.on('pointerdown', () => {
      this.startGame();
    });

    // 副标题
    this.add.text(centerX, centerY + 140, 'Click to start playing', {
      fontSize: '16px',
      fontFamily: 'Arial',
      color: '#6b7280',
    }).setOrigin(0.5);
  }

  private async startGame(): Promise<void> {
    await this.sceneController.launch('GameScene');
  }
}