import Phaser from '../vendor/phaser.js';
import { config } from '../config/Config.js';
import { toColor, toCss } from '../utils/Color.js';
import { fontStack, themeColor } from '../utils/Theme.js';
import { CyberShape } from './CyberShape.js';
import { MenuButton } from './MenuButton.js';
import { setInteractiveEnabled } from '../utils/Input.js';

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

/**
 * The mining context menu — a small cut-corner panel with two stacked
 * buttons that opens right where the player clicked a rock:
 *
 *   ▸ <cluster name>
 *   ┌──────────────────┐
 *   │   MINE ASTEROIDS │   (STOP MINING, when this cluster is the beam's target)
 *   │      CANCEL      │
 *   └──────────────────┘
 *
 * WORLD-ANCHORED (unlike the deck/sub-bar, which are screen-fixed): the
 * menu sits on the asteroid it refers to, so it stays with the rock while
 * the camera trails. A click ON a button is the button's (MenuButton's
 * own pointerdown listener); any click ELSEWHERE is the scene's — it
 * closes the menu and that click is consumed (no fly-here). Same
 * contract as the menu sub-bar, driven from GameScene's pointerdown.
 *
 * The panel unfolds out of the click point (scale + fade, ~150 ms).
 *
 *   const pop = new MiningPopup(scene, { onAction: (id, target) => ... });
 *   pop.open(wx, wy, screenY, { name, primaryId, primaryLabel, target });
 *   pop.close();
 *   pop.contains(wx, wy);   // WORLD coords
 *   pop.isOpen;  pop.destroy();
 */
export class MiningPopup extends Phaser.GameObjects.Container {
  /**
   * @param {Phaser.Scene} scene
   * @param {object} [o] { onAction?: (id: 'mine'|'stop'|'cancel', target) => void }
   */
  constructor(scene, o = {}) {
    super(scene, 0, 0);
    this.scene.add.existing(this); // v4: new'd containers are not on the display list
    // Above the ship (10) and the mining beam (11–12); under the console
    // toasts (45) and the deck (50).
    this.setDepth(40);

    this.onAction = typeof o.onAction === 'function' ? o.onAction : null;

    const cfg = config.section('asteroids.mining.popup', {});
    this.W = cfg.width ?? 212;
    this.padTop = cfg.padTop ?? 10;
    this.padBottom = cfg.padBottom ?? 12;
    this.gap = cfg.gap ?? 8;
    this.headerH = cfg.headerHeight ?? 20;
    this.lift = cfg.lift ?? 14; // px between the click point and the panel

    const panelFill = toColor(themeColor('panel', 0x0a1120));
    const border = toColor(config.get('menu.colors.buttonBorder', '#2aa9c9'));
    const neon = themeColor('neon', 0x00e5ff);
    const ink = toColor(themeColor('ink', 0xeaf6ff));
    const dim = toColor(themeColor('dim', 0x7d92c4));

    const btnW = this.W - 24;
    const mkBtn = (label, accent, text) =>
      new MenuButton(scene, 0, 0, label, null, {
        width: btnW,
        fontSize: 13,
        paddingX: 12,
        paddingY: 9,
        letterSpacing: 2,
        upper: true,
        textColor: text,
        bgColor: panelFill,
        hoverColor: panelFill,
        borderColor: toCss(accent),
      });

    // The primary is built at its LONGEST label ("MINE ASTEROIDS") so the
    // panel width is final; open() re-labels it per target.
    this.primaryBtn = mkBtn('MINE ASTEROIDS', neon, toCss(ink));
    this.primaryBtn.style.stroke = neon;
    this.primaryBtn.style.neon = neon;
    this.primaryBtn.panel.on('pointerdown', () => this.fire(this.primaryId));

    this.cancelBtn = mkBtn('CANCEL', dim, toCss(dim));
    this.cancelBtn.style.stroke = toColor(0x44506e);
    this.cancelBtn.style.neon = dim;
    this.cancelBtn.panel.on('pointerdown', () => this.fire('cancel'));

    // The data width is a BASE, not a ceiling: MenuButton measures itself
    // in the real (web) font and won't shrink below its label (width =
    // max(requested, labelWidth + 20)). Keep the panel wide enough that the
    // widest button still sits fully inside it, 12 px out from each edge.
    this.W = Math.max(
      this.W,
      this.primaryBtn.style.width + 24,
      this.cancelBtn.style.width + 24,
    );

    const h1 = this.primaryBtn.style.height;
    const h2 = this.cancelBtn.style.height;
    this.H = this.padTop + this.headerH + this.gap + h1 + this.gap + h2 + this.padBottom;
    this.h1 = h1;
    this.h2 = h2;

    // The panel body (redrawn only on open — it is static while up).
    this.panelG = scene.add.graphics();
    const panel = (dir) => {
      this.panelG.clear();
      const cy = dir * (this.H / 2);
      this.panelG.setPosition(0, cy);
      CyberShape.draw(this.panelG, this.W, this.H, {
        notch: Math.min(12, this.H * 0.16),
        fill: panelFill,
        fillAlpha: 0.9,
        stroke: border,
        strokeAlpha: 0.85,
        lineWidth: 1.5,
        glow: neon,
        glowAlpha: 0.16,
      });
      // The top rail (the sub-bar's language): a neon edge + a magenta
      // counter-edge where the panel meets its header.
      const railY = dir < 0 ? -this.H / 2 + 0.5 : this.H / 2 - 2;
      this.panelG.fillStyle(neon, 0.85);
      this.panelG.fillRect(-this.W / 2 + 8, railY, this.W - 16, 1.5);
      this.panelG.fillStyle(themeColor('neon2', 0xff2d6f), 0.35);
      this.panelG.fillRect(-this.W / 2 + 8, dir < 0 ? railY + 2 : railY - 1, this.W - 16, 1);
    };
    panel(-1);

    // The header: the target's name (dim, small, console caps).
    const fam = fontStack('body', FONT_FALLBACK);
    this.headerText = scene.add
      .text(0, 0, '', {
        fontFamily: fam,
        fontSize: '11px',
        color: toCss(dim),
        letterSpacing: 2,
      })
      .setOrigin(0.5, 0.5);

    this.add([this.panelG, this.headerText, this.primaryBtn, this.cancelBtn]);
    this.layout(-1);

    // CLOSED = input-inert (the v4 idiom — setInteractiveEnabled).
    setInteractiveEnabled(this.primaryBtn.panel, false);
    setInteractiveEnabled(this.cancelBtn.panel, false);
    this.setAlpha(0);
    this.state = 'closed'; // 'closed' | 'open' | 'closing'
    this.lastTarget = null; // the scene's rock hit record (passed to onAction)
    this.primaryId = 'mine'; // what the primary button fires ('mine' | 'stop')
    // Stamped when a BUTTON press fires (its action closes the menu). The
    // scene's pointerdown uses this to know that very click belongs to the
    // menu — button handlers and the scene handler race on event order, so
    // the click must never fall through into "fly here".
    this.closedByButtonAt = null;
  }

  get isOpen() {
    return this.state === 'open';
  }

  /**
   * Open at the click point (WORLD coords). `screenY` (the click's
   * SCREEN y) decides the side: near the top edge the panel drops BELOW
   * the click so it stays on screen.
   */
  open(wx, wy, screenY, o = {}) {
    if (this.scene === null || this.active === false) return;
    this.scene.playSfx?.('ui_window'); // the window whoosh (the scene is the voice)
    this.lastTarget = o.target ?? null;
    const name = String(o.name ?? 'ASTEROID CLUSTER').toUpperCase();
    const primaryLabel = String(o.primaryLabel ?? 'MINE ASTEROIDS').toUpperCase();
    this.primaryId = o.primaryId ?? 'mine';
    this.headerText.setText(`\u25b8 ${name}`);
    this.primaryBtn.labelText.setText(primaryLabel);

    const dir = screenY !== undefined && screenY < this.H + 30 ? 1 : -1;
    this.layout(dir);
    this.setPosition(wx, wy + dir * this.lift);
    this.rect = {
      x: wx - this.W / 2,
      y: dir < 0 ? wy - this.lift - this.H : wy + this.lift,
      w: this.W,
      h: this.H,
    };

    this.scene.tweens.killTweensOf(this);
    this.state = 'open';
    this.primaryBtn.hover(false);
    this.cancelBtn.hover(false);
    this.primaryBtn.paint('base');
    this.cancelBtn.paint('base');
    setInteractiveEnabled(this.primaryBtn.panel, true);
    setInteractiveEnabled(this.cancelBtn.panel, true);
    this.setAlpha(0).setScale(0.9);
    this.scene.tweens.add({
      targets: this,
      alpha: 1,
      scale: 1,
      duration: 150,
      ease: 'Sine.easeOut',
    });
  }

  /** Close (any click outside, a button press, or ESC). */
  close() {
    if (this.state !== 'open') return;
    this.state = 'closing';
    this.scene.tweens.killTweensOf(this);
    setInteractiveEnabled(this.primaryBtn.panel, false);
    setInteractiveEnabled(this.cancelBtn.panel, false);
    this.scene.tweens.add({
      targets: this,
      alpha: 0,
      scale: 0.94,
      duration: 120,
      ease: 'Sine.easeIn',
      onComplete: () => {
        if (this.state === 'closing') this.state = 'closed';
      },
    });
  }

  /** Is (wx, wy) — WORLD coords — over the panel? */
  contains(wx, wy) {
    const r = this.rect;
    return !!r && wx >= r.x && wx <= r.x + r.w && wy >= r.y && wy <= r.y + r.h;
  }

  /**
   * Lay the panel out: dir −1 = above the anchor (default), +1 = below.
   * p() maps a distance from the PANEL'S TOP EDGE (0 = top edge) to a
   * container offset: the panel's near edge sits at the anchor, so above
   * it the whole panel hangs up (top edge at −H) and below it the panel
   * grows down (top edge at 0). Top→bottom is always
   * header · MINE ASTEROIDS · CANCEL, whichever side it opens on.
   */
  layout(dir) {
    const p = (top) => (dir < 0 ? top - this.H : top);
    this.panelG.setPosition(0, dir * (this.H / 2));
    this.headerText.setPosition(0, p(this.padTop + this.headerH / 2));
    const top1 = this.padTop + this.headerH + this.gap + this.h1 / 2; // primary, from top
    const top2 = top1 + this.h1 / 2 + this.gap + this.h2 / 2; // cancel, from top
    this.primaryBtn.setPosition(0, p(top1));
    this.cancelBtn.setPosition(0, p(top2));
  }

  /** Fire an action id to the scene (its handler closes the menu). */
  fire(id) {
    if (typeof this.onAction === 'function') {
      this.closedByButtonAt = this.scene.time.now; // this click is the menu's
      try {
        this.onAction(id, this.lastTarget);
      } catch (err) {
        console.error('[mining-popup] onAction failed', err);
      }
    }
  }

  /**
   * Does a SCREEN point (canvas coords, top-left origin) sit inside the
   * panel's current footprint — buttons included? GameScene uses this to
   * swallow the very click that just closed the panel through a button:
   * that click landed ON the panel, so it was panel business, not a
   * world click. Position-based, no timing.
   */
  containsScreen(sx, sy) {
    const cam = this.scene.cameras.main;
    return this.contains(cam.scrollX + sx, cam.scrollY + sy);
  }

  destroy() {
    this.panelG?.destroy();
    this.headerText?.destroy();
    this.primaryBtn?.destroy();
    this.cancelBtn?.destroy();
    this.panelG = this.headerText = this.primaryBtn = this.cancelBtn = null;
  }
}