import Phaser from 'phaser';
import { audio } from '@/systems/AudioManager';
import { MetaState, createInitialMetaState, createInitialRunState } from '@/types';

export class MenuScene extends Phaser.Scene {
  private metaState!: MetaState;

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

  create(): void {
    // Load or create meta state
    this.loadMetaState();

    const width = this.cameras.main.width;
    const height = this.cameras.main.height;

    // Background
    this.add.rectangle(width / 2, height / 2, width, height, 0x1a1a2e);

    // Title
    const title = this.add
      .text(width / 2, 120, 'ROGUELITE\nPLATFORMER', {
        font: 'bold 48px monospace',
        color: '#ffdd00',
        align: 'center',
      })
      .setOrigin(0.5);

    // Title animation
    this.tweens.add({
      targets: title,
      y: 130,
      duration: 2000,
      yoyo: true,
      repeat: -1,
      ease: 'Sine.inOut',
    });

    // Buttons
    const buttonY = 300;
    const buttonSpacing = 70;

    this.createButton(width / 2, buttonY, 'ИГРАТЬ', () => this.startGame());
    this.createButton(width / 2, buttonY + buttonSpacing, 'МАГАЗИН', () => this.openShop());
    this.createButton(width / 2, buttonY + buttonSpacing * 2, 'РЕКОРДЫ', () =>
      this.showHighScores()
    );
    this.createButton(width / 2, buttonY + buttonSpacing * 3, 'НАСТРОЙКИ', () =>
      this.showSettings()
    );

    // Stats display
    this.add
      .text(width / 2, height - 80, `GasCoins: ${this.metaState.gasCoins}`, {
        font: '20px monospace',
        color: '#aa88ff',
      })
      .setOrigin(0.5);

    this.add
      .text(width / 2, height - 50, `Best Level: ${this.metaState.stats.highestLevel}`, {
        font: '16px monospace',
        color: '#888888',
      })
      .setOrigin(0.5);

    // Version
    this.add
      .text(width - 10, height - 10, 'v0.1.0', {
        font: '12px monospace',
        color: '#444444',
      })
      .setOrigin(1, 1);
  }

  private createButton(
    x: number,
    y: number,
    text: string,
    onClick: () => void
  ): Phaser.GameObjects.Container {
    const container = this.add.container(x, y);

    const bg = this.add
      .rectangle(0, 0, 250, 50, 0x333355)
      .setStrokeStyle(2, 0x5555aa)
      .setInteractive({ useHandCursor: true });

    const label = this.add
      .text(0, 0, text, {
        font: 'bold 22px monospace',
        color: '#ffffff',
      })
      .setOrigin(0.5);

    container.add([bg, label]);

    bg.on('pointerover', () => {
      bg.setFillStyle(0x4444aa);
      container.setScale(1.05);
    });

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

    bg.on('pointerdown', () => {
      audio.playUIClick();
      onClick();
    });

    return container;
  }

  private loadMetaState(): void {
    const saved = localStorage.getItem('roguelite_save');
    if (saved) {
      try {
        this.metaState = JSON.parse(saved);
      } catch {
        this.metaState = createInitialMetaState();
      }
    } else {
      this.metaState = createInitialMetaState();
    }
    this.registry.set('metaState', this.metaState);
  }

  private startGame(): void {
    this.registry.set('runState', createInitialRunState());
    this.scene.start('GameScene');
  }

  private openShop(): void {
    this.scene.start('ShopScene');
  }

  private showHighScores(): void {
    this.scene.launch('HighScoresScene');
  }

  private showSettings(): void {
    this.scene.launch('SettingsScene');
  }
}
