import Phaser from '../vendor/phaser.js';
import { config } from '../config/Config.js';
import { MenuButton } from '../ui/MenuButton.js';

const FONT_FALLBACK = "'Segoe UI', 'Helvetica Neue', Arial, sans-serif";

/**
 * Main menu. All text/colors/layout come from data/menu.json.
 */
export class MenuScene extends Phaser.Scene {
  constructor() {
    super({ key: 'MenuScene' });
  }

  create() {
    const menu = config.section('menu', {});
    const fontFamily = menu.fontFamily ?? FONT_FALLBACK;
    const colors = menu.colors ?? {};
    const { width, height } = this.scale;
    const cx = width / 2;

    // Title
    this.add
      .text(cx, height * 0.34, menu.title ?? 'ORBIT', {
        fontFamily,
        fontSize: `${menu.titleFontSize ?? 84}px`,
        fontStyle: 'bold',
        color: colors.title ?? '#e9edf8',
        shadow: {
          color: colors.titleGlow ?? '#2f6df6',
          blur: 28,
          offsetX: 0,
          offsetY: 0,
        },
      })
      .setOrigin(0.5);

    // Subtitle
    this.add
      .text(cx, height * 0.46, menu.subtitle ?? '', {
        fontFamily,
        fontSize: `${menu.subtitleFontSize ?? 20}px`,
        color: colors.subtitle ?? '#8fa0c9',
      })
      .setOrigin(0.5);

    // Buttons (menu.json lists each one; add more here as the menu grows)
    const btn = menu.buttons?.newGame ?? {};
    new MenuButton(
      this,
      (btn.position?.x ?? 0.5) * width,
      (btn.position?.y ?? 0.62) * height,
      btn.label ?? 'New Game',
      () => this.scene.start('GameScene'),
      btn,
    );

    // Version footer
    this.add
      .text(width - 16, height - 14, config.get('game.version', ''), {
        fontFamily,
        fontSize: '12px',
        color: colors.footer ?? '#54608a',
      })
      .setOrigin(1, 0.5);
  }
}