import Phaser from '../vendor/phaser.js';
import { config } from '../config/Config.js';
import { toColor } from '../utils/Color.js';

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

/**
 * Reusable text button with hover state.
 *
 * Colors/sizes come from data/menu.json (menu.colors + per-button overrides),
 * so adding a new button elsewhere is a one-liner:
 *
 *   new MenuButton(scene, x, y, 'Save', () => ..., { bgColor: '#334' });
 */
export class MenuButton extends Phaser.GameObjects.Container {
  constructor(scene, x, y, label, onClick, overrides = {}) {
    super(scene, x, y);

    const colors = config.section('menu.colors', {});
    const fontFamily = overrides.fontFamily ?? config.get('menu.fontFamily', FONT_FALLBACK);
    const fontSize = overrides.fontSize ?? config.get('menu.buttonFontSize', 22);
    const paddingX = overrides.paddingX ?? 32;
    const paddingY = overrides.paddingY ?? 16;

    const baseColor = toColor(overrides.bgColor ?? colors.buttonBg ?? '#16203a');
    const hoverColor = toColor(overrides.hoverColor ?? colors.buttonHoverBg ?? '#24345c');
    const border = toColor(colors.buttonBorder ?? '#33456f');
    const textColor = overrides.textColor ?? colors.buttonText ?? '#e9edf8';

    const text = scene.add.text(0, 0, label, {
      fontFamily,
      fontSize: `${fontSize}px`,
      fontStyle: '600',
      color: textColor,
    });

    const width = text.width + paddingX * 2;
    const height = text.height + paddingY * 2;

    const bg = scene
      .add.rectangle(0, 0, width, height, baseColor, 1)
      .setOrigin(0.5)
      .setStrokeStyle(1, border, 0.9);

    this.add([bg, text]);
    this.setSize(width, height);

    bg.setInteractive({ useHandCursor: true });
    bg.on('pointerover', () => bg.setFillStyle(hoverColor, 1));
    bg.on('pointerout', () => bg.setFillStyle(baseColor, 1));
    bg.on('pointerdown', () => {
      if (typeof onClick === 'function') onClick(this);
    });

    scene.add.existing(this);
  }
}