{% extends "base.html" %}
{% block title %}GameDay Simulation — {{ scenario_name }}{% endblock %}
{% block extra_css %}
<style>
:root{--sim-orange:#FF6B35;--sim-gold:#FFB800;--sim-green:#3fb950;--sim-blue:#58a6ff;--sim-purple:#a78bfa;}
*{box-sizing:border-box;}

/* Top bar */
.sim-topbar{display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:#0d1117;border-bottom:2px solid var(--sim-orange);flex-wrap:wrap;}
.sim-scenario-name{font-size:1.1rem;font-weight:700;color:var(--sim-orange);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.sim-session-badge{font-size:.75rem;background:#21262d;color:#8b949e;padding:.25rem .6rem;border-radius:12px;font-family:monospace;letter-spacing:.08em;}
.sim-controls{display:flex;align-items:center;gap:.6rem;}
.sim-btn{background:#21262d;border:1px solid #30363d;color:#e6edf3;padding:.4rem .9rem;border-radius:6px;cursor:pointer;font-size:.85rem;transition:all .15s;}
.sim-btn:hover{border-color:var(--sim-orange);color:var(--sim-orange);}
.sim-btn.active{background:var(--sim-orange);border-color:var(--sim-orange);color:#fff;}
.sim-play-btn{background:var(--sim-green);border:none;color:#fff;width:38px;height:38px;border-radius:50%;cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;transition:opacity .15s;}
.sim-play-btn:hover{opacity:.85;}
.sim-play-btn.paused{background:#6e7681;}
.sim-phase-counter{font-size:.85rem;color:#8b949e;white-space:nowrap;}
.sim-speed-label{font-size:.75rem;color:#6e7681;}
.sim-loop-badge{font-size:.72rem;background:#1f2937;color:#a78bfa;padding:.2rem .5rem;border-radius:10px;border:1px solid #374151;}

/* Main layout */
.sim-main{display:grid;grid-template-columns:1fr 340px;gap:0;height:calc(100vh - 112px);}
@media(max-width:900px){.sim-main{grid-template-columns:1fr;height:auto;}}

/* Phase card */
.sim-phase-area{padding:1.5rem;overflow-y:auto;display:flex;flex-direction:column;gap:1rem;}
.sim-phase-card{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:1.5rem;animation:slideIn .35s ease;}
.sim-phase-card.entering{animation:slideIn .35s ease;}
@keyframes slideIn{from{opacity:0;transform:translateY(12px);}to{opacity:1;transform:translateY(0);}}
.sim-phase-num{font-size:.72rem;color:#6e7681;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.4rem;}
.sim-inject-type{display:inline-block;font-size:.72rem;padding:.2rem .55rem;border-radius:10px;font-weight:600;margin-bottom:.8rem;}
.type-coa{background:#1a2744;color:#58a6ff;}
.type-assessment{background:#1f2937;color:#a78bfa;}
.type-build{background:#1a2e1a;color:#3fb950;}
.type-briefing{background:#2d1b1a;color:#fca5a5;}
.type-custom{background:#21262d;color:#8b949e;}
.sim-inject-title{font-size:1.6rem;font-weight:800;color:#e6edf3;line-height:1.2;margin-bottom:1rem;}
.sim-inject-body{font-size:.9rem;color:#8b949e;line-height:1.6;}
.sim-inject-body strong{color:#e6edf3;}
.sim-at-minute{font-size:.78rem;color:#6e7681;margin-top:.8rem;}
.sim-ai-tools{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.8rem;}
.sim-tool-badge{font-size:.72rem;background:#21262d;color:#58a6ff;padding:.2rem .5rem;border-radius:8px;border:1px solid #30363d;}

/* Timer ring */
.sim-timer-wrap{display:flex;align-items:center;justify-content:center;padding:.5rem 0;}
.sim-timer-ring{position:relative;width:80px;height:80px;}
.sim-timer-ring svg{transform:rotate(-90deg);}
.sim-timer-ring .timer-bg{stroke:#21262d;fill:none;}
.sim-timer-ring .timer-fg{stroke:var(--sim-orange);fill:none;stroke-linecap:round;transition:stroke-dashoffset .9s linear;}
.sim-timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:1.1rem;font-weight:700;color:#e6edf3;}

/* Right panel */
.sim-sidebar{background:#0d1117;border-left:1px solid #21262d;overflow-y:auto;display:flex;flex-direction:column;}
.sim-sidebar-section{padding:1rem 1.2rem;border-bottom:1px solid #21262d;}
.sim-sidebar-title{font-size:.72rem;text-transform:uppercase;letter-spacing:.06em;color:#6e7681;margin-bottom:.8rem;}

/* Leaderboard rows */
.lb-row{display:flex;align-items:center;gap:.6rem;padding:.45rem 0;border-bottom:1px solid #161b22;}
.lb-row:last-child{border-bottom:none;}
.lb-rank{font-size:.8rem;font-weight:700;color:#6e7681;width:18px;text-align:center;flex-shrink:0;}
.lb-rank.gold{color:#FFB800;}
.lb-rank.silver{color:#94a3b8;}
.lb-rank.bronze{color:#c07840;}
.lb-name{font-size:.85rem;color:#e6edf3;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lb-score{font-size:.85rem;font-weight:700;color:var(--sim-green);flex-shrink:0;}
.lb-bar-wrap{width:100%;background:#21262d;border-radius:3px;height:3px;margin-top:.2rem;}
.lb-bar{height:3px;border-radius:3px;background:linear-gradient(90deg,var(--sim-green),var(--sim-blue));transition:width .5s ease;}
.lb-breakdown{font-size:.7rem;color:#6e7681;margin-top:.15rem;}

/* Team stats */
.team-stat-card{background:#161b22;border:1px solid #21262d;border-radius:8px;padding:.7rem .9rem;margin-bottom:.5rem;}
.team-stat-name{font-size:.82rem;font-weight:600;color:#e6edf3;margin-bottom:.35rem;}
.team-stat-row{display:flex;justify-content:space-between;font-size:.72rem;color:#6e7681;margin-top:.2rem;}
.team-stat-row span:last-child{color:#8b949e;}

/* Phase timeline strip */
.sim-timeline{background:#0d1117;border-top:1px solid #21262d;padding:.6rem 1.2rem;overflow-x:auto;display:flex;gap:.5rem;align-items:center;height:52px;flex-shrink:0;}
.phase-pill{flex-shrink:0;height:32px;padding:0 .9rem;border-radius:16px;border:1px solid #30363d;background:#161b22;color:#6e7681;font-size:.75rem;cursor:pointer;display:flex;align-items:center;gap:.4rem;white-space:nowrap;transition:all .2s;}
.phase-pill:hover{border-color:#58a6ff;color:#58a6ff;}
.phase-pill.done{border-color:#21262d;background:#0d1117;color:#30363d;}
.phase-pill.current{border-color:var(--sim-orange);background:rgba(255,107,53,.12);color:var(--sim-orange);font-weight:600;}
.phase-pill.upcoming{border-color:#30363d;color:#6e7681;}
.phase-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0;}
</style>
{% endblock %}
{% block content %}

<!-- Top bar -->
<div class="sim-topbar">
  <span class="sim-scenario-name">🎮 {{ scenario_name }}</span>
  <span class="sim-session-badge">{{ session.join_code }}</span>
  <div class="sim-controls">
    <span class="sim-loop-badge">🔁 Loop</span>
    <span class="sim-phase-counter" id="phase-counter">Phase — of —</span>
    <span class="sim-speed-label">Speed:</span>
    <button class="sim-btn" id="sp3" onclick="setSpeed(3000)">3s</button>
    <button class="sim-btn active" id="sp5" onclick="setSpeed(5000)">5s</button>
    <button class="sim-btn" id="sp10" onclick="setSpeed(10000)">10s</button>
    <button class="sim-btn" id="sp30" onclick="setSpeed(30000)">30s</button>
    <button class="sim-play-btn" id="play-btn" onclick="togglePlay()">⏸</button>
  </div>
</div>

<!-- Main grid -->
<div class="sim-main">

  <!-- Left: phase card + timer -->
  <div class="sim-phase-area">
    <div class="sim-timer-wrap">
      <div class="sim-timer-ring">
        <svg width="80" height="80" viewBox="0 0 80 80">
          <circle class="timer-bg" cx="40" cy="40" r="34" stroke-width="5"/>
          <circle class="timer-fg" id="timer-circle" cx="40" cy="40" r="34"
                  stroke-width="5"
                  stroke-dasharray="213.6"
                  stroke-dashoffset="0"/>
        </svg>
        <div class="sim-timer-text" id="timer-text">—</div>
      </div>
    </div>

    <div class="sim-phase-card" id="phase-card">
      <div class="sim-phase-num" id="phase-num">Loading…</div>
      <div id="inject-type-badge" class="sim-inject-type type-custom">—</div>
      <div class="sim-inject-title" id="inject-title">Loading scenario…</div>
      <div class="sim-inject-body" id="inject-body">Please wait while the simulation loads.</div>
      <div class="sim-at-minute" id="inject-minute"></div>
      <div class="sim-ai-tools" id="inject-tools"></div>
    </div>
  </div>

  <!-- Right: leaderboard + team stats -->
  <div class="sim-sidebar">
    <div class="sim-sidebar-section">
      <div class="sim-sidebar-title">📊 Leaderboard</div>
      <div id="lb-rows"><div style="color:#6e7681;font-size:.82rem;">Loading…</div></div>
    </div>
    <div class="sim-sidebar-section" style="flex:1;">
      <div class="sim-sidebar-title">👥 Team Stats</div>
      <div id="team-stats"><div style="color:#6e7681;font-size:.82rem;">Loading…</div></div>
    </div>
  </div>
</div>

<!-- Phase timeline strip -->
<div class="sim-timeline" id="phase-timeline">
  <span style="color:#6e7681;font-size:.8rem;">Loading phases…</span>
</div>

<script>
const SESSION_ID = {{ session.session_id }};

function renderMd(src) {
  if (!src) return '';
  // Escape HTML first
  let s = src.replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;');
  // Headings
  s = s.replace(/^### (.+)$/gm, '<h4 style="color:#e6edf3;margin:.8rem 0 .3rem;font-size:.95rem;">$1</h4>');
  s = s.replace(/^## (.+)$/gm,  '<h3 style="color:#e6edf3;margin:.9rem 0 .35rem;font-size:1.05rem;">$1</h3>');
  s = s.replace(/^# (.+)$/gm,   '<h2 style="color:#e6edf3;margin:1rem 0 .4rem;font-size:1.2rem;">$1</h2>');
  // Bold + italic
  s = s.replace(/\*\*\*(.+?)\*\*\*/g, '<strong><em>$1</em></strong>');
  s = s.replace(/\*\*(.+?)\*\*/g,     '<strong style="color:#e6edf3;">$1</strong>');
  s = s.replace(/\*(.+?)\*/g,         '<em>$1</em>');
  // HR
  s = s.replace(/^---$/gm, '<hr style="border:none;border-top:1px solid #30363d;margin:.6rem 0;">');
  // Unordered lists (must run before line-break handling)
  s = s.replace(/(^- .+$(\n^- .+$)*)/gm, m => {
    const items = m.split('\n').map(l => `<li>${l.replace(/^- /, '')}</li>`).join('');
    return `<ul style="margin:.4rem 0 .4rem 1.2rem;padding:0;color:#8b949e;">${items}</ul>`;
  });
  // Inline code
  s = s.replace(/`([^`]+)`/g, '<code style="background:#21262d;padding:.1rem .3rem;border-radius:4px;font-size:.85em;color:#79c0ff;">$1</code>');
  // Paragraphs / line breaks — blank line → paragraph break
  s = s.replace(/\n{2,}/g, '</p><p style="margin:.5rem 0;color:#8b949e;">');
  s = s.replace(/\n/g, '<br>');
  return `<p style="margin:.5rem 0;color:#8b949e;">${s}</p>`;
}

let injects = [];
let leaderboard = [];
let teams = [];
let currentIdx = 0;
let playing = true;
let speedMs = 5000;
let _timer = null;
let _tickMs = 0;
let _elapsed = 0;
let _loopCount = 0;

const CIRCUMFERENCE = 213.6; // 2π × 34

async function loadState() {
  try {
    const r = await fetch(`/api/gameday/session/${SESSION_ID}/simulate-state`);
    const d = await r.json();
    if (!d.ok) return;
    injects = d.injects || [];
    leaderboard = d.leaderboard || [];
    teams = d.teams || [];
    renderTimeline();
    renderLeaderboard();
    renderTeamStats();
    if (injects.length) showPhase(currentIdx);
  } catch(e) { console.warn('state load failed', e); }
}

function showPhase(idx) {
  if (!injects.length) return;
  idx = ((idx % injects.length) + injects.length) % injects.length;
  currentIdx = idx;
  const inj = injects[idx];

  document.getElementById('phase-num').textContent =
    `Phase ${idx + 1} of ${injects.length}` + (_loopCount > 0 ? ` · Loop ${_loopCount + 1}` : '');
  document.getElementById('phase-counter').textContent =
    `Phase ${idx + 1} / ${injects.length}`;

  const titleEl = document.getElementById('inject-title');
  titleEl.textContent = inj.title || '—';

  const bodyEl = document.getElementById('inject-body');
  bodyEl.innerHTML = renderMd(inj.body_md || inj.description || '(No description)');

  const minEl = document.getElementById('inject-minute');
  minEl.textContent = inj.at_minute != null ? `⏱ T+${inj.at_minute} min` : '';

  // Type badge
  const badge = document.getElementById('inject-type-badge');
  const cfg = inj.config_json ? JSON.parse(inj.config_json) : {};
  const itype = cfg.inject_type || 'custom';
  badge.textContent = itype.replace(/_/g,' ').toUpperCase();
  badge.className = `sim-inject-type type-${itype}`;

  // AI tools
  const toolsEl = document.getElementById('inject-tools');
  const tools = cfg.ai_tools || [];
  toolsEl.innerHTML = tools.length
    ? tools.map(t => `<span class="sim-tool-badge">🤖 ${t}</span>`).join('')
    : '';

  // Animate card
  const card = document.getElementById('phase-card');
  card.classList.remove('entering');
  void card.offsetWidth;
  card.classList.add('entering');

  updateTimeline();
  resetTimer();
}

function updateTimeline() {
  const strip = document.getElementById('phase-timeline');
  strip.innerHTML = injects.map((inj, i) => {
    let cls = i < currentIdx ? 'done' : i === currentIdx ? 'current' : 'upcoming';
    const label = inj.title ? inj.title.slice(0, 28) + (inj.title.length > 28 ? '…' : '') : `Phase ${i+1}`;
    return `<button class="phase-pill ${cls}" onclick="jumpTo(${i})">
      <span class="phase-dot"></span>${label}
    </button>`;
  }).join('');
  // Scroll current pill into view
  const pills = strip.querySelectorAll('.phase-pill');
  if (pills[currentIdx]) pills[currentIdx].scrollIntoView({behavior:'smooth',inline:'center',block:'nearest'});
}

function renderLeaderboard() {
  const el = document.getElementById('lb-rows');
  if (!leaderboard.length) { el.innerHTML = '<div style="color:#6e7681;font-size:.82rem;">No scores yet</div>'; return; }
  const maxScore = Math.max(...leaderboard.map(r => r.total_score), 1);
  const rankColors = ['gold','silver','bronze'];
  el.innerHTML = leaderboard.map((r, i) => {
    const pct = Math.round((r.total_score / maxScore) * 100);
    const rankCls = rankColors[i] || '';
    return `<div class="lb-row">
      <span class="lb-rank ${rankCls}">#${r.rank}</span>
      <div style="flex:1;min-width:0;">
        <div style="display:flex;justify-content:space-between;align-items:center;">
          <span class="lb-name">${r.team_name}</span>
          <span class="lb-score">${r.total_score}</span>
        </div>
        <div class="lb-bar-wrap"><div class="lb-bar" style="width:${pct}%"></div></div>
        <div class="lb-breakdown">⚡${r.receipt_pts} · 🧑‍⚖️${r.judge_pts} · ⏱${r.time_bonus_pts}</div>
      </div>
    </div>`;
  }).join('');
}

function renderTeamStats() {
  const el = document.getElementById('team-stats');
  if (!teams.length) { el.innerHTML = '<div style="color:#6e7681;font-size:.82rem;">No teams yet</div>'; return; }
  el.innerHTML = teams.map(t => {
    const lbEntry = leaderboard.find(r => r.team_id === t.team_id) || {};
    return `<div class="team-stat-card">
      <div class="team-stat-name">${t.team_name}</div>
      <div class="team-stat-row"><span>Members</span><span>${t.member_count}</span></div>
      <div class="team-stat-row"><span>Responses</span><span>${t.response_count}</span></div>
      <div class="team-stat-row"><span>AI Receipts</span><span>${t.receipt_total}</span></div>
      <div class="team-stat-row"><span>Score</span><span style="color:var(--sim-green);font-weight:600;">${lbEntry.total_score || 0}</span></div>
      ${t.tools_used && t.tools_used.length ? `<div class="team-stat-row"><span>Tools Used</span><span>${t.tools_used.length}</span></div>` : ''}
    </div>`;
  }).join('');
}

// Timer ring
function resetTimer() {
  _elapsed = 0;
  _tickMs = 0;
  updateRing(0);
}

function updateRing(elapsed) {
  const pct = Math.min(elapsed / speedMs, 1);
  const offset = CIRCUMFERENCE * (1 - pct);
  document.getElementById('timer-circle').style.strokeDashoffset = offset;
  const remaining = Math.ceil((speedMs - elapsed) / 1000);
  document.getElementById('timer-text').textContent = remaining > 0 ? remaining : '→';
}

// Playback engine
function startTimer() {
  if (_timer) clearInterval(_timer);
  const TICK = 200;
  _elapsed = 0;
  _timer = setInterval(() => {
    _elapsed += TICK;
    updateRing(_elapsed);
    if (_elapsed >= speedMs) {
      _elapsed = 0;
      nextPhase();
    }
  }, TICK);
}

function stopTimer() {
  if (_timer) { clearInterval(_timer); _timer = null; }
}

function nextPhase() {
  const next = currentIdx + 1;
  if (next >= injects.length) _loopCount++;
  showPhase(next);
}

function togglePlay() {
  playing = !playing;
  const btn = document.getElementById('play-btn');
  if (playing) {
    btn.textContent = '⏸';
    btn.classList.remove('paused');
    startTimer();
  } else {
    btn.textContent = '▶';
    btn.classList.add('paused');
    stopTimer();
  }
}

function setSpeed(ms) {
  speedMs = ms;
  ['sp3','sp5','sp10','sp30'].forEach(id => document.getElementById(id).classList.remove('active'));
  const ids = {3000:'sp3',5000:'sp5',10000:'sp10',30000:'sp30'};
  if (ids[ms]) document.getElementById(ids[ms]).classList.add('active');
  if (playing) startTimer();
}

function jumpTo(idx) {
  showPhase(idx);
  if (playing) startTimer();
}

// Periodic refresh for live leaderboard
async function refreshLive() {
  try {
    const r = await fetch(`/api/gameday/session/${SESSION_ID}/simulate-state`);
    const d = await r.json();
    if (d.ok) {
      leaderboard = d.leaderboard || [];
      teams = d.teams || [];
      renderLeaderboard();
      renderTeamStats();
    }
  } catch(e) {}
}

// Init
loadState().then(() => {
  if (playing) startTimer();
});
setInterval(refreshLive, 10000);
</script>
{% endblock %}