{#
    Spin & Win — floating prize wheel for the Live Racing pages. A launcher
    sits above the wallet bar; the popup has no backdrop so the race page
    stays usable. The server decides every spin (/play/spin-win/spin); the
    wheel only animates to the returned segment.
#}
{% set swSegments = spin_win_segments(setting) %}
{% set swTopMultiplier = max(swSegments|map(s => s.multiplier)) %}
<style>
  .sw-launcher {
    position: fixed;
    right: 22px;
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    width: 64px;
    height: 64px;
    z-index: 1060;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .sw-launcher.sw-hidden { opacity: 0; pointer-events: none; transform: scale(0.6); }

  .sw-open-btn {
    position: absolute;
    inset: 0;
    padding: 0;
    border: none;
    background: none;
    cursor: pointer;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    animation: sw-wiggle 4s ease-in-out infinite;
    transition: transform 0.2s ease;
  }
  .sw-open-btn::before,
  .sw-open-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid #ffd54f;
    animation: sw-ring 2s ease-out infinite;
    pointer-events: none;
  }
  .sw-open-btn::after { animation-delay: 1s; }

  .sw-launch-wheel {
    position: absolute;
    inset: 0;
    box-sizing: border-box;
    border-radius: 50%;
    background: conic-gradient(
      #111827 0 40deg, #14b8a6 40deg 80deg, #8b5cf6 80deg 120deg,
      #0ea5e9 120deg 160deg, #14b8a6 160deg 200deg, #f97316 200deg 240deg,
      #111827 240deg 280deg, #8b5cf6 280deg 320deg, #e11d48 320deg 360deg
    );
    border: 4px solid #ffd54f;
    box-shadow: 0 0 0 2px #fff7d1, 0 6px 22px rgba(255, 152, 0, 0.65), inset 0 0 12px rgba(0, 0, 0, 0.35);
    animation: sw-idle-spin 8s linear infinite;
  }
  .sw-launch-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6c9, #ffb300);
    border: 2px solid #2a2560;
  }
  .sw-launch-pointer {
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    border-top: 14px solid #ff3d57;
    filter: drop-shadow(0 2px 2px rgba(0,0,0,0.5));
    z-index: 2;
  }
  .sw-launch-label {
    position: absolute;
    left: 50%;
    bottom: -14px;
    transform: translateX(-50%);
    white-space: nowrap;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    background: linear-gradient(135deg, #fff176, #ffb300);
    border: 2px solid #fff7d1;
    border-radius: 999px;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.4);
    z-index: 3;
  }
  .sw-open-btn:hover { animation: none; transform: scale(1.1); }
  .sw-open-btn:hover .sw-launch-wheel { animation-duration: 0.9s; }
  .sw-open-btn:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 50%; }

  .sw-hide-btn {
    position: absolute;
    top: -22px;
    left: -22px;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 2px solid #fff7d1;
    border-radius: 50%;
    background: #1e1b4b;
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    z-index: 4;
    opacity: 0.9;
    transition: transform 0.15s ease, background 0.15s ease;
  }
  .sw-hide-btn:hover { transform: scale(1.15); background: #e11d48; opacity: 1; }

  .sw-tab {
    position: fixed;
    right: 0;
    bottom: calc(110px + env(safe-area-inset-bottom, 0px));
    width: 30px;
    height: 44px;
    padding: 0 0 0 4px;
    border: 2px solid #fff7d1;
    border-right: none;
    border-radius: 12px 0 0 12px;
    background: linear-gradient(135deg, #ffd54f, #ff9800);
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    box-shadow: -3px 3px 10px rgba(0, 0, 0, 0.4);
    z-index: 1060;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.25s ease, opacity 0.25s ease, width 0.15s ease;
  }
  .sw-tab.sw-tab-show { transform: none; opacity: 1; pointer-events: auto; }
  .sw-tab:hover { width: 38px; }

  @keyframes sw-idle-spin { to { transform: rotate(360deg); } }
  @keyframes sw-ring { from { transform: scale(1); opacity: 0.8; } to { transform: scale(1.7); opacity: 0; } }
  @keyframes sw-wiggle {
    0%, 78%, 100% { transform: rotate(0) scale(1); }
    82% { transform: rotate(-12deg) scale(1.1); }
    86% { transform: rotate(10deg) scale(1.1); }
    90% { transform: rotate(-6deg) scale(1.05); }
    94% { transform: rotate(3deg) scale(1); }
  }
  @media (prefers-reduced-motion: reduce) {
    .sw-open-btn, .sw-open-btn::before, .sw-open-btn::after,
    .sw-launch-wheel { animation: none; }
  }

  .sw-overlay {
    position: fixed;
    right: 16px;
    bottom: calc(76px + env(safe-area-inset-bottom, 0px));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s ease;
    z-index: 1061;
  }
  .sw-overlay.sw-show { opacity: 1; visibility: visible; pointer-events: auto; }

  .sw-modal {
    position: relative;
    width: 240px;
    max-width: calc(100vw - 32px);
    box-sizing: border-box;
    background: linear-gradient(180deg, #2a2560, #16133a);
    border: 2px solid rgba(255, 213, 79, 0.45);
    border-radius: 16px;
    padding: 14px 14px 12px;
    text-align: center;
    color: #fff;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55);
    transform: translateY(16px) scale(0.9);
    transform-origin: bottom right;
    transition: transform 0.25s cubic-bezier(.2,1.4,.4,1);
    overflow: hidden;
  }
  .sw-overlay.sw-show .sw-modal { transform: none; }

  .sw-close {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
  }
  .sw-close:hover { background: rgba(255, 255, 255, 0.25); }

  .sw-title { margin: 0 0 2px; font-size: 16px; font-weight: 800; color: #ffd54f; }
  .sw-subtitle { margin: 0 0 8px; color: #c7c3f0; font-size: 11px; }

  .sw-balance {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 14px;
    padding: 3px 10px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 213, 79, 0.35);
    border-radius: 999px;
    font-size: 12px;
    color: #c7c3f0;
  }
  .sw-balance strong {
    color: #ffd54f;
    font-size: 14px;
    transition: transform 0.2s ease;
    display: inline-block;
  }
  .sw-balance strong.sw-bump { transform: scale(1.25); }

  .sw-wheel-wrap {
    position: relative;
    width: 180px;
    max-width: 100%;
    aspect-ratio: 1;
    margin: 0 auto;
  }
  .sw-wheel-wrap canvas {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0 4px #ffd54f, 0 0 16px rgba(255, 213, 79, 0.45);
    will-change: transform;
  }
  .sw-pointer {
    position: absolute;
    top: -9px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 20px solid #ff3d57;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.5));
    z-index: 2;
  }
  .sw-hub {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff6c9, #ffb300);
    border: 3px solid #2a2560;
    box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  }

  .sw-spin-btn {
    margin-top: 14px;
    width: 100%;
    padding: 9px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: 0.5px;
    color: #1a1a1a;
    background: linear-gradient(135deg, #ffd54f, #ff9800);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: filter 0.15s ease, transform 0.1s ease;
  }
  .sw-spin-btn:hover:not(:disabled) { filter: brightness(1.1); }
  .sw-spin-btn:active:not(:disabled) { transform: scale(0.98); }
  .sw-spin-btn:disabled { opacity: 0.5; cursor: not-allowed; }

  .sw-result {
    min-height: 18px;
    margin-top: 8px;
    font-size: 13px;
    font-weight: 700;
    color: #7CFFB2;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
  .sw-result.sw-visible { opacity: 1; transform: translateY(0); }
  .sw-result.sw-lose { color: #ffb4c0; }

  .sw-confetti {
    position: absolute;
    top: -10px;
    width: 5px;
    height: 9px;
    pointer-events: none;
    animation: sw-fall linear forwards;
  }
  @keyframes sw-fall { to { transform: translateY(420px) rotate(720deg); opacity: 0; } }
</style>

<div class="sw-launcher" id="swLauncher" data-testid="spin-win-launcher">
  <button type="button" class="sw-open-btn" id="swOpenBtn" aria-label="Open Spin &amp; Win" data-testid="spin-win-open">
    <span class="sw-launch-wheel"><span class="sw-launch-hub"></span></span>
    <span class="sw-launch-pointer"></span>
    <span class="sw-launch-label">SPIN &amp; WIN</span>
  </button>
  <button type="button" class="sw-hide-btn" id="swHideBtn" aria-label="Hide Spin &amp; Win" title="Hide" data-testid="spin-win-hide">&times;</button>
</div>
<button type="button" class="sw-tab" id="swTab" aria-label="Show Spin &amp; Win" title="Show Spin &amp; Win" data-testid="spin-win-tab">🎡</button>

<div class="sw-overlay" id="swOverlay" aria-hidden="true" data-testid="spin-win-popup">
  <div class="sw-modal" role="dialog" aria-labelledby="swTitle">
    <button type="button" class="sw-close" id="swClose" aria-label="Close" data-testid="spin-win-close">&times;</button>
    <h2 class="sw-title" id="swTitle">Spin &amp; Win!</h2>
    <p class="sw-subtitle">₱{{ setting.swSpinCost|number_format(2) }} per spin · win up to x{{ swTopMultiplier }}</p>

    <div class="sw-balance">Balance: <strong id="swBalance" data-testid="spin-win-balance">₱{{ app.user.walletBalance|number_format(2) }}</strong></div>

    <div class="sw-wheel-wrap">
      <div class="sw-pointer"></div>
      <canvas id="swCanvas" width="640" height="640"></canvas>
      <div class="sw-hub"></div>
    </div>

    <button type="button" class="sw-spin-btn" id="swSpinBtn" data-testid="spin-win-spin">SPIN — ₱{{ setting.swSpinCost|number_format(2) }}</button>
    <div class="sw-result" id="swResult" aria-live="polite" data-testid="spin-win-result"></div>
  </div>
</div>

<script>
(function () {
  const CONFIG = {
    spinUrl: {{ path('app_play_spin_win_spin')|json_encode|raw }},
    csrfToken: {{ csrf_token('spin_win_spin')|json_encode|raw }},
    spinCost: {{ setting.swSpinCost|number_format(2, '.', '')|json_encode|raw }} * 1,
    segments: {{ swSegments|json_encode|raw }},
    spinDurationMs: 5000,
    extraRotations: 6,
    soundOn: true,
  };

  const overlay   = document.getElementById('swOverlay');
  const openBtn   = document.getElementById('swOpenBtn');
  const closeBtn  = document.getElementById('swClose');
  const spinBtn   = document.getElementById('swSpinBtn');
  const resultEl  = document.getElementById('swResult');
  const balanceEl = document.getElementById('swBalance');
  const modal     = overlay.querySelector('.sw-modal');
  const canvas    = document.getElementById('swCanvas');
  const ctx       = canvas.getContext('2d');

  const segments = CONFIG.segments;
  const n = segments.length;
  const arc = (2 * Math.PI) / n;
  let balance = {{ app.user.walletBalance|number_format(2, '.', '')|json_encode|raw }} * 1;
  let currentRotation = 0;
  let spinning = false;

  const money = v => '₱' + Number(v).toLocaleString('en-PH', { minimumFractionDigits: 2, maximumFractionDigits: 2 });

  function drawWheel() {
    const size = canvas.width;
    const r = size / 2;
    ctx.clearRect(0, 0, size, size);

    segments.forEach((s, i) => {
      const start = i * arc - Math.PI / 2;
      const end = start + arc;

      ctx.beginPath();
      ctx.moveTo(r, r);
      ctx.arc(r, r, r, start, end);
      ctx.closePath();
      ctx.fillStyle = s.color;
      ctx.fill();
      ctx.lineWidth = 4;
      ctx.strokeStyle = 'rgba(255,255,255,0.35)';
      ctx.stroke();

      ctx.save();
      ctx.translate(r, r);
      ctx.rotate(start + arc / 2);
      ctx.textAlign = 'right';
      ctx.textBaseline = 'middle';
      ctx.fillStyle = '#fff';
      // Long words (BANKRUPT, TRY AGAIN) get a smaller font than the x-labels.
      ctx.font = `bold ${Math.round(size / (s.label.length > 4 ? 19 : 11))}px system-ui, sans-serif`;
      ctx.shadowColor = 'rgba(0,0,0,0.5)';
      ctx.shadowBlur = 6;
      ctx.fillText(s.label, r - 30, 0);
      ctx.restore();
    });

    for (let i = 0; i < n * 2; i++) {
      const a = (i * Math.PI) / n;
      ctx.beginPath();
      ctx.arc(r + Math.cos(a) * (r - 12), r + Math.sin(a) * (r - 12), 6, 0, 2 * Math.PI);
      ctx.fillStyle = '#fff7d1';
      ctx.fill();
    }
  }

  let audioCtx = null;
  function tick() {
    if (!CONFIG.soundOn) return;
    try {
      audioCtx = audioCtx || new (window.AudioContext || window.webkitAudioContext)();
      const osc = audioCtx.createOscillator();
      const gain = audioCtx.createGain();
      osc.type = 'triangle';
      osc.frequency.value = 900;
      gain.gain.setValueAtTime(0.08, audioCtx.currentTime);
      gain.gain.exponentialRampToValueAtTime(0.001, audioCtx.currentTime + 0.05);
      osc.connect(gain).connect(audioCtx.destination);
      osc.start();
      osc.stop(audioCtx.currentTime + 0.05);
    } catch (e) { /* audio not available */ }
  }

  // Keep the page's wallet bar in step with the popup.
  function syncWalletBar(value) {
    const bar = document.querySelector('[data-controller="balance-counter"]');
    if (bar) bar.dataset.balanceCounterAmountValue = value;
  }

  function renderBalance(value, bump) {
    balanceEl.textContent = money(value);
    if (bump) {
      balanceEl.classList.add('sw-bump');
      setTimeout(() => balanceEl.classList.remove('sw-bump'), 200);
    }
    updateSpinState();
  }

  function updateSpinState() {
    const enough = balance >= CONFIG.spinCost;
    spinBtn.disabled = spinning || !enough;
    spinBtn.textContent = enough ? `SPIN — ${money(CONFIG.spinCost)}` : 'NOT ENOUGH BALANCE';
  }

  async function requestSpin() {
    const body = new FormData();
    body.set('_token', CONFIG.csrfToken);
    const res = await fetch(CONFIG.spinUrl, { method: 'POST', body, credentials: 'same-origin', headers: { 'X-Requested-With': 'XMLHttpRequest' } });
    let data = {};
    try { data = await res.json(); } catch (e) { /* non-JSON error page */ }
    if (!res.ok || !data.success) throw new Error(data.error || 'Spin failed. Please try again.');
    return { index: data.segmentIndex, outcome: data.outcome, payout: parseFloat(data.payout), balance: parseFloat(data.walletBalance) };
  }

  const easeOutQuart = t => 1 - Math.pow(1 - t, 4);

  async function spin() {
    if (spinning || balance < CONFIG.spinCost) return;
    spinning = true;
    updateSpinState();
    resultEl.classList.remove('sw-visible', 'sw-lose');

    let result;
    try {
      result = await requestSpin();
    } catch (err) {
      spinning = false;
      resultEl.textContent = '⚠️ ' + err.message;
      resultEl.classList.add('sw-visible', 'sw-lose');
      updateSpinState();
      return;
    }

    // Show the cost leaving the wallet right away; the prize lands when the wheel stops.
    balance = balance - CONFIG.spinCost;
    renderBalance(balance, true);
    syncWalletBar(balance);

    animateTo(result.index, () => {
      balance = result.balance;
      renderBalance(balance, true);
      syncWalletBar(balance);
      finish(result, segments[result.index]);
    });
  }

  function animateTo(index, done) {
    const segDeg = 360 / n;
    const jitter = (Math.random() - 0.5) * segDeg * 0.7;
    const segCenter = index * segDeg + segDeg / 2 + jitter;

    const targetMod = (360 - segCenter) % 360;
    const currentMod = ((currentRotation % 360) + 360) % 360;
    let delta = targetMod - currentMod;
    if (delta < 0) delta += 360;

    const startRot = currentRotation;
    const totalRot = CONFIG.extraRotations * 360 + delta;
    const startTime = performance.now();
    let lastSeg = Math.floor(startRot / segDeg);

    function frame(now) {
      const t = Math.min((now - startTime) / CONFIG.spinDurationMs, 1);
      currentRotation = startRot + totalRot * easeOutQuart(t);
      canvas.style.transform = `rotate(${currentRotation}deg)`;

      const seg = Math.floor(currentRotation / segDeg);
      if (seg !== lastSeg) { tick(); lastSeg = seg; }

      if (t < 1) requestAnimationFrame(frame);
      else done();
    }
    requestAnimationFrame(frame);
  }

  function finish(result, segment) {
    spinning = false;
    if (result.outcome === 'lost') {
      resultEl.textContent = '💸 Bankrupt! Spin again';
      resultEl.classList.add('sw-lose');
    } else if (result.outcome === 'try_again') {
      resultEl.textContent = '↩️ Try again — bet returned';
    } else {
      resultEl.textContent = `🎉 You won ${money(result.payout)} (${segment.label})!`;
      confetti(segment.multiplier >= 10 ? 120 : 50);
    }
    resultEl.classList.add('sw-visible');
    updateSpinState();
  }

  function confetti(count) {
    const colors = ['#ffd54f', '#ff5c8a', '#22c1a4', '#38bdf8', '#a855f7'];
    for (let i = 0; i < count; i++) {
      const c = document.createElement('div');
      c.className = 'sw-confetti';
      c.style.left = Math.random() * 100 + '%';
      c.style.background = colors[i % colors.length];
      c.style.animationDuration = 1.5 + Math.random() * 1.5 + 's';
      c.style.animationDelay = Math.random() * 0.3 + 's';
      modal.appendChild(c);
      setTimeout(() => c.remove(), 3500);
    }
  }

  function openPopup() {
    // Pick up any balance change from a race bet placed since the page loaded.
    const bar = document.querySelector('[data-controller="balance-counter"]');
    if (!spinning && bar && bar.dataset.balanceCounterAmountValue) {
      balance = parseFloat(bar.dataset.balanceCounterAmountValue);
    }
    overlay.classList.add('sw-show');
    overlay.setAttribute('aria-hidden', 'false');
    renderLauncher();
    renderBalance(balance);
  }
  function closePopup() {
    if (spinning) return;
    overlay.classList.remove('sw-show');
    overlay.setAttribute('aria-hidden', 'true');
    renderLauncher();
  }

  const launcher = document.getElementById('swLauncher');
  const hideBtn  = document.getElementById('swHideBtn');
  const tab      = document.getElementById('swTab');
  const HIDE_KEY = 'sw_launcher_hidden';

  let launcherHidden = false;
  try { launcherHidden = localStorage.getItem(HIDE_KEY) === '1'; } catch (e) {}

  function renderLauncher() {
    const popupOpen = overlay.classList.contains('sw-show');
    launcher.classList.toggle('sw-hidden', popupOpen || launcherHidden);
    tab.classList.toggle('sw-tab-show', !popupOpen && launcherHidden);
  }
  function setLauncherHidden(hidden) {
    launcherHidden = hidden;
    try { localStorage.setItem(HIDE_KEY, hidden ? '1' : '0'); } catch (e) {}
    renderLauncher();
  }

  hideBtn.addEventListener('click', () => setLauncherHidden(true));
  tab.addEventListener('click', () => setLauncherHidden(false));
  openBtn.addEventListener('click', openPopup);
  closeBtn.addEventListener('click', closePopup);
  spinBtn.addEventListener('click', spin);

  drawWheel();
  renderBalance(balance);
  renderLauncher();
})();
</script>