import Phaser from 'phaser';

// Local widget kit for the Door. Deliberately tiny and ugly-on-purpose: the desk
// should feel like laminated MDF, not a UI framework.
// TODO(juice): LANE-JUICE owns src/ui/ — swap Button/Panel for its widgets at
// integration and delete this file.

export const DOOR_PALETTE = {
  desk: 0x241c18,
  deskEdge: 0x3a2c24,
  panel: 0x1b1520,
  panelEdge: 0x4a3a52,
  ink: '#cbbfae',
  inkDim: '#7a7068',
  inkHot: '#f0e4d0',
  green: 0x2e7d46,
  greenHot: 0x46a862,
  red: 0xa02020,
  redHot: 0xd03030,
  amber: 0x8a6a20,
  amberHot: 0xc09030,
  neon: 0xd03470,
  kebab: 0xd8a020,
} as const;

export const MONO = 'monospace';

export function text(
  scene: Phaser.Scene,
  x: number,
  y: number,
  content: string,
  size = 8,
  colour: string = DOOR_PALETTE.ink,
): Phaser.GameObjects.Text {
  return scene.add.text(x, y, content, { fontFamily: MONO, fontSize: `${size}px`, color: colour });
}

export function panel(
  scene: Phaser.Scene,
  x: number,
  y: number,
  w: number,
  h: number,
  fill: number = DOOR_PALETTE.panel,
  edge: number = DOOR_PALETTE.panelEdge,
): Phaser.GameObjects.Rectangle {
  return scene.add.rectangle(x + w / 2, y + h / 2, w, h, fill).setStrokeStyle(1, edge);
}

export interface ButtonOpts {
  x: number;
  y: number;
  w: number;
  h: number;
  label: string;
  fill?: number;
  hover?: number;
  size?: number;
  colour?: string;
  onClick: () => void;
}

export class Button {
  readonly rect: Phaser.GameObjects.Rectangle;
  readonly label: Phaser.GameObjects.Text;
  private enabled = true;
  private readonly fill: number;
  private readonly hover: number;

  constructor(scene: Phaser.Scene, private readonly opts: ButtonOpts) {
    this.fill = opts.fill ?? DOOR_PALETTE.deskEdge;
    this.hover = opts.hover ?? DOOR_PALETTE.panelEdge;

    this.rect = scene.add
      .rectangle(opts.x + opts.w / 2, opts.y + opts.h / 2, opts.w, opts.h, this.fill)
      .setStrokeStyle(1, 0x0a0a0a)
      .setInteractive({ useHandCursor: true });

    this.label = scene.add
      .text(opts.x + opts.w / 2, opts.y + opts.h / 2 + 1, opts.label, {
        fontFamily: MONO,
        fontSize: `${opts.size ?? 8}px`,
        color: opts.colour ?? DOOR_PALETTE.inkHot,
      })
      .setOrigin(0.5);

    this.rect.on('pointerover', () => {
      if (this.enabled) this.rect.setFillStyle(this.hover);
    });
    this.rect.on('pointerout', () => {
      if (this.enabled) this.rect.setFillStyle(this.fill);
    });
    this.rect.on('pointerdown', () => {
      if (!this.enabled) return;
      // 1px press travel — cheap, but the desk feels physical with it.
      this.label.y += 1;
      scene.time.delayedCall(70, () => {
        this.label.y -= 1;
      });
      this.opts.onClick();
    });
  }

  setEnabled(on: boolean): this {
    this.enabled = on;
    this.rect.setFillStyle(on ? this.fill : 0x161216);
    this.label.setColor(on ? (this.opts.colour ?? DOOR_PALETTE.inkHot) : DOOR_PALETTE.inkDim);
    if (on) this.rect.setInteractive({ useHandCursor: true });
    else this.rect.disableInteractive();
    return this;
  }

  setLabel(s: string): this {
    this.label.setText(s);
    return this;
  }

  setDepth(d: number): this {
    this.rect.setDepth(d);
    this.label.setDepth(d + 1);
    return this;
  }

  destroy(): void {
    this.rect.destroy();
    this.label.destroy();
  }
}

/** Horizontal meter bar with a label. Used for vibe/aggro up top. */
export class MeterBar {
  private readonly fillRect: Phaser.GameObjects.Rectangle;
  private readonly caption: Phaser.GameObjects.Text;

  constructor(
    scene: Phaser.Scene,
    private readonly x: number,
    y: number,
    private readonly w: number,
    private readonly label: string,
    private readonly colour: number,
  ) {
    scene.add.rectangle(x + w / 2, y + 3, w, 6, 0x000000).setStrokeStyle(1, 0x333333);
    this.fillRect = scene.add.rectangle(x, y + 3, w, 5, colour).setOrigin(0, 0.5);
    this.caption = text(scene, x, y - 8, label, 7, DOOR_PALETTE.inkDim);
  }

  set(value01: number, danger = false): void {
    const v = Math.max(0, Math.min(1, value01));
    this.fillRect.width = Math.max(1, this.w * v);
    this.fillRect.x = this.x;
    this.fillRect.setFillStyle(danger ? DOOR_PALETTE.redHot : this.colour);
    this.caption.setText(`${this.label} ${Math.round(v * 100)}`);
    this.caption.setColor(danger ? '#ff8080' : DOOR_PALETTE.inkDim);
  }
}
