export class VialDisplay {
  constructor(scene, x, y, label, fillColor, borderColor) {
    this.scene       = scene;
    this.baseX       = x;
    this.baseY       = y;
    this.label       = label;
    this.fillColor   = fillColor;
    this.borderColor = borderColor;

    this.VIAL_W        = 62;
    this.VIAL_H        = 370;
    this.MAX           = 2000;
    this.currentAmount = 0;
    this._shakeTween   = null;
    this._shakeApplied = 0; // last threshold at which shake was started
    this._won          = false;

    this._build();
  }

  _build() {
    const { scene, baseX, baseY, VIAL_W, VIAL_H, fillColor, borderColor } = this;
    const R = VIAL_W / 2; // radius for rounded top cap

    this.container = scene.add.container(baseX, baseY);

    // Dark glass interior
    const glassBg = scene.add.graphics();
    glassBg.fillStyle(0x060214, 0.95);
    glassBg.fillRoundedRect(-VIAL_W / 2, 0, VIAL_W, VIAL_H, { tl: R, tr: R, bl: 6, br: 6 });
    this.container.add(glassBg);

    // Fill graphic — redrawn dynamically
    this.fillGfx = scene.add.graphics();
    this.container.add(this.fillGfx);

    // Glass border rendered on top of fill so it stays crisp
    const border = scene.add.graphics();
    border.lineStyle(3, borderColor, 0.9);
    border.strokeRoundedRect(-VIAL_W / 2, 0, VIAL_W, VIAL_H, { tl: R, tr: R, bl: 6, br: 6 });
    // Outer glow ring
    border.lineStyle(10, borderColor, 0.18);
    border.strokeRoundedRect(-VIAL_W / 2 - 5, -5, VIAL_W + 10, VIAL_H + 10, { tl: R + 5, tr: R + 5, bl: 10, br: 10 });
    // Left-side glass highlight
    border.lineStyle(2, 0xffffff, 0.22);
    border.beginPath();
    border.moveTo(-VIAL_W / 2 + 6, R + 6);
    border.lineTo(-VIAL_W / 2 + 6, VIAL_H - 12);
    border.strokePath();
    this.container.add(border);

    // Tick marks at $500, $1000, $1500, $2000
    const ticks = scene.add.graphics();
    [500, 1000, 1500, 2000].forEach(amt => {
      const ty = VIAL_H - (amt / this.MAX) * VIAL_H;
      ticks.lineStyle(amt === 2000 ? 2 : 1, borderColor, amt === 2000 ? 0.6 : 0.25);
      ticks.beginPath();
      ticks.moveTo(-VIAL_W / 2 + 4, ty);
      ticks.lineTo( VIAL_W / 2 - 4, ty);
      ticks.strokePath();

      const lbl = scene.add.text(VIAL_W / 2 + 7, ty, `$${amt}`, {
        fontSize: amt === 2000 ? '12px' : '10px',
        fontFamily: 'Georgia, serif',
        color: amt === 2000 ? '#ffd700' : '#4a5a6a',
      }).setOrigin(0, 0.5);
      this.container.add(lbl);
    });
    this.container.add(ticks);

    // Floating amount text shown just above the fill surface
    this.amtText = scene.add.text(0, VIAL_H - 6, '$0', {
      fontSize: '11px',
      fontFamily: 'Georgia, serif',
      fontStyle: 'bold',
      color: '#ffffff',
      stroke: '#000000',
      strokeThickness: 2,
    }).setOrigin(0.5, 1).setAlpha(0);
    this.container.add(this.amtText);

    // Vial label below
    this.container.add(
      scene.add.text(0, VIAL_H + 14, this.label, {
        fontSize: '15px',
        fontFamily: 'Georgia, serif',
        color: '#c8a87e',
        stroke: '#000000',
        strokeThickness: 2,
      }).setOrigin(0.5, 0)
    );

    // Goal text
    this.container.add(
      scene.add.text(0, VIAL_H + 36, 'GOAL: $2,000', {
        fontSize: '10px',
        fontFamily: 'Georgia, serif',
        color: '#3a4a5a',
      }).setOrigin(0.5, 0)
    );
  }

  _drawFill(amount) {
    const { VIAL_W, VIAL_H, MAX, fillColor } = this;
    const capped = Math.min(amount, MAX);
    const fillH  = (capped / MAX) * VIAL_H;

    this.fillGfx.clear();
    if (fillH < 2) {
      this.amtText.setAlpha(0);
      return;
    }

    const fillY = VIAL_H - fillH;
    const R     = VIAL_W / 2;

    // Main fill body
    this.fillGfx.fillStyle(fillColor, 0.88);
    if (fillY < R) {
      // Near the rounded top — match the cap shape
      this.fillGfx.fillRoundedRect(-VIAL_W / 2 + 3, fillY, VIAL_W - 6, fillH, { tl: R - 3, tr: R - 3, bl: 4, br: 4 });
    } else {
      this.fillGfx.fillRoundedRect(-VIAL_W / 2 + 3, fillY, VIAL_W - 6, fillH, 4);
    }

    // Bright liquid surface shimmer
    this.fillGfx.fillStyle(0xffffff, 0.38);
    this.fillGfx.fillRoundedRect(-VIAL_W / 2 + 5, fillY, VIAL_W - 10, 5, 3);

    // Reposition floating amount label just above the surface
    this.amtText.setY(Math.max(fillY - 4, 4));
    this.amtText.setAlpha(1);
    this.amtText.setText(`$${Math.round(capped)}`);
  }

  /**
   * Animate mini coins flying from world position (fromX, fromY) into the vial,
   * then animate the fill rising to targetAmount.
   */
  animateUpdate(targetAmount, fromX, fromY, onComplete) {
    const scene    = this.scene;
    const toAmount = Math.min(targetAmount, this.MAX);

    if (toAmount <= this.currentAmount || this._won) {
      if (onComplete) onComplete();
      return;
    }

    const aimX     = this.baseX;
    const aimY     = this.baseY + this.VIAL_H * 0.78;
    const numCoins = Phaser.Math.Between(5, 8);
    let landed = 0;

    for (let i = 0; i < numCoins; i++) {
      const coin = scene.add.graphics();
      coin.fillStyle(this.fillColor, 1);
      coin.fillCircle(0, 0, 7);
      coin.lineStyle(1.5, 0xffffff, 0.5);
      coin.strokeCircle(0, 0, 7);
      coin.setPosition(fromX + Phaser.Math.Between(-14, 14), fromY);
      coin.setScale(0.1).setAlpha(0);

      scene.tweens.add({
        targets: coin,
        alpha: 1,
        scale: 1,
        duration: 140,
        delay: i * 80,
        ease: 'Back.easeOut',
        onComplete: () => {
          scene.tweens.add({
            targets: coin,
            x: aimX + Phaser.Math.Between(-6, 6),
            y: aimY,
            scale: 0.3,
            alpha: 0.7,
            duration: 480 + i * 50,
            ease: 'Cubic.easeIn',
            onComplete: () => {
              coin.destroy();
              if (++landed === numCoins) this._animateFill(toAmount, onComplete);
            },
          });
        },
      });
    }
  }

  _animateFill(toAmount, onComplete) {
    const scene = this.scene;
    const proxy = { value: this.currentAmount };

    scene.tweens.add({
      targets: proxy,
      value: toAmount,
      duration: 1100,
      ease: 'Cubic.easeOut',
      onUpdate: () => {
        this.currentAmount = proxy.value;
        this._drawFill(proxy.value);
        // Start shaking the first time the fill crosses $1500
        if (proxy.value >= 1500 && this._shakeApplied < 1500) {
          this._shakeApplied = 1500;
          this._applyShake(1500);
        }
      },
      onComplete: () => {
        this.currentAmount = toAmount;
        this._drawFill(toAmount);
        // Update shake to final intensity
        if (toAmount >= 1500) this._applyShake(toAmount);
        if (toAmount >= this.MAX && !this._won) {
          this._won = true;
          this._celebrateWin();
        }
        if (onComplete) onComplete();
      },
    });
  }

  _applyShake(amount) {
    if (amount < 1500) return;

    if (this._shakeTween) {
      this._shakeTween.stop();
      this._shakeTween = null;
      this.container.setX(this.baseX);
    }

    const pct       = Math.min((amount - 1500) / 500, 1);
    const intensity = 3 + pct * 15;         // 3px at $1500 → 18px at $2000
    const speed     = Math.max(22, 100 - pct * 82); // 100ms → 18ms (faster = more frantic)

    this._shakeTween = this.scene.tweens.add({
      targets: this.container,
      x: { from: this.baseX - intensity, to: this.baseX + intensity },
      duration: speed,
      yoyo: true,
      repeat: -1,
      ease: 'Sine.easeInOut',
    });
  }

  _celebrateWin() {
    const scene = this.scene;

    // Stop shaking and snap back to position
    if (this._shakeTween) {
      this._shakeTween.stop();
      this._shakeTween = null;
    }
    this.container.setX(this.baseX);

    // Rapid flash on the fill
    scene.tweens.add({
      targets: this.fillGfx,
      alpha: { from: 1, to: 0.1 },
      duration: 90,
      yoyo: true,
      repeat: 7,
    });

    // Expanding burst ring from vial center
    const burst = scene.add.graphics();
    burst.lineStyle(6, this.borderColor, 1);
    burst.strokeCircle(0, 0, 20);
    burst.setPosition(this.baseX, this.baseY + this.VIAL_H / 2);
    scene.tweens.add({
      targets: burst,
      scaleX: 6, scaleY: 6,
      alpha: 0,
      duration: 700,
      ease: 'Cubic.easeOut',
      onComplete: () => burst.destroy(),
    });

    // Winner badge punches in above the vial
    const badge = scene.add.text(this.baseX, this.baseY - 22, '✦ FULL ✦', {
      fontSize: '16px',
      fontFamily: 'Georgia, serif',
      fontStyle: 'bold',
      color: '#ffd700',
      stroke: '#000000',
      strokeThickness: 3,
      shadow: { offsetX: 0, offsetY: 0, color: '#ffd700', blur: 14, fill: true },
    }).setOrigin(0.5, 0.5).setAlpha(0).setScale(0.3);

    scene.tweens.add({
      targets: badge,
      alpha: 1,
      scale: 1,
      y: this.baseY - 40,
      duration: 500,
      ease: 'Back.easeOut',
    });

    scene.game.events.emit('vial-winner', { winner: this.label });
  }
}