{% extends "base.html" %}
{% block title %}Live Race{% endblock %}
{% block body_class %}race-page{% endblock %}

{% block head %}
<style>
  .race-wrap { max-width: 960px; margin: 0 auto; }
  .race-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
  .race-head h1 { font-family: 'Sora', sans-serif; margin: 0; }
  .race-status { font-weight: 600; opacity: 0.9; }
  .race-status .pill { padding: 0.18rem 0.7rem; border-radius: 999px; font-size: 0.82rem; }
  .pill-betting { background: #1f6feb33; color: #79c0ff; }
  .pill-racing  { background: #2ea04333; color: #7ee787; }
  .pill-finished{ background: #d2992233; color: #f0c674; }
  .pill-idle    { background: #6e768166; color: #c9d1d9; }

  /* Commentary feed — newest line, fades on change. */
  .race-commentary {
    margin: 0.9rem 0 0.4rem; min-height: 1.9rem; display: flex; align-items: center;
    gap: 0.5rem; padding: 0.5rem 0.85rem; border-radius: 10px;
    background: linear-gradient(90deg, #161b22, #0d1117);
    border: 1px solid #232a33; font-size: 1.02rem; font-weight: 500;
  }
  .race-commentary .mic { opacity: 0.7; }
  .race-commentary .txt { transition: opacity 0.25s ease; }
  .race-commentary .txt.swap { opacity: 0; }

  .race-track { margin: 0.6rem 0 1rem; display: flex; flex-direction: column; gap: 0.5rem; }
  .lane {
    position: relative; display: grid; grid-template-columns: 2.2rem 12.5rem 1fr 6rem;
    align-items: center; gap: 0.7rem; padding: 0.4rem 0.55rem; border-radius: 11px;
    background: #11141a; border: 1px solid #232a33; transition: border-color 0.3s, box-shadow 0.3s;
  }
  .lane.win { border-color: #f0c674; box-shadow: 0 0 0 1px #f0c67455, 0 0 22px #f0c67433; }
  .lane-pos {
    font-weight: 800; text-align: center; font-variant-numeric: tabular-nums;
    color: #c9d1d9; font-size: 0.95rem;
  }
  .lane-pos.p1 { color: #f0c674; }
  .lane-label { display: flex; flex-direction: column; line-height: 1.15; min-width: 0; }
  .lane-color { display: flex; align-items: center; gap: 0.4rem; font-weight: 700; font-size: 0.92rem; }
  .lane-swatch { width: 0.8rem; height: 0.8rem; border-radius: 50%; flex: 0 0 auto; box-shadow: 0 0 0 1px #0006 inset; }
  .lane-driver { font-size: 0.78rem; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lane-meta { width: 6rem; text-align: right; font-variant-numeric: tabular-nums; overflow: hidden; }
  .lane-odds { font-weight: 700; font-size: 0.9rem; white-space: nowrap; }
  .lane-amt { font-size: 0.74rem; opacity: 0.72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* Track rail with start/finish color markers and a moving car. */
  .lane-rail {
    position: relative; height: 30px; border-radius: 8px;
    background: repeating-linear-gradient(90deg, #0c0e12 0 18px, #0e1117 18px 36px);
    border: 1px solid #1c222b; overflow: hidden;
  }
  .rail-cap { position: absolute; top: 0; bottom: 0; width: 5px; opacity: 0.85; }
  .rail-cap.start { left: 0; border-radius: 8px 0 0 8px; }
  .rail-cap.finish {
    right: 0; border-radius: 0 8px 8px 0;
    background-image: repeating-linear-gradient(45deg, #fff 0 4px, #000 4px 8px) !important;
    opacity: 0.55; width: 8px;
  }
  .car {
    position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%);
    width: 30px; height: 15px; border-radius: 5px 7px 4px 4px;
    box-shadow: 0 1px 3px #000a, inset 0 -3px 4px #0004; will-change: left;
  }
  .car::before {  /* cabin */
    content: ''; position: absolute; left: 6px; top: -4px; width: 12px; height: 7px;
    border-radius: 4px 4px 0 0; background: #ffffffcc;
  }
  .car::after {   /* wheels */
    content: ''; position: absolute; left: 3px; right: 3px; bottom: -3px; height: 5px;
    background:
      radial-gradient(circle at 5px 50%, #111 0 3px, transparent 3px),
      radial-gradient(circle at calc(100% - 5px) 50%, #111 0 3px, transparent 3px);
  }

  .race-side { display: flex; gap: 1.6rem; flex-wrap: wrap; font-variant-numeric: tabular-nums; opacity: 0.92; }
  .race-side .stat b { font-size: 1.12rem; }
  .race-winner { margin: 1rem 0; padding: 0.8rem 1.05rem; border-radius: 11px;
    background: #d2992218; border: 1px solid #f0c67455; }
  .race-winner h2 { margin: 0 0 0.4rem; font-family: 'Sora', sans-serif; }
  .race-payouts { margin: 0.3rem 0 0; padding-left: 1.15rem; }
  .race-payouts li { margin: 0.1rem 0; }
  .race-idle { text-align: center; opacity: 0.7; padding: 3rem 1rem; }

  @media (max-width: 640px) {
    .lane { grid-template-columns: 1.7rem 1fr 5rem; }
    .lane-meta { width: 5rem; }
    .lane-rail { grid-column: 1 / -1; order: 5; }
    .lane-driver { white-space: normal; }
  }
</style>
{% endblock %}

{% block content %}
<div class="race-wrap">
  <div class="race-head">
    <h1>🏁 Live Race</h1>
    <div class="race-status" id="race-status"><span class="pill pill-idle">Connecting…</span></div>
  </div>

  <div class="race-commentary" id="race-commentary" hidden>
    <span class="mic">📣</span><span class="txt" id="commentary-txt"></span>
  </div>

  <div id="race-body">
    <div class="race-idle" id="race-idle">Waiting for the next race…</div>
    <div class="race-track" id="race-track" hidden></div>
    <div class="race-side" id="race-side" hidden></div>
    <div class="race-winner" id="race-winner" hidden></div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
  const COLORS = {
    Blue: '#3b82f6', Red: '#ef4444', Green: '#22c55e',
    Yellow: '#eab308', Purple: '#a855f7', Orange: '#f97316',
    Brown: '#b45309', White: '#e5e7eb',
  };
  const colorOf = (c) => COLORS[c] || '#9aa4af';

  const statusEl = document.getElementById('race-status');
  const idleEl   = document.getElementById('race-idle');
  const trackEl  = document.getElementById('race-track');
  const sideEl   = document.getElementById('race-side');
  const winnerEl = document.getElementById('race-winner');
  const commEl   = document.getElementById('race-commentary');
  const commTxt  = document.getElementById('commentary-txt');

  const lanes = new Map();   // color -> { row, car, pos, amt }
  let laneSig = '';
  let raceId = null;

  // playback state
  let timeline = null;       // {frame_dt, duration, frames, commentary, elapsed}
  let currentColors = [];
  let playbackStart = 0;     // performance.now() baseline
  let rafId = 0;
  let commentaryShown = -1;

  function esc(s) {
    return String(s).replace(/[&<>"']/g, c => (
      { '&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;',"'":'&#39;' }[c]
    ));
  }
  function setStatus(kind, text) {
    statusEl.innerHTML = '<span class="pill pill-' + kind + '">' + esc(text) + '</span>';
  }
  function setCommentary(text) {
    if (!text) return;
    commEl.hidden = false;
    if (commTxt.textContent === text) return;
    commTxt.classList.add('swap');
    setTimeout(() => { commTxt.textContent = text; commTxt.classList.remove('swap'); }, 130);
  }

  function buildLanes(racers) {
    trackEl.innerHTML = '';
    lanes.clear();
    for (const r of racers) {
      const col = colorOf(r.color);
      const row = document.createElement('div');
      row.className = 'lane';
      row.innerHTML =
        '<div class="lane-pos"></div>' +
        '<div class="lane-label">' +
          '<span class="lane-color"><span class="lane-swatch" style="background:' + col + '"></span>' + esc(r.color) + '</span>' +
          '<span class="lane-driver">' + esc(r.name || '') + '</span>' +
        '</div>' +
        '<div class="lane-rail">' +
          '<span class="rail-cap start" style="background:' + col + '"></span>' +
          '<span class="rail-cap finish"></span>' +
          '<span class="car" style="background:' + col + '"></span>' +
        '</div>' +
        '<div class="lane-meta">' +
          '<div class="lane-odds">' + esc(r.odds || '') + '</div>' +
          '<div class="lane-amt"></div>' +
        '</div>';
      trackEl.appendChild(row);
      lanes.set(r.color, {
        row,
        car: row.querySelector('.car'),
        pos: row.querySelector('.lane-pos'),
        amt: row.querySelector('.lane-amt'),
      });
    }
  }

  // Place a car along its rail (pct 0..100 → left 3%..97% so it stays on track).
  function placeCar(color, pct) {
    const lane = lanes.get(color);
    if (!lane) return;
    const left = 3 + Math.max(0, Math.min(100, pct)) * 0.94;
    lane.car.style.left = left + '%';
  }

  function updateRanking(colors, values) {
    const order = colors
      .map((c, i) => [c, values[i]])
      .sort((a, b) => b[1] - a[1]);
    order.forEach(([c], idx) => {
      const lane = lanes.get(c);
      if (!lane) return;
      lane.pos.textContent = '#' + (idx + 1);
      lane.pos.classList.toggle('p1', idx === 0);
    });
  }

  function applyBets(frame) {
    const bets = frame.bets_by_color || {};
    for (const [color, lane] of lanes) {
      const b = bets[color];
      lane.amt.textContent = b ? ('💰 ' + b.amount.toLocaleString()) : '';
    }
  }

  function sideStats(frame) {
    const sym = frame.symbol || '';
    sideEl.hidden = false;
    sideEl.innerHTML =
      '<div class="stat">Pool <b>' + (frame.pool || 0).toLocaleString() + ' ' + esc(sym) + '</b></div>' +
      '<div class="stat">Bettors <b>' + (frame.bettor_count || 0) + '</b></div>' +
      (frame.phase === 'betting'
        ? '<div class="stat">Min bet <b>' + (frame.min_bet || 0).toLocaleString() + ' ' + esc(sym) + '</b></div>'
        : '');
  }

  // ── Timeline playback (smooth, rAF + interpolation) ────────
  function posAt(t) {
    const { frame_dt, frames } = timeline;
    const pos = t / frame_dt;
    let i = Math.floor(pos);
    if (i >= frames.length - 1) return frames[frames.length - 1].slice();
    const frac = pos - i;
    const a = frames[i], b = frames[i + 1];
    return a.map((v, j) => v + (b[j] - v) * frac);
  }

  function showCommentaryUpTo(t) {
    if (!timeline.commentary) return;
    let idx = commentaryShown;
    for (let k = commentaryShown + 1; k < timeline.commentary.length; k++) {
      if (timeline.commentary[k].t <= t) idx = k; else break;
    }
    if (idx !== commentaryShown) {
      commentaryShown = idx;
      setCommentary(timeline.commentary[idx].text);
    }
  }

  function frameTick(now) {
    if (!timeline) return;
    let t = (now - playbackStart) / 1000;
    if (t < 0) t = 0;
    const done = t >= timeline.duration;
    if (done) t = timeline.duration;

    const row = posAt(t);
    currentColors.forEach((c, j) => placeCar(c, row[j]));
    updateRanking(currentColors, row);
    showCommentaryUpTo(t);

    if (!done) rafId = requestAnimationFrame(frameTick);
  }

  function startPlayback(frame) {
    timeline = frame.timeline;
    currentColors = frame.racers.map(r => r.color);
    commentaryShown = -1;
    const elapsed = Math.max(0, timeline.elapsed || 0);
    playbackStart = performance.now() - elapsed * 1000;
    cancelAnimationFrame(rafId);
    rafId = requestAnimationFrame(frameTick);
  }

  function resync(frame) {
    // Gently correct drift (e.g. after a backgrounded tab) without jumping.
    const elapsed = Math.max(0, frame.timeline.elapsed || 0);
    const localT = (performance.now() - playbackStart) / 1000;
    if (Math.abs(localT - elapsed) > 1.2) {
      playbackStart = performance.now() - elapsed * 1000;
    }
    timeline.commentary = frame.timeline.commentary || timeline.commentary;
  }

  // ── Frame router ───────────────────────────────────────────
  function render(frame) {
    idleEl.hidden = true;
    trackEl.hidden = false;

    const sig = frame.racers.map(r => r.color).join('|');
    const isNewRace = frame.race_id !== raceId || sig !== laneSig;
    if (isNewRace) {
      buildLanes(frame.racers);
      laneSig = sig;
      raceId = frame.race_id;
      timeline = null;
      cancelAnimationFrame(rafId);
    }
    applyBets(frame);
    sideStats(frame);

    if (frame.phase === 'betting') {
      cancelAnimationFrame(rafId); timeline = null;
      frame.racers.forEach(r => placeCar(r.color, 0));
      updateRanking(frame.racers.map(r => r.color), frame.racers.map(() => 0));
      winnerEl.hidden = true;
      setStatus('betting', 'Betting open — ' + (frame.betting_closes_in || 0) + 's left');
      setCommentary('Place your bets! ' + frame.racers.length + ' cars on the grid.');
    } else if (frame.phase === 'racing') {
      winnerEl.hidden = true;
      setStatus('racing', 'They\u2019re off!');
      if (frame.timeline) {
        const hasFrames = Array.isArray(frame.timeline.frames) && frame.timeline.frames.length;
        if (!timeline && hasFrames) startPlayback(frame);
        else if (timeline) resync(frame);
        // else: a light sync arrived before the full timeline — wait for it.
      }
    } else if (frame.phase === 'finished') {
      cancelAnimationFrame(rafId); timeline = null;
      showFinished(frame);
    }
  }

  function showFinished(frame) {
    setStatus('finished', 'Finished');
    const winnerColor = frame.winner && frame.winner.color;
    frame.racers.forEach(r => placeCar(r.color, r.pct || 0));
    updateRanking(frame.racers.map(r => r.color), frame.racers.map(r => r.pct || 0));
    for (const [c, lane] of lanes) lane.row.classList.toggle('win', c === winnerColor);

    const sym = frame.symbol || '';
    if (frame.winner) {
      const w = frame.winner;
      const driver = w.name ? (' — ' + esc(w.name)) : '';
      const payouts = (frame.payouts || []).slice(0, 6)
        .map(p => '<li>' + esc(p.username) + ' <b>+' + (p.net || 0).toLocaleString() + ' ' + esc(sym) + '</b></li>')
        .join('');
      winnerEl.hidden = false;
      winnerEl.innerHTML =
        '<h2><span class="lane-swatch" style="display:inline-block;vertical-align:middle;background:' + colorOf(w.color) + '"></span> ' +
          esc(w.color) + ' wins!' + driver + '</h2>' +
        (payouts ? '<ul class="race-payouts">' + payouts + '</ul>' : '<div>No winning bets this race.</div>');
      setCommentary('🏆 ' + esc(w.color) + (w.name ? ' (' + esc(w.name) + ')' : '') + ' takes the checkered flag!');
    }
  }

  function showIdle() {
    laneSig = ''; raceId = null; timeline = null;
    cancelAnimationFrame(rafId);
    lanes.clear();
    trackEl.hidden = true; sideEl.hidden = true; winnerEl.hidden = true;
    commEl.hidden = true;
    idleEl.hidden = false;
    setStatus('idle', 'No race running');
  }

  // ── WebSocket with auto-reconnect ──────────────────────────
  let ws = null, retry = 0, pingTimer = null;
  function connect() {
    const proto = location.protocol === 'https:' ? 'wss' : 'ws';
    ws = new WebSocket(proto + '://' + location.host + '/ws/race');
    ws.onopen = () => {
      retry = 0; setStatus('idle', 'Connected');
      clearInterval(pingTimer);
      pingTimer = setInterval(() => { try { ws.send(JSON.stringify({ type: 'ping' })); } catch (e) {} }, 25000);
    };
    ws.onmessage = (ev) => {
      let m; try { m = JSON.parse(ev.data); } catch (e) { return; }
      if (m.type === 'race_frame') render(m.data);
      else if (m.type === 'race_clear') showIdle();
    };
    ws.onclose = () => {
      clearInterval(pingTimer);
      setStatus('idle', 'Reconnecting…');
      retry = Math.min(retry + 1, 6);
      setTimeout(connect, 500 * retry);
    };
    ws.onerror = () => { try { ws.close(); } catch (e) {} };
  }

  // Re-sync playback when returning to a backgrounded tab.
  document.addEventListener('visibilitychange', () => {
    if (!document.hidden && timeline) {
      cancelAnimationFrame(rafId);
      rafId = requestAnimationFrame(frameTick);
    }
  });

  showIdle();
  connect();
})();
</script>
{% endblock %}