import { GameState } from '../state/GameState.js';

const TOP_BAR_HEIGHT = 100;
const BOTTOM_BAR_HEIGHT = 110;
const BOTTOM_BAR_Y = 900 - BOTTOM_BAR_HEIGHT;

// Box centers (x) for the three top fund displays
const BOX_WIDTH = 1600 / 3;
const PLAYER_BOX_X = BOX_WIDTH * 0 + BOX_WIDTH / 2;
const LORD_BOX_X   = BOX_WIDTH * 1 + BOX_WIDTH / 2;
const SIN_BOX_X    = BOX_WIDTH * 2 + BOX_WIDTH / 2;
const BOX_CENTER_Y = TOP_BAR_HEIGHT / 2;

// Resting positions for the two bottom-bar text objects
const MSG_X  = 700;
const MSG_Y  = BOTTOM_BAR_Y + BOTTOM_BAR_HEIGHT / 2;       // 845
const SUB_Y  = BOTTOM_BAR_Y + BOTTOM_BAR_HEIGHT / 2 + 30;  // 875

const pick = arr => arr[Phaser.Math.Between(0, arr.length - 1)];

// ── Message pools ─────────────────────────────────────────────────────────────

const LOSS_MESSAGES = [
  'Thou Hath Sinned.',
  'The Darkness Consumes Thee.',
  'Sin Claims Its Tithe.',
  'The Devil Takes His Due.',
  'Wretched Soul!',
  'Thy Coin Belongs to Evil.',
  "Hell's Coffers Grow Richer.",
  'Condemned by Fortune.',
  'Behold Thy Folly!',
  'The Serpent Strikes Again!',
  'Damnation Draws Near.',
  'Thy Faith Was Wanting.',
  'The Wicked Path Claims Thee.',
  'Evil Rejoices This Hour!',
  'Another Soul Slips Away.',
  'The Pit Calls Thy Name.',
  'Darkness Prevails.',
  "Sin's Ledger Grows.",
  'The Fallen Laugh at Thee.',
  'Thy Virtue Wavers.',
  'The Shadow Feeds.',
  "Perdition's Price Is Paid.",
  'The Infernal Reels Mock Thee.',
  'Evil Creeps Ever Closer.',
  'The Unholy Slots Claim Thee.',
  'Darkness Demands Its Toll.',
  'The Abyss Grows Richer.',
  'Thy Coins Serve the Beast.',
  'Sin Savors Thy Defeat.',
  'The Hellfire Burns Brighter.',
];

const LOSS_SUBS = [
  'Redeem Yourself!',
  'Pray Harder!',
  'Repent and Spin Again.',
  'Thy Soul Hangs in the Balance.',
  'Only Grace Can Save Thee Now.',
  'Kneel Before the Righteous Reels.',
  'The Lord Awaits Thy Return.',
  'Seek Salvation in the Next Spin.',
  'Sin Grows Bold — Shall Ye Falter?',
  'Heaven Watches and Weeps.',
  'Rise, Faithful Servant!',
  'Cast Out the Darkness!',
  'Penance Must Be Paid.',
  'Confess and Spin Anew.',
  'Thy Redemption Awaits.',
  'Do Not Yield to Evil!',
  "The Lord's Mercy Is Boundless.",
  'Turn from the Wicked Path!',
  'Fight Back with Faith!',
  'Let the Light Guide Thy Hand.',
  'A Holy Victory Is Within Reach.',
  'Fortify Thy Spirit!',
  'The Divine Is Patient with Thee.',
  'Evil Shall Not Have the Last Word.',
  'Courage, Faithful One!',
  'One More Spin for Glory.',
  'Grace Favors the Persistent.',
  'The Pious Press On.',
  'Thy Virtue Must Endure.',
  'Arise and Challenge the Darkness!',
];

const WIN_MESSAGES = [
  '✝  Blessed Are the Righteous!  ✝',
  'The Lord Smiles Upon Thee!',
  'Holy Fortune Shines Bright!',
  "Heaven's Reward Is Thine!",
  'Grace Has Found Thee!',
  'Divine Providence Strikes!',
  'The Faithful Are Rewarded!',
  'Thy Virtue Bears Fruit!',
  "God's Glory Fills Thy Coffers!",
  'Righteousness Prevails!',
  'The Angels Rejoice!',
  'Sacred Fortune Blesses Thee!',
  'The Holy Reels Align!',
  'Light Conquers the Darkness!',
  'Heaven Opens Its Gates!',
  "The Lord's Hand Guides Thee!",
  'Faith Moves Mountains and Reels!',
  'Hallelujah — A Holy Match!',
  'Thy Piety Is Rewarded!',
  'The Divine Plan Unfolds!',
  'Blessed Be This Spin!',
  'The Righteous Shall Inherit!',
  'Favor of the Almighty!',
  'A Miracle Upon the Reels!',
  "Heaven's Treasury Opens!",
  'Sin Retreats in Shame!',
  'The Virtuous Triumph!',
  'Glory to the Highest!',
  'The Light Pierces the Darkness!',
  "God's Grace Rewards Thee!",
];

const WIN_SUBS = [
  'Press On, Faithful One!',
  'The Lord Provides — Spin Again!',
  'Grace Continues to Flow.',
  'Heaven Cheers Thy Victory!',
  'Righteousness Is Its Own Reward.',
  'The Holy Spirit Guides Thy Hand.',
  'May the Divine Light Shine On.',
  'Sin Cowers Before Thy Faith.',
  'The Righteous Walk in Fortune.',
  'Let Virtue Lead Every Spin.',
  'The Angels Record Thy Victory.',
  'Keep the Faith — Keep Spinning!',
  'Thy Pious Heart Is Noticed.',
  'The Lord Multiplies Thy Blessings.',
  'Walk Boldly in the Light.',
  'Evil Cannot Touch the Faithful.',
  'Another Spin for His Glory!',
  'The Righteous Path Pays Off.',
  "Heaven's Ledger Grows in Thy Favor.",
  'Consecrated Luck Is Upon Thee.',
  'The Devout Are Never Forgotten.',
  'Thy Coin Returns Manifold.',
  'Spin Again — Heaven Is Watching.',
  "The Lord's Grace Has No Limit.",
  'Persist and Multiply in Faith!',
  'Sin Is Losing Ground.',
  'The Holy Reels Await Once More.',
  'Blessed Is the Hand That Spins.',
  'Fortune Favors the Faithful.',
  'The Kingdom Grows with Each Spin.',
];

// ─────────────────────────────────────────────────────────────────────────────

export default class UIScene extends Phaser.Scene {
  constructor() {
    super({ key: 'UIScene' });
  }

  create() {
    this._spinDisabled = false;
    this._gameOver     = false;
    this._buildTopBar();
    this._buildBottomBar();
    this._buildSpinButton();
    this._bindEvents();
    this._updateFundDisplays();
  }

  _buildTopBar() {
    const g = this.add.graphics();

    // Background
    g.fillStyle(0x12082a, 1);
    g.fillRect(0, 0, 1600, TOP_BAR_HEIGHT);
    g.lineStyle(2, 0xffd700, 0.8);
    g.strokeRect(0, 0, 1600, TOP_BAR_HEIGHT);

    // Dividers
    g.lineStyle(1, 0xffd700, 0.3);
    g.beginPath();
    g.moveTo(BOX_WIDTH, 8);
    g.lineTo(BOX_WIDTH, TOP_BAR_HEIGHT - 8);
    g.strokePath();
    g.beginPath();
    g.moveTo(BOX_WIDTH * 2, 8);
    g.lineTo(BOX_WIDTH * 2, TOP_BAR_HEIGHT - 8);
    g.strokePath();

    // Box labels
    const labelStyle = {
      fontSize: '13px',
      fontFamily: 'Georgia, serif',
      color: '#c8a87e',
      alpha: 0.8
    };
    this.add.text(PLAYER_BOX_X, 14, 'YOUR FUNDS', labelStyle).setOrigin(0.5, 0);
    this.add.text(LORD_BOX_X,   14, 'THE LORD',   labelStyle).setOrigin(0.5, 0);
    this.add.text(SIN_BOX_X,    14, 'SIN',        labelStyle).setOrigin(0.5, 0);

    // Fund value texts
    const valueStyle = {
      fontSize: '28px',
      fontFamily: 'Georgia, serif',
      color: '#ffd700',
      stroke: '#2a0a4e',
      strokeThickness: 3
    };
    this.playerText = this.add.text(PLAYER_BOX_X, 55, '$1000', valueStyle).setOrigin(0.5, 0.5);
    this.lordText   = this.add.text(LORD_BOX_X,   55, '$0',    valueStyle).setOrigin(0.5, 0.5);
    this.sinText    = this.add.text(SIN_BOX_X,    55, '$0',    { ...valueStyle, color: '#ff4444' }).setOrigin(0.5, 0.5);
  }

  _buildBottomBar() {
    const g = this.add.graphics();

    g.fillStyle(0x12082a, 1);
    g.fillRect(0, BOTTOM_BAR_Y, 1600, BOTTOM_BAR_HEIGHT);
    g.lineStyle(2, 0xffd700, 0.8);
    g.strokeRect(0, BOTTOM_BAR_Y, 1600, BOTTOM_BAR_HEIGHT);

    this.messageText = this.add.text(MSG_X, MSG_Y, 'Press SPIN or SPACE to begin', {
      fontSize: '22px',
      fontFamily: 'Georgia, serif',
      color: '#e8d8b0',
      align: 'center',
      wordWrap: { width: 1100 }
    }).setOrigin(0.5, 0.5);

    // Secondary sub-message (hidden by default)
    this.redeemText = this.add.text(MSG_X, SUB_Y, '', {
      fontSize: '16px',
      fontFamily: 'Georgia, serif',
      color: '#ff9944',
      align: 'center'
    }).setOrigin(0.5, 0.5).setAlpha(0);
  }

  _buildSpinButton() {
    const btnX = 1420;
    const btnY = BOTTOM_BAR_Y + BOTTOM_BAR_HEIGHT / 2;
    const btnW = 140;
    const btnH = 60;

    this.spinBtnGfx = this.add.graphics();
    this._drawSpinBtn(false);

    this.spinBtnHitArea = this.add.zone(btnX, btnY, btnW, btnH)
      .setInteractive({ useHandCursor: true });

    this.spinBtnLabel = this.add.text(btnX, btnY, 'SPIN', {
      fontSize: '26px',
      fontFamily: 'Georgia, serif',
      color: '#1a0a2e',
      fontStyle: 'bold'
    }).setOrigin(0.5, 0.5);

    this.spinBtnHitArea.on('pointerdown', () => {
      this.game.events.emit('spin');
    });

    this.spinBtnHitArea.on('pointerover', () => { if (!this._spinDisabled) this._drawSpinBtn(true); });
    this.spinBtnHitArea.on('pointerout',  () => { if (!this._spinDisabled) this._drawSpinBtn(false); });

    this._btnX = btnX;
    this._btnY = btnY;
    this._btnW = btnW;
    this._btnH = btnH;
  }

  _drawSpinBtn(hover) {
    const btnX = 1420;
    const btnY = BOTTOM_BAR_Y + BOTTOM_BAR_HEIGHT / 2;
    const btnW = 140;
    const btnH = 60;

    this.spinBtnGfx.clear();

    if (this._spinDisabled) {
      this.spinBtnGfx.fillStyle(0x3a3a3a, 1);
      this.spinBtnGfx.fillRoundedRect(btnX - btnW / 2, btnY - btnH / 2, btnW, btnH, 12);
      this.spinBtnGfx.lineStyle(3, 0x555555, 1);
      this.spinBtnGfx.strokeRoundedRect(btnX - btnW / 2, btnY - btnH / 2, btnW, btnH, 12);
    } else {
      this.spinBtnGfx.fillStyle(hover ? 0xffe066 : 0xffd700, 1);
      this.spinBtnGfx.fillRoundedRect(btnX - btnW / 2, btnY - btnH / 2, btnW, btnH, 12);
      this.spinBtnGfx.lineStyle(3, hover ? 0xffa500 : 0xc8a000, 1);
      this.spinBtnGfx.strokeRoundedRect(btnX - btnW / 2, btnY - btnH / 2, btnW, btnH, 12);
    }
  }

  _setSpinDisabled(disabled) {
    this._spinDisabled = disabled;
    this._drawSpinBtn(false);
    this.spinBtnLabel.setColor(disabled ? '#555555' : '#1a0a2e');
  }

  _bindEvents() {
    this.game.events.on('win', () => {
      this._updateFundDisplays();
      this._showWinMessage(pick(WIN_MESSAGES), pick(WIN_SUBS));
    }, this);

    this.game.events.on('loss', () => {
      this._updateFundDisplays();
      this._showLossMessage(pick(LOSS_MESSAGES), pick(LOSS_SUBS));
    }, this);

    this.game.events.on('spinning-started', () => {
      this._setSpinDisabled(true);
    }, this);

    this.game.events.on('spin-complete', () => {
      if (!this._gameOver) this._setSpinDisabled(false);
    }, this);

    this.game.events.on('funds-updated', () => {
      this._updateFundDisplays();
    }, this);

    this.game.events.on('insufficient-funds', () => {
      this._resetMessageTexts();
      this.messageText.setText('Insufficient funds to spin! You have been consumed by Sin.');
      this.messageText.setColor('#ff4444');
    }, this);

    this.game.events.on('vial-winner', ({ winner }) => {
      this._gameOver = true;
      this._setSpinDisabled(true);
      this._resetMessageTexts();
      const isLord = winner.toLowerCase().includes('lord');
      this.messageText.setText(
        isLord
          ? '✝  The Lord Has Triumphed!  ✝\nHis cup runneth over — glory be!'
          : '☠  Sin Has Prevailed!  ☠\nYou have been consumed by darkness.'
      );
      this.messageText.setColor(isLord ? '#ffd700' : '#ff4444');
      this.redeemText.setAlpha(0);
    }, this);
  }

  // ── Animated message display ──────────────────────────────────────────────

  /** Restore both text objects to their neutral resting state. */
  _resetMessageTexts() {
    this.tweens.killTweensOf(this.messageText);
    this.tweens.killTweensOf(this.redeemText);
    this.messageText.setPosition(MSG_X, MSG_Y).setAlpha(1).setScale(1);
    this.redeemText.setPosition(MSG_X, SUB_Y).setAlpha(0).setScale(1);
  }

  /**
   * Infernal Slam — main text crashes in from the left, sub-text rises from hell.
   */
  _showLossMessage(main, sub) {
    this.tweens.killTweensOf(this.messageText);
    this.tweens.killTweensOf(this.redeemText);

    // Dark red flash across the bar
    const flash = this.add.rectangle(800, MSG_Y, 1600, BOTTOM_BAR_HEIGHT, 0x990000)
      .setAlpha(0.5);
    this.tweens.add({
      targets: flash, alpha: 0, duration: 350,
      onComplete: () => flash.destroy(),
    });

    // Main text — slam in from the left with overshoot
    this.messageText
      .setText(main)
      .setColor('#ff3333')
      .setPosition(-320, MSG_Y)
      .setAlpha(0)
      .setScale(1.15);

    this.tweens.add({
      targets: this.messageText,
      x: MSG_X, alpha: 1, scale: 1,
      duration: 480, ease: 'Back.easeOut', easeParams: [4],
      onComplete: () => {
        // Sharp horizontal tremble on arrival
        this.tweens.add({
          targets: this.messageText,
          x: { from: MSG_X - 6, to: MSG_X + 6 },
          duration: 40, yoyo: true, repeat: 5, ease: 'Sine.easeInOut',
        });
      },
    });

    // Sub-text — rises up from below the canvas
    this.redeemText
      .setText(sub)
      .setColor('#ff9944')
      .setPosition(MSG_X, 920)
      .setAlpha(0)
      .setScale(1);

    this.tweens.add({
      targets: this.redeemText,
      y: SUB_Y, alpha: 1,
      duration: 420, delay: 380, ease: 'Cubic.easeOut',
      onComplete: () => {
        this.tweens.add({
          targets: this.redeemText,
          alpha: { from: 1, to: 0.3 },
          duration: 850, yoyo: true, repeat: -1,
        });
      },
    });
  }

  /**
   * Divine Descent — main text drops from the heavens, sub-text blooms into being.
   */
  _showWinMessage(main, sub) {
    this.tweens.killTweensOf(this.messageText);
    this.tweens.killTweensOf(this.redeemText);

    // Golden flash across the bar
    const flash = this.add.rectangle(800, MSG_Y, 1600, BOTTOM_BAR_HEIGHT, 0xffd700)
      .setAlpha(0.4);
    this.tweens.add({
      targets: flash, alpha: 0, duration: 500,
      onComplete: () => flash.destroy(),
    });

    // Floating ✦ sparkles scatter across the bar
    for (let i = 0; i < 7; i++) {
      const sp = this.add.text(
        Phaser.Math.Between(100, 1300), MSG_Y + Phaser.Math.Between(-20, 20),
        ['✦', '✝', '★', '✧'][Math.floor(Math.random() * 4)],
        { fontSize: `${Phaser.Math.Between(12, 26)}px`, color: '#ffd700' }
      ).setOrigin(0.5).setAlpha(0);

      this.tweens.add({
        targets: sp,
        y: sp.y - Phaser.Math.Between(25, 55),
        alpha: { from: 1, to: 0 },
        scale: 1.4,
        delay: i * 55,
        duration: 650,
        onComplete: () => sp.destroy(),
      });
    }

    // Main text — descends from just above the bar, scales down to normal
    this.messageText
      .setText(main)
      .setColor('#ffd700')
      .setPosition(MSG_X, BOTTOM_BAR_Y - 28)
      .setAlpha(0)
      .setScale(1.35);

    this.tweens.add({
      targets: this.messageText,
      y: MSG_Y, alpha: 1, scale: 1,
      duration: 460, ease: 'Back.easeOut', easeParams: [2.5],
    });

    // Sub-text — blooms up from a tiny point at its resting position
    this.redeemText
      .setText(sub)
      .setColor('#c8a87e')
      .setPosition(MSG_X, SUB_Y)
      .setAlpha(0)
      .setScale(0.15);

    this.tweens.add({
      targets: this.redeemText,
      scale: 1, alpha: 1,
      duration: 380, delay: 280, ease: 'Back.easeOut', easeParams: [3],
    });
  }

  // ─────────────────────────────────────────────────────────────────────────

  _updateFundDisplays() {
    this.playerText.setText(`$${GameState.playerFunds}`);
    this.lordText.setText(`$${GameState.lordFunds}`);
    this.sinText.setText(`$${GameState.sinTotal}`);

    // Flash update on change
    [this.playerText, this.lordText, this.sinText].forEach(t => {
      this.tweens.add({
        targets: t,
        scaleX: { from: 1.15, to: 1 },
        scaleY: { from: 1.15, to: 1 },
        duration: 200,
        ease: 'Bounce.easeOut'
      });
    });
  }

  // Called by GameScene to position animations toward the right box
  getPlayerBoxCenter() { return { x: PLAYER_BOX_X, y: BOX_CENTER_Y }; }
  getLordBoxCenter()   { return { x: LORD_BOX_X,   y: BOX_CENTER_Y }; }
  getSinBoxCenter()    { return { x: SIN_BOX_X,    y: BOX_CENTER_Y }; }
}