import Phaser from 'phaser';
import { ReactiveScene } from 'boardgame-phaser';

export class IndexScene extends ReactiveScene {
  constructor() {
    super('IndexScene');
  }

  create(): void {
    super.create();
    const { width, height } = this.scale;
    const centerX = width / 2;
    const centerY = height / 2;

    // Title
    this.add.text(centerX, centerY - 150, 'Slay-the-Spire-Like Viewer', {
      fontSize: '36px',
      color: '#ffffff',
      fontStyle: 'bold',
    }).setOrigin(0.5);

    // Subtitle
    this.add.text(centerX, centerY - 100, 'Choose a viewer to explore:', {
      fontSize: '18px',
      color: '#aaaaaa',
    }).setOrigin(0.5);

    // Buttons
    const buttons = [
      { label: 'Map Viewer', scene: 'MapViewerScene', y: centerY - 20 },
      { label: 'Grid Inventory Viewer', scene: 'GridViewerScene', y: centerY + 50 },
      { label: 'Shape Viewer', scene: 'ShapeViewerScene', y: centerY + 120 },
    ];

    for (const btn of buttons) {
      this.createButton(btn.label, btn.scene, centerX, btn.y);
    }
  }

  private createButton(label: string, targetScene: string, x: number, y: number): void {
    const buttonWidth = 300;
    const buttonHeight = 50;

    // Background
    const bg = this.add.rectangle(x, y, buttonWidth, buttonHeight, 0x333355)
      .setStrokeStyle(2, 0x6666aa)
      .setInteractive({ useHandCursor: true });

    // Text
    const text = this.add.text(x, y, label, {
      fontSize: '20px',
      color: '#ffffff',
    }).setOrigin(0.5);

    // Hover effects
    bg.on('pointerover', () => {
      bg.setFillStyle(0x444477);
      text.setScale(1.05);
    });

    bg.on('pointerout', () => {
      bg.setFillStyle(0x333355);
      text.setScale(1);
    });

    bg.on('pointerdown', async () => {
      await this.sceneController.launch(targetScene);
    });
  }
}