import Phaser from 'phaser';
import { UI_CONFIG } from '@/config';

export interface ButtonOptions {
  /** The Phaser scene to create the button in */
  scene: Phaser.Scene;
  /** Button label text */
  label: string;
  /** X position (center of button) */
  x: number;
  /** Y position (center of button) */
  y: number;
  /** Button width (defaults to UI_CONFIG.BUTTON_WIDTH) */
  width?: number;
  /** Button height (defaults to UI_CONFIG.BUTTON_HEIGHT) */
  height?: number;
  /** Click handler */
  onClick: () => void;
  /** Phaser depth (defaults to 100) */
  depth?: number;
  /** Background color (defaults to UI_CONFIG.BUTTON_BG) */
  bgColor?: number;
  /** Hover background color (defaults to UI_CONFIG.BUTTON_BG_HOVER) */
  hoverBgColor?: number;
  /** Border color (defaults to UI_CONFIG.BUTTON_BORDER) */
  borderColor?: number;
  /** Text color (defaults to UI_CONFIG.BUTTON_TEXT_COLOR) */
  textColor?: string;
  /** Font size (defaults to UI_CONFIG.BUTTON_FONT_SIZE) */
  fontSize?: string;
}

export interface ButtonObjects {
  /** Background rectangle */
  bg: Phaser.GameObjects.Rectangle;
  /** Text label */
  text: Phaser.GameObjects.Text;
}

/**
 * Create a styled interactive button in a Phaser scene.
 *
 * Handles hover effects (fill color change + text scale) and click callback.
 * Returns both the bg and text objects for further customization if needed.
 */
export function createButton(options: ButtonOptions): ButtonObjects {
  const {
    scene,
    label,
    x,
    y,
    width = UI_CONFIG.BUTTON_WIDTH,
    height = UI_CONFIG.BUTTON_HEIGHT,
    onClick,
    depth = 100,
    bgColor = UI_CONFIG.BUTTON_BG,
    hoverBgColor = UI_CONFIG.BUTTON_BG_HOVER,
    borderColor = UI_CONFIG.BUTTON_BORDER,
    textColor = UI_CONFIG.BUTTON_TEXT_COLOR,
    fontSize = UI_CONFIG.BUTTON_FONT_SIZE,
  } = options;

  const bg = scene.add.rectangle(x, y, width, height, bgColor)
    .setStrokeStyle(2, borderColor)
    .setInteractive({ useHandCursor: true })
    .setDepth(depth);

  const text = scene.add.text(x, y, label, {
    fontSize,
    color: textColor,
  }).setOrigin(0.5).setDepth(depth);

  bg.on('pointerover', () => {
    bg.setFillStyle(hoverBgColor);
    text.setScale(1.05);
  });

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

  bg.on('pointerdown', onClick);

  return { bg, text };
}