{% extends 'base.html.twig' %}

{% block title %}Fruit King{% endblock %}

{% block body %}
<style>
#fk-page-wrap {
  min-height: 100vh;
  background: #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-bottom: 90px;
}
#stage {
  position: relative;
  width: 100vw;
  max-width: 480px;
  background: #111;
  overflow: hidden;
}
#stage canvas {
  display: block;
  width: 100%;
  height: 100%;
}
#spinBtn {
  position: absolute;
  font-size: 16px;
  font-weight: bold;
  padding: 0;
  border-radius: 10px;
  border: 2px solid #c8ccd0;
  background: linear-gradient(180deg, #ff6b3d, #c1121f);
  color: #fff;
  letter-spacing: 1px;
  cursor: pointer;
}
#spinBtn:disabled { opacity: 0.5; cursor: default; }
#resetBtn {
  position: absolute;
  font-size: 14px;
  font-weight: bold;
  padding: 0;
  border-radius: 10px;
  border: 2px solid #c8ccd0;
  background: linear-gradient(180deg, #607d8b, #263238);
  color: #fff;
  letter-spacing: 0.5px;
  cursor: pointer;
}
#resetBtn:disabled { opacity: 0.5; cursor: default; }
.betBtn {
  position: absolute;
  padding: 0;
  border-radius: 6px;
  border: 2px solid #c8ccd0;
  background: #2a1c1f;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.betBtn:disabled { opacity: 0.5; cursor: default; }
#muteBtn, #howtoBtn {
  position: absolute;
  top: 10px;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: 50%;
  border: 2px solid #c8ccd0;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  z-index: 5;
}
#muteBtn { right: 10px; }
#howtoBtn { left: 10px; font-weight: bold; }

.fk-overlay-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.72);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.fk-overlay-backdrop.hidden { display: none; }
.fk-overlay-backdrop.show { opacity: 1; pointer-events: auto; }
.fk-howto-card {
  width: 100%;
  max-width: 380px;
  max-height: 82vh;
  overflow-y: auto;
  background: #1a1013;
  border: 2px solid #d4af37;
  border-radius: 14px;
  padding: 18px;
  color: #f2eee6;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.2s ease;
}
.fk-overlay-backdrop.show .fk-howto-card { transform: translateY(0) scale(1); }
.fk-howto-card h2 {
  margin: 0 0 12px;
  font-size: 16px;
  letter-spacing: 1px;
  color: #ffd76a;
}
.fk-howto-card ol { margin: 0 0 14px; padding-left: 20px; }
.fk-howto-card ol li { margin-bottom: 8px; font-size: 13px; line-height: 1.4; }
.fk-howto-card .fk-howto-note {
  font-size: 12px;
  line-height: 1.5;
  color: #d8b4a0;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 10px;
}
.fk-howto-paytable {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 14px;
  font-size: 12px;
}
.fk-howto-paytable th, .fk-howto-paytable td {
  padding: 5px 4px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.fk-howto-paytable th { color: #ffd76a; font-weight: 600; }
.fk-howto-paytable img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; }
#howtoCloseBtn {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: none;
  background: linear-gradient(180deg, #ff6b3d, #c1121f);
  color: #fff;
  font-weight: bold;
  letter-spacing: 1px;
  cursor: pointer;
}
.betBtn img {
  width: 82%;
  height: 82%;
  object-fit: contain;
  pointer-events: none;
}
.betBtn:active { background: #4a2c2f; }

.fk-bet-card {
  width: 100%;
  max-width: 340px;
  background: #1a1013;
  border: 2px solid #d4af37;
  border-radius: 14px;
  padding: 18px;
  color: #f2eee6;
  transform: translateY(10px) scale(0.97);
  transition: transform 0.2s ease;
}
.fk-overlay-backdrop.show .fk-bet-card { transform: translateY(0) scale(1); }
.fk-bet-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.fk-bet-header img { width: 36px; height: 36px; object-fit: contain; }
.fk-bet-header span { font-size: 16px; font-weight: bold; letter-spacing: 1px; color: #ffd76a; }
.fk-bet-presets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.fk-bet-preset {
  padding: 10px 0;
  border-radius: 8px;
  border: 2px solid #555;
  background: #2a1c1f;
  color: #f2eee6;
  font-size: 15px;
  font-weight: bold;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.fk-bet-preset:hover { background: #4a2c2f; border-color: #d4af37; }
.fk-bet-preset:active { background: #6a3c3f; }
.fk-bet-custom-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}
.fk-bet-custom-row input {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: 2px solid #555;
  background: #0d0a0b;
  color: #f2eee6;
  font-size: 14px;
  outline: none;
}
.fk-bet-custom-row input:focus { border-color: #d4af37; }
.fk-bet-custom-row button {
  padding: 10px 16px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(180deg, #ff6b3d, #c1121f);
  color: #fff;
  font-weight: bold;
  font-size: 14px;
  cursor: pointer;
}
.fk-bet-error {
  color: #ff6b6b;
  font-size: 12px;
  min-height: 16px;
  margin-bottom: 6px;
}
.fk-bet-cancel {
  width: 100%;
  padding: 10px;
  border-radius: 10px;
  border: 2px solid #555;
  background: transparent;
  color: #aaa;
  font-size: 13px;
  font-weight: bold;
  cursor: pointer;
}

.fk-below-stage { width: 100%; max-width: 480px; padding: 0 16px; }
.fk-history-link{display:block;text-align:center;margin-top:10px;color:#B8B2D6;font-size:13px;text-decoration:none;}
</style>

<div id="fk-page-wrap" data-testid="fruit-king-page">
  <div id="stage">
    <canvas id="canvas"></canvas>
    <button id="spinBtn" data-testid="btn-fk-spin">SPIN</button>
    <button id="resetBtn" data-testid="btn-fk-reset">RESET</button>
    <button id="muteBtn" data-testid="btn-fk-mute">🔊</button>
    <button id="howtoBtn" data-testid="btn-fk-howto">?</button>
    <div id="betButtons"></div>
    <div id="confettiOverlay" style="display:none; position:absolute; inset:0; z-index:10; pointer-events:none;"></div>
  </div>

  <div class="fk-below-stage">
    <a href="{{ path('app_play_fruit_king_history') }}" class="fk-history-link" data-turbo="false" data-testid="fk-history-link">
      View bet history →
    </a>
  </div>

  <div id="howtoOverlay" class="fk-overlay-backdrop hidden" data-testid="fk-howto-overlay">
    <div class="fk-howto-card">
      <h2>HOW TO PLAY</h2>
      <ol>
        <li>Tap a fruit icon to stake on that symbol — choose how much to bet from the popup. Bet on up to <b id="howtoMaxSymbols">4</b> different symbols per spin.</li>
        <li>Tap <b>SPIN</b> to spin the wheel, or <b>RESET</b> to clear your current bets.</li>
        <li>The wheel lands on one symbol at either a <b>single</b> or rarer <b>triple</b> tier. If it matches a symbol you staked on, that stake pays out at the tier's multiplier below.</li>
        <li><b>BAR, 7, Star and Watermelon can never win if you've staked on them</b> — they only pay when nobody has bet on that symbol.</li>
        <li>Landing on a <b>Chance</b> or <b>Fate</b> tile pays a flat ₱50 bonus, no matter what you bet.</li>
      </ol>
      <table class="fk-howto-paytable" id="howtoPaytable">
        <thead><tr><th>Symbol</th><th>Single</th><th>Triple</th></tr></thead>
        <tbody></tbody>
      </table>
      <div class="fk-howto-note">Only one outcome wins per spin — the server decides the result, the wheel just animates to it.</div>
      <button id="howtoCloseBtn" type="button">GOT IT</button>
    </div>
  </div>

  <div id="betModal" class="fk-overlay-backdrop hidden" data-testid="fk-bet-modal">
    <div class="fk-bet-card">
      <div class="fk-bet-header">
        <img id="betModalIcon" src="" alt="">
        <span id="betModalLabel"></span>
      </div>
      <div class="fk-bet-presets" id="betPresets"></div>
      <div class="fk-bet-custom-row">
        <input id="betCustomInput" type="number" min="1" placeholder="Custom" data-testid="fk-bet-custom-input">
        <button id="betCustomBtn" type="button" data-testid="fk-bet-custom-btn">BET</button>
      </div>
      <div id="betModalError" class="fk-bet-error"></div>
      <button id="betModalCancel" type="button" class="fk-bet-cancel">CANCEL</button>
    </div>
  </div>
</div>

{# ── Sticky Wallet Bar ── #}
<div class="wallet-bar" data-testid="wallet-bar">
  <div class="wallet-bar__balance"
       data-controller="balance-counter"
       data-balance-counter-amount-value="{{ app.user.walletBalance }}">
    <p class="wallet-bar__label">Balance</p>
    <p class="wallet-bar__amount"
       id="wallet-bar-amount"
       data-testid="wallet-balance"
       data-balance-counter-target="display">₱{{ app.user.walletBalance|number_format(2) }}</p>
  </div>
  <div class="wallet-bar__actions">
    <a href="{{ path('app_deposit') }}"
       class="pill-link--ghost"
       style="font-size: 12px; padding: 7px 14px;"
       data-testid="wallet-bar-add-funds">+ Add Funds</a>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/lottie-web@5.12.2/build/player/lottie.min.js"></script>
<script>
(function(){
  var STATE_URL = '{{ path('app_play_fruit_king_state') }}';
  var BET_URL   = '{{ path('app_play_fruit_king_bet') }}';
  var CSRF      = '{{ csrf_token('fruit_king_bet') }}';
  var playBlocked = {{ playBlocked ? 'true' : 'false' }};

  // Same order as App\Entity\FruitKingBet::SYMBOLS (top-tier then bottom-tier).
  var SYMBOL_KEYS = ['bar', 'seven', 'star', 'watermelon', 'bell', 'mango', 'orange', 'apple'];

  var stage = document.getElementById('stage');
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  var spinBtn = document.getElementById('spinBtn');
  var resetBtn = document.getElementById('resetBtn');
  var walletEl = document.getElementById('wallet-bar-amount');

  var img = new Image();
  img.src = '{{ asset('game/fruit-king/board-background.png') }}';

  var cabinetImg = new Image();
  cabinetImg.src = '{{ asset('game/fruit-king/cabinet.png') }}';

  var MUTE_STORAGE_KEY = 'fruitKingMuted';
  var muted = localStorage.getItem(MUTE_STORAGE_KEY) === '1';
  var muteBtn = document.getElementById('muteBtn');

  // A single reused Audio element chokes when retriggered faster than it
  // can rewind-and-replay (e.g. beeps during a fast spin) — overlapping
  // calls cut each other off instead of layering, so it sounds silent.
  // A small round-robin pool lets rapid-fire plays overlap cleanly.
  function createSoundPool(src, size) {
    var pool = [];
    for (var i = 0; i < size; i++) pool.push(new Audio(src));
    var idx = 0;
    return function (volume) {
      if (muted) return;
      var a = pool[idx];
      idx = (idx + 1) % pool.length;
      a.volume = volume == null ? 1 : volume;
      a.currentTime = 0;
      a.play().catch(function () {});
    };
  }

  var playClickSound = createSoundPool('{{ asset('game/musics/fruit_king_click.mp3') }}', 4);
  // Delegated so it covers SPIN, RESET, and every bet-icon button
  // (including ones created dynamically below) with a single listener.
  stage.addEventListener('click', function (e) {
    if (e.target.closest('button')) playClickSound();
  });

  var playBeepSound = createSoundPool('{{ asset('game/musics/fruit_king_beep.mp3') }}', 8);
  var playWinSound = createSoundPool('{{ asset('game/musics/fruit_king_win.mp3') }}', 2);

  var confettiOverlay = document.getElementById('confettiOverlay');
  function launchConfetti() {
    if (typeof lottie === 'undefined') return;
    confettiOverlay.innerHTML = '';
    confettiOverlay.style.display = 'block';
    var anim = lottie.loadAnimation({
      container: confettiOverlay,
      renderer: 'svg',
      loop: false,
      autoplay: true,
      path: '{{ asset('game/confetti.json') }}',
    });
    anim.addEventListener('complete', function () {
      confettiOverlay.style.display = 'none';
      anim.destroy();
    });
  }

  var bgMusic = new Audio('{{ asset('game/musics/fruit_king_bg.mp3') }}');
  bgMusic.loop = true;
  bgMusic.volume = 0.3;
  bgMusic.muted = muted;
  function tryStartBgMusic() {
    if (!bgMusic.paused) return;
    bgMusic.play().then(function () {
      ['pointerdown', 'click', 'touchstart', 'keydown'].forEach(function (ev) {
        document.removeEventListener(ev, tryStartBgMusic);
      });
    }).catch(function () {});
  }
  tryStartBgMusic();
  ['pointerdown', 'click', 'touchstart', 'keydown'].forEach(function (ev) {
    document.addEventListener(ev, tryStartBgMusic);
  });

  function updateMuteBtn() {
    muteBtn.textContent = muted ? '🔇' : '🔊';
    bgMusic.muted = muted;
  }
  muteBtn.addEventListener('click', function (e) {
    e.stopPropagation(); // don't let the click-sound delegation try to play while toggling mute
    muted = !muted;
    localStorage.setItem(MUTE_STORAGE_KEY, muted ? '1' : '0');
    updateMuteBtn();
  });
  updateMuteBtn();

  // Bounding box (in full cabinetImg pixel space) of the transparent
  // "screen" cutout in the cabinet frame, found via alpha flood-fill.
  var SCREEN_RECT_FULL = { x: 182, y: 270, w: 537, h: 519 };

  // Crop of the cabinet art we actually render: keeps a sliver of the
  // decorative top red drawer and bottom red coin-tray (so it still reads
  // as a cabinet) while zooming well past the source's own black padding.
  var CABINET_CROP = { x: 111, y: 60, w: 680, h: 1240 };

  var SCREEN_RECT = {
    x: SCREEN_RECT_FULL.x - CABINET_CROP.x,
    y: SCREEN_RECT_FULL.y - CABINET_CROP.y,
    w: SCREEN_RECT_FULL.w,
    h: SCREEN_RECT_FULL.h,
  };
  var TRAY_RECT = { x: 0, y: 870, w: CABINET_CROP.w, h: 250 };

  // The 8 blank "bet count" cells under the paytable icons (BAR, 7, star,
  // watermelon, bell, mango, orange, apple), in full cabinetImg pixel space.
  var PAYTABLE_COLS = 8;
  var PAYTABLE_ROW_FULL = { x: 181, y: 881, right: 722, bottom: 922 };
  var betCounts = [0, 0, 0, 0, 0, 0, 0, 0];

  // Column order (BAR, 7, star, watermelon, bell, mango, orange, apple)
  // matched to the iBet asset that shows that same symbol.
  var BET_ICON_FILES = [
    '{{ asset('game/fruit-king/bar.png') }}',
    '{{ asset('game/fruit-king/seven.png') }}',
    '{{ asset('game/fruit-king/star.png') }}',
    '{{ asset('game/fruit-king/watermelon.png') }}',
    '{{ asset('game/fruit-king/bell.png') }}',
    '{{ asset('game/fruit-king/mango.png') }}',
    '{{ asset('game/fruit-king/orange.png') }}',
    '{{ asset('game/fruit-king/apple.png') }}',
  ];

  var SYMBOL_IMG_MAP = {};
  BET_ICON_FILES.forEach(function (src, i) {
    var im = new Image();
    im.src = src;
    SYMBOL_IMG_MAP[SYMBOL_KEYS[i]] = im;
  });

  // Matches App\Service\FruitKingService::MULTIPLIERS, [single, triple].
  var SYMBOL_LABELS = ['BAR', '7', 'Star', 'Watermelon', 'Bell', 'Mango', 'Orange', 'Apple'];
  var MULTIPLIERS = [
    [100, 300], [20, 60], [20, 60], [20, 60],
    [10, 30], [10, 30], [10, 30], [5, 15],
  ];

  var howtoBtn = document.getElementById('howtoBtn');
  var howtoOverlay = document.getElementById('howtoOverlay');
  var howtoCloseBtn = document.getElementById('howtoCloseBtn');
  var howtoPaytableBody = document.querySelector('#howtoPaytable tbody');
  BET_ICON_FILES.forEach(function (src, i) {
    var row = document.createElement('tr');
    row.innerHTML =
      '<td><img src="' + src + '" alt="' + SYMBOL_LABELS[i] + '"><br>' + SYMBOL_LABELS[i] + '</td>' +
      '<td>' + MULTIPLIERS[i][0] + 'x</td>' +
      '<td>' + MULTIPLIERS[i][1] + 'x</td>';
    howtoPaytableBody.appendChild(row);
  });
  howtoBtn.addEventListener('click', function (e) {
    e.stopPropagation();
    howtoOverlay.classList.remove('hidden');
    requestAnimationFrame(function () {
      requestAnimationFrame(function () { howtoOverlay.classList.add('show'); });
    });
  });
  function closeHowto() {
    howtoOverlay.classList.remove('show');
    setTimeout(function () { howtoOverlay.classList.add('hidden'); }, 220);
  }
  howtoCloseBtn.addEventListener('click', closeHowto);
  howtoOverlay.addEventListener('click', function (e) {
    if (e.target === howtoOverlay) closeHowto();
  });

  var betButtonsContainer = document.getElementById('betButtons');
  var betModal = document.getElementById('betModal');
  var betModalIcon = document.getElementById('betModalIcon');
  var betModalLabel = document.getElementById('betModalLabel');
  var betPresetsContainer = document.getElementById('betPresets');
  var betCustomInput = document.getElementById('betCustomInput');
  var betCustomBtn = document.getElementById('betCustomBtn');
  var betModalError = document.getElementById('betModalError');
  var betModalCancel = document.getElementById('betModalCancel');
  var betModalSymbolIndex = -1;

  function openBetModal(symbolIndex) {
    if (spinning) return;
    betModalSymbolIndex = symbolIndex;
    betModalIcon.src = BET_ICON_FILES[symbolIndex];
    betModalLabel.textContent = SYMBOL_LABELS[symbolIndex];
    betModalError.textContent = '';
    betCustomInput.value = '';

    betPresetsContainer.innerHTML = '';
    var presets = [1, 5, 10, 50];
    if (maxBetAmount > 50) presets.push(maxBetAmount);
    presets = presets.filter(function (v) { return v <= maxBetAmount; });
    presets.forEach(function (v) {
      var b = document.createElement('button');
      b.className = 'fk-bet-preset';
      b.type = 'button';
      b.textContent = '\u20B1' + v;
      b.setAttribute('data-testid', 'fk-bet-preset-' + v);
      b.addEventListener('click', function () { applyBet(v); });
      betPresetsContainer.appendChild(b);
    });

    betModal.classList.remove('hidden');
    requestAnimationFrame(function () {
      requestAnimationFrame(function () { betModal.classList.add('show'); });
    });
  }

  function closeBetModal() {
    betModal.classList.remove('show');
    setTimeout(function () { betModal.classList.add('hidden'); }, 220);
    betModalSymbolIndex = -1;
  }

  function applyBet(amount) {
    if (betModalSymbolIndex < 0) return;
    betCounts[betModalSymbolIndex] = amount;
    draw();
    updateSpinEnabled();
    closeBetModal();
  }

  function validateCustomBet() {
    var val = parseInt(betCustomInput.value, 10);
    if (!val || val < 1) {
      betModalError.textContent = 'Minimum bet is \u20B11.';
      return;
    }
    if (val > maxBetAmount) {
      betModalError.textContent = 'Maximum bet is \u20B1' + maxBetAmount + '.';
      return;
    }
    applyBet(val);
  }

  betCustomBtn.addEventListener('click', validateCustomBet);
  betCustomInput.addEventListener('keydown', function (e) {
    if (e.key === 'Enter') validateCustomBet();
  });
  betModalCancel.addEventListener('click', closeBetModal);
  betModal.addEventListener('click', function (e) {
    if (e.target === betModal) closeBetModal();
  });

  var betButtons = BET_ICON_FILES.map(function (src, i) {
    var btn = document.createElement('button');
    btn.className = 'betBtn';
    btn.setAttribute('data-testid', 'fk-bet-btn-' + SYMBOL_KEYS[i]);
    var iconImg = document.createElement('img');
    iconImg.src = src;
    btn.appendChild(iconImg);
    btn.addEventListener('click', function () {
      if (spinning) return;
      if (betCounts[i] === 0 && selectedSymbolCount() >= maxSymbolsPerSpin) {
        alert('You can only bet on up to ' + maxSymbolsPerSpin + ' symbols per spin.');
        return;
      }
      openBetModal(i);
    });
    betButtonsContainer.appendChild(btn);
    return btn;
  });

  function getPaytableCell(i) {
    var colW = (PAYTABLE_ROW_FULL.right - PAYTABLE_ROW_FULL.x) / PAYTABLE_COLS;
    return {
      x: PAYTABLE_ROW_FULL.x + i * colW - CABINET_CROP.x,
      y: PAYTABLE_ROW_FULL.y - CABINET_CROP.y,
      w: colW,
      h: PAYTABLE_ROW_FULL.bottom - PAYTABLE_ROW_FULL.y,
    };
  }

  // Segment map for a classic 7-segment digit.
  var SEVEN_SEG = {
    '0': 'abcdef', '1': 'bc', '2': 'abged', '3': 'abgcd', '4': 'fgbc',
    '5': 'afgcd', '6': 'afgecd', '7': 'abc', '8': 'abcdefg', '9': 'abcdfg',
  };

  function drawSevenSegDigit(ctx, x, y, w, h, digit, color) {
    var on = {};
    (SEVEN_SEG[digit] || '').split('').forEach(function (c) { on[c] = true; });
    var t = Math.max(1.2, w * 0.15);
    var segs = {
      a: [x + t, y, w - 2 * t, t],
      d: [x + t, y + h - t, w - 2 * t, t],
      g: [x + t, y + h / 2 - t / 2, w - 2 * t, t],
      f: [x, y + t, t, h / 2 - t * 1.25],
      b: [x + w - t, y + t, t, h / 2 - t * 1.25],
      e: [x, y + h / 2 + t * 0.25, t, h / 2 - t * 1.25],
      c: [x + w - t, y + h / 2 + t * 0.25, t, h / 2 - t * 1.25],
    };
    ctx.fillStyle = color;
    Object.keys(segs).forEach(function (key) {
      if (!on[key]) return;
      var s = segs[key];
      ctx.fillRect(s[0], s[1], s[2], s[3]);
    });
  }

  function drawBetCount(ctx, cell, str) {
    var digits = str.split('');
    var vInset = Math.max(1.5, cell.h * 0.12);
    var digitH = cell.h - vInset * 2;
    var boxPadY = digitH * 0.18;
    var digitW = digitH * 0.5;
    var gap = digitW * 0.16;
    var boxPadX = digitW * 0.85;

    var boxH = digitH + boxPadY * 2;
    var boxW = digitW * digits.length + gap * (digits.length - 1) + boxPadX * 2;
    var boxX = cell.x + (cell.w - boxW) / 2;
    var boxY = cell.y + (cell.h - boxH) / 2;
    ctx.fillStyle = '#1a1013';
    ctx.fillRect(boxX, boxY, boxW, boxH);
    ctx.strokeStyle = '#000';
    ctx.lineWidth = Math.max(1, cell.w * 0.02);
    ctx.strokeRect(boxX, boxY, boxW, boxH);

    var startX = boxX + boxPadX;
    var digitY = boxY + boxPadY;
    digits.forEach(function (d, i) {
      var digitX = startX + i * (digitW + gap);
      drawSevenSegDigit(ctx, digitX, digitY, digitW, digitH, d, '#ff3b2f');
    });
  }

  // Real pixel centers of the 24 maroon light squares, clockwise from the
  // top-left corner, in board-image pixel space.
  var RING = [
    { x: 174.6, y: 175.5 }, { x: 227.6, y: 175.5 }, { x: 369.6, y: 175.5 }, { x: 511.6, y: 175.5 },
    { x: 653.6, y: 175.5 }, { x: 795.6, y: 175.5 }, { x: 848.6, y: 175.5 }, { x: 848.5, y: 228.5 },
    { x: 848.6, y: 370.5 }, { x: 848.5, y: 512.5 }, { x: 848.5, y: 654.5 }, { x: 848.6, y: 797.4 },
    { x: 848.6, y: 850.5 }, { x: 795.6, y: 850.5 }, { x: 653.6, y: 850.5 }, { x: 511.6, y: 850.5 },
    { x: 369.6, y: 850.5 }, { x: 227.6, y: 850.5 }, { x: 174.6, y: 850.5 }, { x: 174.6, y: 797.4 },
    { x: 174.5, y: 654.5 }, { x: 174.5, y: 512.5 }, { x: 174.6, y: 370.4 }, { x: 174.6, y: 228.5 },
  ];

  // Maps each RING position to the bet-button index it corresponds to
  // (0=BAR, 1=77, 2=star, 3=watermelon, 4=bell, 5=mango, 6=orange, 7=apple),
  // or null for the two bonus tiles (Chance/Fate).
  var RING_BET_INDEX = [
    6, 4, 0, 0, 7, 7, 5, 3, 3, null, 7, 6,
    6, 4, 1, 1, 7, 3, 5, 2, 2, null, 7, 4,
  ];

  // Which ring positions represent the 'triple' segment for their symbol
  // (used only to pick a landing spot for a server-decided triple outcome —
  // the payout itself always comes from the server, never computed here).
  var RING_TRIPLE = [
    false, false, false, true, false, true, false, false,
    true, false, false, true, false, false, true, false,
    false, true, false, false, true, false, false, true,
  ];
  var LIGHT_BASE_RADIUS = 15;

  // Center of the actual symbol tile each ring light sits beside, in the
  // same board-image pixel space as RING (measured from the 7x7 tile grid).
  // Used to place the active-symbol glow on the icon itself rather than on
  // the small light dot, which sits on the border track between tiles.
  var TILE_CENTERS = [
    { x: 86, y: 87.5 }, { x: 227.5, y: 87.5 }, { x: 369.5, y: 87.5 }, { x: 511.5, y: 87.5 },
    { x: 653.75, y: 87.5 }, { x: 795.75, y: 87.5 }, { x: 937, y: 87.5 }, { x: 937, y: 229 },
    { x: 937, y: 371 }, { x: 937, y: 513 }, { x: 937, y: 655 }, { x: 937, y: 797 },
    { x: 937, y: 938.75 }, { x: 795.75, y: 938.75 }, { x: 653.75, y: 938.75 }, { x: 511.5, y: 938.75 },
    { x: 369.5, y: 938.75 }, { x: 227.5, y: 938.75 }, { x: 86, y: 938.75 }, { x: 86, y: 797 },
    { x: 86, y: 655 }, { x: 86, y: 513 }, { x: 86, y: 371 }, { x: 86, y: 229 },
  ];
  // Half the tile width in board-image pixel space (measured from the 7x7
  // grid line spacing, ~141.5px), used to size the rim glow to the tile's
  // own edge rather than an arbitrary radius.
  var TILE_HALF_BOARD = 70.75;

  // The red result box between the leopard and fox mascots, in board-image
  // pixel space.
  var RESULT_BOX = { x: 458, y: 642, w: 105, h: 63 };

  var activeIndex = -1;
  var spinning = false;
  var spinStart = 0, spinDuration = 0, spinTotalSteps = 0, spinStartIndex = 0, lastSpinStep = -1;
  var spinResult = null; // null | 'WIN' | 'LOSE'
  var winAmount = 0;
  var outcomeSymbol = null; // e.g. 'seven', 'apple' — set from server response
  var flashing = false, flashPhase = false, flashStartTime = 0;
  var FLASH_DURATION = 3000, FLASH_INTERVAL = 250;

  // Size the stage to fill whatever vertical space is left between the
  // sticky navbar and the fixed wallet bar, so the cabinet fits the screen
  // height instead of being cropped by a fixed aspect ratio.
  function fitStageHeight() {
    var navbar = document.querySelector('.navbar');
    var walletBar = document.querySelector('.wallet-bar');
    var navH = navbar ? navbar.getBoundingClientRect().height : 0;
    var walletH = walletBar ? walletBar.getBoundingClientRect().height : 0;
    var available = window.innerHeight - navH - walletH;
    stage.style.height = Math.max(320, available) + 'px';
  }

  function resizeCanvas() {
    fitStageHeight();
    canvas.width = stage.clientWidth;
    canvas.height = stage.clientHeight;
    draw();
    if (img.complete && img.naturalWidth && cabinetImg.complete && cabinetImg.naturalWidth) {
      layoutTrayControls(getCabinetTransform());
    }
  }

  // A modest zoom over the plain "contain" fit — players on some screens
  // found the cabinet too small to make out. This eats into (and, once a
  // screen's letterboxing gap is smaller than this, slightly past) the
  // blank space around the cabinet art rather than the screen/tray area,
  // which sit well inside the cabinet's own margins.
  var CABINET_ZOOM = 1.18;

  function getCabinetTransform() {
    // "Contain" fit — scale to the smaller ratio so the whole cabinet is
    // always visible (letterboxed left/right if needed), never cropped.
    var scale = Math.min(canvas.width / CABINET_CROP.w, canvas.height / CABINET_CROP.h) * CABINET_ZOOM;
    var drawWidth = CABINET_CROP.w * scale;
    var drawHeight = CABINET_CROP.h * scale;
    return {
      scale: scale, drawWidth: drawWidth, drawHeight: drawHeight,
      offsetX: (canvas.width - drawWidth) / 2,
      offsetY: (canvas.height - drawHeight) / 2,
    };
  }

  function getBoardTransform(cabinetT) {
    var screenX = cabinetT.offsetX + SCREEN_RECT.x * cabinetT.scale;
    var screenY = cabinetT.offsetY + SCREEN_RECT.y * cabinetT.scale;
    var screenW = SCREEN_RECT.w * cabinetT.scale;
    var screenH = SCREEN_RECT.h * cabinetT.scale;
    var scale = Math.min(screenW / img.naturalWidth, screenH / img.naturalHeight);
    var drawWidth = img.naturalWidth * scale;
    var drawHeight = img.naturalHeight * scale;
    return {
      scale: scale, drawWidth: drawWidth, drawHeight: drawHeight,
      offsetX: screenX + (screenW - drawWidth) / 2,
      offsetY: screenY + (screenH - drawHeight) / 2,
    };
  }

  function layoutTrayControls(cabinetT) {
    var trayX = cabinetT.offsetX + TRAY_RECT.x * cabinetT.scale;
    var trayY = cabinetT.offsetY + TRAY_RECT.y * cabinetT.scale;
    var trayW = TRAY_RECT.w * cabinetT.scale;
    var trayH = TRAY_RECT.h * cabinetT.scale;

    var cols = 5;
    var gridPadX = trayW * 0.035;
    var cellW = (trayW - gridPadX * 2) / cols;
    var cellH = trayH * 0.36;
    var gridTop = trayY + trayH * 0.22;

    var gridItems = betButtons.concat([spinBtn, resetBtn]);
    gridItems.forEach(function (el, i) {
      var col = i % cols;
      var row = Math.floor(i / cols);
      var cellX = trayX + gridPadX + col * cellW;
      var cellY = gridTop + row * cellH;
      var isIconBtn = el.classList.contains('betBtn');
      var size = Math.min(cellW, cellH) * 0.98;
      el.style.left = (cellX + (cellW - size) / 2) + 'px';
      el.style.top = (cellY + (cellH - size) / 2) + 'px';
      el.style.width = size + 'px';
      el.style.height = size + 'px';
      if (!isIconBtn) el.style.fontSize = Math.max(11, size * 0.22) + 'px';
    });
  }

  function draw() {
    ctx.fillStyle = '#111';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    if (!(img.complete && img.naturalWidth && cabinetImg.complete && cabinetImg.naturalWidth)) return;

    var cabinetT = getCabinetTransform();
    var t = getBoardTransform(cabinetT);
    ctx.drawImage(img, t.offsetX, t.offsetY, t.drawWidth, t.drawHeight);

    var lightRadius = Math.max(3, t.scale * LIGHT_BASE_RADIUS);
    RING.forEach(function (p, i) {
      var x = t.offsetX + p.x * t.scale;
      var y = t.offsetY + p.y * t.scale;
      var isActive = flashing ? flashPhase : i === activeIndex;
      var r = isActive ? lightRadius * 1.4 : lightRadius;

      if (isActive) {
        // Light up the fruit icon printed on the board tile this light
        // belongs to, not just the small indicator square itself. The glow
        // follows the tile's own square shape — a bright band right at its
        // edge, blurred inward — clipped to the tile so the light reads as
        // shining in from the square border rather than a circular blob.
        var tileP = TILE_CENTERS[i];
        var tileX = t.offsetX + tileP.x * t.scale;
        var tileY = t.offsetY + tileP.y * t.scale;
        var half = TILE_HALF_BOARD * t.scale;
        var tileLeft = tileX - half;
        var tileTop = tileY - half;

        ctx.save();
        ctx.beginPath();
        ctx.rect(tileLeft, tileTop, half * 2, half * 2);
        ctx.clip();

        ctx.shadowColor = 'rgba(255,225,120,0.95)';
        ctx.shadowBlur = half * 0.9;
        ctx.lineWidth = half * 0.5;
        ctx.strokeStyle = 'rgba(255,235,150,0.95)';
        ctx.strokeRect(tileLeft, tileTop, half * 2, half * 2);
        ctx.restore();
      }

      ctx.fillStyle = isActive ? '#fff6d0' : '#7a1a12';
      ctx.fillRect(x - r, y - r, r * 2, r * 2);
    });

      if (spinResult) {
        // Winning gets a bigger box than losing so the payout amount has
        // real room to be emphasized.
        var RESULT_BOX_SCALE = spinResult === 'WIN' ? 2.5 : 1.9;
      var boxCenterX = RESULT_BOX.x + RESULT_BOX.w / 2;
      var boxCenterY = RESULT_BOX.y + RESULT_BOX.h / 2;
      var bigW = RESULT_BOX.w * RESULT_BOX_SCALE;
      var bigH = RESULT_BOX.h * RESULT_BOX_SCALE;
      var bx = t.offsetX + (boxCenterX - bigW / 2) * t.scale;
      var by = t.offsetY + (boxCenterY - bigH / 2) * t.scale;
      var bw = bigW * t.scale;
      var bh = bigH * t.scale;

      var radius = bh * 0.12;
      ctx.beginPath();
      ctx.moveTo(bx + radius, by);
      ctx.arcTo(bx + bw, by, bx + bw, by + bh, radius);
      ctx.arcTo(bx + bw, by + bh, bx, by + bh, radius);
      ctx.arcTo(bx, by + bh, bx, by, radius);
      ctx.arcTo(bx, by, bx + bw, by, radius);
      ctx.closePath();
      ctx.fillStyle = 'rgb(130,24,14)';
      ctx.fill();
      ctx.strokeStyle = '#000';
      ctx.lineWidth = Math.max(1, bh * 0.035);
      ctx.stroke();

      ctx.textAlign = 'center';
      ctx.textBaseline = 'middle';
      ctx.strokeStyle = '#000';
      var cx = bx + bw / 2;

      // Draw the outcome symbol image above the result box —
      // 3x on WIN (pulsing with flash), 2x static on LOSE.
      if (spinResult && outcomeSymbol && SYMBOL_IMG_MAP[outcomeSymbol] && SYMBOL_IMG_MAP[outcomeSymbol].complete && SYMBOL_IMG_MAP[outcomeSymbol].naturalWidth) {
        var showSym = spinResult === 'WIN' ? (!flashing || flashPhase) : true;
        if (showSym) {
          var symIm = SYMBOL_IMG_MAP[outcomeSymbol];
          var symMaxSize = spinResult === 'WIN' ? bh * 1.65 : bh * 1.10;
          var symPulse = spinResult === 'WIN' ? 1 + Math.sin(performance.now() / 180) * 0.08 : 1;
          var symW = symMaxSize * symPulse;
          var symH = symMaxSize * symPulse;
          ctx.drawImage(symIm, cx - symW / 2, by - symH - bh * 0.06, symW, symH);
        }
      }

      if (spinResult === 'WIN') {
        ctx.lineWidth = Math.max(1, bh * 0.04);
        ctx.font = 'bold ' + (bh * 0.24) + 'px sans-serif';
        ctx.fillStyle = '#4dff5a';
        ctx.strokeText('WIN', cx, by + bh * 0.2);
        ctx.fillText('WIN', cx, by + bh * 0.2);

        if (!flashing || flashPhase) {
          var amountText = '+' + winAmount;
          var amountFont = bh * 0.68;
          ctx.font = 'bold ' + amountFont + 'px sans-serif';
          var amountWidth = ctx.measureText(amountText).width;
          var amountMaxWidth = bw * 0.88;
          if (amountWidth > amountMaxWidth) {
            amountFont *= amountMaxWidth / amountWidth;
            ctx.font = 'bold ' + amountFont + 'px sans-serif';
          }

          var amountPulse = 1 + Math.sin(performance.now() / 180) * 0.08;
          ctx.save();
          ctx.translate(cx, by + bh * 0.62);
          ctx.scale(amountPulse, amountPulse);
          ctx.lineWidth = Math.max(1, bh * 0.05);
          ctx.fillStyle = '#ffd54a';
          ctx.strokeText(amountText, 0, 0);
          ctx.fillText(amountText, 0, 0);
          ctx.restore();
        }
      } else {
        ctx.lineWidth = Math.max(1, bh * 0.06);
        ctx.font = 'bold ' + (bh * 0.55) + 'px sans-serif';
        ctx.fillStyle = '#ff4d4d';
        ctx.strokeText(spinResult, cx, by + bh / 2);
        ctx.fillText(spinResult, cx, by + bh / 2);
      }
    }

    // Cabinet frame drawn last, on top — its screen area is transparent
    // so the board + lights show through the cutout.
    ctx.drawImage(
      cabinetImg,
      CABINET_CROP.x, CABINET_CROP.y, CABINET_CROP.w, CABINET_CROP.h,
      cabinetT.offsetX, cabinetT.offsetY, cabinetT.drawWidth, cabinetT.drawHeight
    );

    // Bet-count LED digits, drawn on top of the cabinet's blank paytable cells.
    for (var i = 0; i < PAYTABLE_COLS; i++) {
      var cellFull = getPaytableCell(i);
      var cell = {
        x: cabinetT.offsetX + cellFull.x * cabinetT.scale,
        y: cabinetT.offsetY + cellFull.y * cabinetT.scale,
        w: cellFull.w * cabinetT.scale,
        h: cellFull.h * cabinetT.scale,
      };
      drawBetCount(ctx, cell, String(betCounts[i]).padStart(2, '0'));
    }
  }

  function easeOutCubic(x) { return 1 - Math.pow(1 - x, 3); }

  function updateSpinEnabled() {
    var totalStaked = betCounts.reduce(function (a, b) { return a + b; }, 0);
    spinBtn.disabled = spinning || playBlocked || totalStaked === 0;
    resetBtn.disabled = spinning || playBlocked;
    betButtons.forEach(function (btn) {
      btn.disabled = spinning || playBlocked;
    });
  }

  // Ring positions matching the server's (symbol, tier) outcome. Falls back
  // to any position for that symbol if a dedicated tier-specific light
  // doesn't exist (e.g. Mango has no triple-labeled position in the source
  // art) — the result box text still communicates the real tier/payout.
  function ringIndicesFor(symbol, tier) {
    var symbolIndex = SYMBOL_KEYS.indexOf(symbol);
    var wantTriple = tier === 'triple';
    var exact = [];
    var any = [];
    RING_BET_INDEX.forEach(function (betIndex, i) {
      if (betIndex !== symbolIndex) return;
      any.push(i);
      if (RING_TRIPLE[i] === wantTriple) exact.push(i);
    });
    return exact.length > 0 ? exact : any;
  }
  function ringIndexForBonus(symbol) {
    var matches = [];
    RING_BET_INDEX.forEach(function (betIndex, i) {
      if (betIndex === null) matches.push(i);
    });
    // Chance is the first null slot, Fate the second, matching the source art.
    return symbol === 'chance' ? matches[0] : matches[1];
  }

  // ── Two-phase spin ──────────────────────────────────────────────────────
  // Phase 1 starts the instant SPIN is clicked, cycling the lights at a
  // constant fast rate with no target yet — the player never waits on the
  // network before seeing motion. Phase 2 takes over once the server's real
  // outcome is known, decelerating from wherever phase 1 left off onto the
  // true target light.
  //
  // The two phases must hand off at the *same* speed or the spin visibly
  // lurches at the transition (slow → sudden jolt of speed → slow again).
  // Phase 1's rate is 1 step per INDETERMINATE_STEP_MS. Phase 2 uses
  // easeOutCubic, whose velocity at t=0 is 3 * totalSteps / duration; solving
  // that for duration so it equals phase 1's rate gives a seamless handoff —
  // phase 2 starts at exactly the speed phase 1 was already going, then
  // smoothly decelerates from there, rather than restarting a fresh (much
  // faster) curve from a standing start.
  var INDETERMINATE_STEP_MS = 16; // ~1 light per frame — fast from the first click
  var indeterminateSpinActive = false;

  function startIndeterminateSpin() {
    spinning = true;
    indeterminateSpinActive = true;
    spinResult = null;
    outcomeSymbol = null;
    flashing = false;

    var lastStepTime = performance.now();
    requestAnimationFrame(function frame(now) {
      if (!indeterminateSpinActive) return; // phase 2 has taken over
      if (now - lastStepTime >= INDETERMINATE_STEP_MS) {
        activeIndex = (activeIndex + 1) % RING.length;
        playBeepSound(0.4);
        draw();
        lastStepTime = now;
      }
      requestAnimationFrame(frame);
    });
  }

  function landOnTarget(targetIndex, onLanded) {
    indeterminateSpinActive = false; // stop phase 1's loop on its next tick

    var startIndex = activeIndex >= 0 ? activeIndex : 0;
    var revolutions = 2;
    var forward = targetIndex - startIndex;
    if (forward <= 0) forward += RING.length;
    spinTotalSteps = revolutions * RING.length + forward;
    // duration solved so easeOutCubic's velocity at t=0 matches phase 1's
    // constant rate exactly (see comment above) — no jolt at the handoff.
    spinDuration = Math.max(1800, Math.min(3800, 3 * spinTotalSteps * INDETERMINATE_STEP_MS));
    spinStart = performance.now();
    spinStartIndex = startIndex;
    lastSpinStep = -1;

    requestAnimationFrame(function frame(now) {
      var elapsed = now - spinStart;
      var t = Math.min(1, elapsed / spinDuration);
      var eased = easeOutCubic(t);
      var step = Math.floor(eased * spinTotalSteps);
      activeIndex = (spinStartIndex + step) % RING.length;
      if (step !== lastSpinStep) {
        lastSpinStep = step;
        playBeepSound(0.25 + 0.75 * t);
      }
      draw();

      if (t < 1) {
        requestAnimationFrame(frame);
      } else {
        spinning = false;
        setTimeout(onLanded, 400);
      }
    });
  }

  function startFlash() {
    flashing = true;
    flashStartTime = performance.now();
    requestAnimationFrame(function frame(now) {
      var elapsed = now - flashStartTime;
      if (elapsed >= FLASH_DURATION) {
        flashing = false;
        flashPhase = false;
        draw();
        return;
      }
      flashPhase = Math.floor(elapsed / FLASH_INTERVAL) % 2 === 0;
      draw();
      requestAnimationFrame(frame);
    });
  }

  var currentBalance = parseFloat('{{ app.user.walletBalance }}');
  var maxBetAmount = 99; // updated from server state
  var maxSymbolsPerSpin = 4; // updated from server state
  var howtoMaxSymbolsEl = document.getElementById('howtoMaxSymbols');

  function setWalletBalance(balance) {
    currentBalance = parseFloat(balance);
    walletEl.textContent = '₱' + currentBalance.toLocaleString('en-US', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
  }

  function selectedSymbolCount() {
    var count = 0;
    betCounts.forEach(function (c) { if (c > 0) count++; });
    return count;
  }

  function loadState() {
    fetch(STATE_URL, { credentials: 'same-origin' })
      .then(function (res) { return res.json(); })
      .then(function (data) {
        setWalletBalance(data.walletBalance);
        if (data.maxBetAmount != null) maxBetAmount = parseInt(data.maxBetAmount, 10) || 99;
        if (data.maxSymbolsPerSpin != null) {
          maxSymbolsPerSpin = parseInt(data.maxSymbolsPerSpin, 10) || 4;
          if (howtoMaxSymbolsEl) howtoMaxSymbolsEl.textContent = String(maxSymbolsPerSpin);
        }
      });
  }

  resetBtn.addEventListener('click', function () {
    if (spinning) return;
    betCounts.fill(0);
    spinResult = null;
    outcomeSymbol = null;
    draw();
    updateSpinEnabled();
  });

  spinBtn.addEventListener('click', function () {
    if (spinning) return;
    var bets = [];
    var totalStake = 0;
    betCounts.forEach(function (count, i) {
      if (count > 0) {
        bets.push({ symbol: SYMBOL_KEYS[i], amount: count });
        totalStake += count;
      }
    });
    if (bets.length === 0) return;

    // Deduct the stake the moment the spin is placed, not after the result
    // comes back — reconciled with the server's authoritative balance
    // (win credit included) once the response arrives, and reverted if the
    // request fails.
    var balanceBeforeStake = currentBalance;
    setWalletBalance(currentBalance - totalStake);

    // Start spinning immediately — don't make the player wait on the network
    // before anything moves. updateSpinEnabled() (called via startIndeterminateSpin
    // setting `spinning = true`) disables the buttons for the duration.
    startIndeterminateSpin();
    updateSpinEnabled();

    fetch(BET_URL, {
      method: 'POST',
      credentials: 'same-origin',
      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
      body: new URLSearchParams({ _token: CSRF, bets: JSON.stringify(bets) }),
    })
      .then(function (res) { return res.json().then(function (data) { return { ok: res.ok, data: data }; }); })
      .then(function (result) {
        if (!result.ok) {
          indeterminateSpinActive = false;
          spinning = false;
          setWalletBalance(balanceBeforeStake);
          updateSpinEnabled();
          alert(result.data.error || 'Something went wrong.');
          return;
        }

        var data = result.data;
        var targetIndex = data.outcome.symbol === 'chance' || data.outcome.symbol === 'fate'
          ? ringIndexForBonus(data.outcome.symbol)
          : (function () {
              var candidates = ringIndicesFor(data.outcome.symbol, data.outcome.tier);
              return candidates[Math.floor(Math.random() * candidates.length)];
            })();

        landOnTarget(targetIndex, function () {
          var winner = data.bets.find(function (b) { return b.status === 'won'; });
          spinResult = winner ? 'WIN' : 'LOSE';
          winAmount = winner ? parseFloat(winner.payout) : 0;
          outcomeSymbol = data.outcome.symbol;

          betCounts.fill(0); // bets are per-round — clear them once this round's result is settled
          draw();

          if (winner) {
            startFlash();
            playWinSound();
            launchConfetti();
          }

          setWalletBalance(data.walletBalance);
          updateSpinEnabled();
          loadState();
        });
      })
      .catch(function () {
        indeterminateSpinActive = false;
        spinning = false;
        setWalletBalance(balanceBeforeStake);
        updateSpinEnabled();
        alert('Network error — please try again.');
      });
  });

  img.onload = function () { resizeCanvas(); draw(); };
  cabinetImg.onload = function () { resizeCanvas(); draw(); };
  window.addEventListener('resize', resizeCanvas);
  resizeCanvas();
  updateSpinEnabled();
  loadState();
})();
</script>
{% endblock %}