{% extends "base.html" %}
{% block title %}Facilitator Console — AI GameDay{% endblock %}
{% block extra_css %}
<style>
.fc-header{background:#161b22;border-bottom:1px solid #30363d;padding:1rem 2rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
.fc-header h1{font-size:1.3rem;font-weight:700;color:#FF6B35;margin:0;}
.fc-badge{font-size:.75rem;padding:.2rem .6rem;border-radius:12px;font-weight:600;}
.state-active{background:#1f6030;color:#3fb950;}
.state-pending{background:#302010;color:#FFB800;}
.state-paused{background:#1a1a2e;color:#58a6ff;}
.state-ended{background:#21262d;color:#6e7681;}
.fc-layout{display:grid;grid-template-columns:300px 1fr;gap:0;height:calc(100vh - 160px);}
.fc-sidebar{background:#0d1117;border-right:1px solid #21262d;overflow-y:auto;padding:1rem;}
.fc-main{overflow-y:auto;padding:1.2rem 1.5rem;}
.inject-row{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:.9rem 1rem;margin-bottom:.7rem;transition:border-color .2s;}
.inject-row:hover{border-color:#58a6ff;}
.inject-row h4{margin:0 0 .3rem;font-size:.9rem;color:#e6edf3;}
.inject-row .ir-meta{font-size:.75rem;color:#6e7681;margin-bottom:.5rem;}
.inj-state{display:inline-block;font-size:.68rem;padding:.12rem .45rem;border-radius:10px;font-weight:600;}
.inj-pending{background:#302010;color:#FFB800;}
.inj-dispatched{background:#1f6030;color:#3fb950;}
.inj-closed{background:#21262d;color:#6e7681;}
.team-row{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:.9rem 1rem;margin-bottom:.6rem;}
.team-row h4{margin:0 0 .3rem;font-size:.9rem;color:#e6edf3;}
.score-bar-bg{background:#21262d;border-radius:4px;height:8px;margin:.4rem 0;}
.score-bar-fill{background:linear-gradient(90deg,#FF6B35,#FFB800);border-radius:4px;height:8px;transition:width .5s;}
.ctrl-btn{background:#21262d;border:1px solid #30363d;color:#e6edf3;padding:.5rem 1rem;border-radius:6px;font-size:.85rem;cursor:pointer;transition:all .2s;}
.ctrl-btn:hover{border-color:#FF6B35;color:#FF6B35;}
.ctrl-btn.danger{border-color:#f85149;color:#f85149;}
.ctrl-btn.primary{background:linear-gradient(135deg,#FF6B35,#cc4a1a);border-color:transparent;color:#fff;font-weight:600;}
.lb-mini{font-size:.8rem;}
.lb-mini tr td{padding:.3rem .5rem;border-bottom:1px solid #21262d;}
.lb-mini tr:last-child td{border-bottom:none;}
.session-info-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:.8rem;margin-bottom:1rem;}
.sinfo-card{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:.7rem 1rem;text-align:center;}
.sinfo-card .si-val{font-size:1.4rem;font-weight:700;color:#FF6B35;}
.sinfo-card .si-lbl{font-size:.72rem;color:#6e7681;margin-top:.2rem;}
</style>
{% endblock %}
{% block content %}
<div class="fc-header">
  <h1>🎮 Facilitator Console</h1>
  <span class="fc-badge state-{{ session.state }}">{{ session.state }}</span>
  <span style="color:#6e7681;font-size:.85rem;">{{ session.scenario_slug.replace('_',' ').title() }}</span>
  <span style="color:#58a6ff;font-size:.85rem;font-family:monospace;font-weight:700;">{{ session.join_code }}</span>
  <span style="flex:1;"></span>
  {% if session.state == 'pending' %}
  <button class="ctrl-btn primary" onclick="setState('active')">▶ Start Session</button>
  {% elif session.state == 'active' %}
  <button class="ctrl-btn" onclick="setState('paused')">⏸ Pause</button>
  <button class="ctrl-btn danger" onclick="if(confirm('End session?'))setState('ended')">⏹ End</button>
  {% elif session.state == 'paused' %}
  <button class="ctrl-btn primary" onclick="setState('active')">▶ Resume</button>
  <button class="ctrl-btn danger" onclick="if(confirm('End session?'))setState('ended')">⏹ End</button>
  {% elif session.state == 'ended' %}
  <a href="/gameday/session/{{ session.session_id }}/results" class="ctrl-btn">📋 View AAR</a>
  {% endif %}
  <a href="/gameday/leaderboard/{{ session.session_id }}" class="ctrl-btn" target="_blank">📊 Live Board</a>
</div>

<div class="fc-layout">
  <!-- Sidebar: Inject Timeline -->
  <div class="fc-sidebar">
    <div style="font-size:.78rem;color:#6e7681;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.8rem;">Inject Timeline</div>
    {% for inj in injects %}
    <div class="inject-row" id="inject-{{ inj.inject_id[:8] }}">
      <h4>{{ inj.title }}
        {% if inj.get('is_aadc') %}<span style="font-size:.62rem;background:#0a84ff22;color:#58a6ff;border:1px solid #0a84ff33;border-radius:3px;padding:.08rem .3rem;vertical-align:middle;">AADC</span>{% endif %}
      </h4>
      <div class="ir-meta">
        {% if inj.at_minute %}⏱️ T+{{ inj.at_minute }}min{% endif %}
        {% if inj.sequence_num %}#{{ inj.sequence_num }}{% endif %}
      </div>
      <span class="inj-state inj-{{ inj.state }}">{{ inj.state }}</span>
      {% if inj.state == 'pending' %}
      <button class="ctrl-btn" style="float:right;font-size:.75rem;padding:.3rem .7rem;" onclick="dispatchInject('{{ inj.inject_id }}')">▶ Dispatch</button>
      {% elif inj.state == 'dispatched' %}
      <button class="ctrl-btn" style="float:right;font-size:.75rem;padding:.3rem .7rem;" onclick="closeInject('{{ inj.inject_id }}')">✓ Close</button>
      {% endif %}
    </div>
    {% endfor %}
  </div>

  <!-- Main: Team Grid + Leaderboard -->
  <div class="fc-main">
    <!-- Stats row -->
    <div class="session-info-grid">
      <div class="sinfo-card">
        <div class="si-val">{{ teams|length }}</div>
        <div class="si-lbl">Teams</div>
      </div>
      <div class="sinfo-card">
        <div class="si-val">{{ session.duration_minutes }}m</div>
        <div class="si-lbl">Duration</div>
      </div>
      <div class="sinfo-card">
        <div class="si-val">{{ session.session_mode }}</div>
        <div class="si-lbl">Mode</div>
      </div>
      <div class="sinfo-card">
        <div class="si-val" id="dispatched-count">{{ injects|selectattr('state','eq','dispatched')|list|length }}</div>
        <div class="si-lbl">Active Injects</div>
      </div>
    </div>

    <!-- Live Leaderboard mini-table -->
    <div style="margin-bottom:1.2rem;">
      <div style="font-size:.78rem;color:#6e7681;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem;">Live Leaderboard</div>
      <div style="background:#161b22;border:1px solid #30363d;border-radius:8px;overflow:hidden;">
        <table class="lb-mini" style="width:100%;border-collapse:collapse;">
          <thead><tr style="background:#21262d;font-size:.75rem;color:#6e7681;">
            <th style="text-align:left;padding:.4rem .6rem;">#</th>
            <th style="text-align:left;padding:.4rem .6rem;">Team</th>
            <th style="text-align:right;padding:.4rem .6rem;">Total</th>
            <th style="text-align:right;padding:.4rem .6rem;">AI Receipts</th>
            <th style="text-align:right;padding:.4rem .6rem;">Judge</th>
          </tr></thead>
          <tbody id="lb-body">
          {% for row in leaderboard %}
          <tr>
            <td style="color:{% if row.rank==1 %}#FFB800{% elif row.rank==2 %}#c0c0c0{% elif row.rank==3 %}#cd7f32{% else %}#6e7681{% endif %};font-weight:700;">{{ row.rank }}</td>
            <td style="color:#e6edf3;font-weight:600;">{{ row.team_name }}</td>
            <td style="text-align:right;color:#FF6B35;font-weight:700;">{{ row.total_score }}</td>
            <td style="text-align:right;color:#58a6ff;">{{ row.receipt_pts }}</td>
            <td style="text-align:right;color:#3fb950;">{{ row.judge_pts }}</td>
          </tr>
          {% else %}
          <tr><td colspan="5" style="text-align:center;color:#6e7681;padding:1rem;">No teams yet</td></tr>
          {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <!-- Response Monitor -->
    <div style="margin-bottom:1.2rem;">
      <div style="font-size:.78rem;color:#6e7681;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem;">Response Monitor <span style="font-size:.7rem;color:#30363d;" id="resp-ts"></span></div>
      <div id="resp-monitor" style="background:#0d1117;border:1px solid #21262d;border-radius:8px;max-height:220px;overflow-y:auto;font-size:.78rem;">
        <div style="color:#6e7681;text-align:center;padding:1.5rem;" id="resp-empty">No responses yet</div>
      </div>
    </div>

    <!-- Team details -->
    <div style="font-size:.78rem;color:#6e7681;text-transform:uppercase;letter-spacing:.06em;margin-bottom:.6rem;">Teams</div>
    {% for team in teams %}
    <div class="team-row">
      <h4>{{ team.team_name }} <span style="font-family:monospace;font-size:.8rem;color:#58a6ff;">{{ team.join_code }}</span></h4>
      <div style="font-size:.78rem;color:#6e7681;">Score: <strong style="color:#FF6B35;">{{ team.total_score }}</strong> pts</div>
      <div class="score-bar-bg"><div class="score-bar-fill" style="width:{{ [((team.total_score / 750) * 100)|round|int, 100]|min }}%;"></div></div>
    </div>
    {% else %}
    <div style="color:#6e7681;font-size:.85rem;text-align:center;padding:2rem;">No teams have joined yet. Share session code: <strong style="color:#58a6ff;font-family:monospace;">{{ session.join_code }}</strong></div>
    {% endfor %}
  </div>
</div>

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

async function setState(state){
  const r=await fetch('/api/gameday/session/'+SESSION_ID+'/state',{method:'PATCH',headers:{'Content-Type':'application/json'},body:JSON.stringify({state})});
  if((await r.json()).ok)location.reload();
}
async function dispatchInject(id){
  await fetch('/api/gameday/inject/'+id+'/dispatch',{method:'POST'});
  refreshLeaderboard();
  location.reload();
}
async function closeInject(id){
  await fetch('/api/gameday/inject/'+id+'/close',{method:'POST'});
  location.reload();
}
async function refreshLeaderboard(){
  const r=await fetch('/api/gameday/session/'+SESSION_ID+'/leaderboard');
  const d=await r.json();
  const tbody=document.getElementById('lb-body');
  const rankColors={1:'#FFB800',2:'#c0c0c0',3:'#cd7f32'};
  tbody.innerHTML=d.leaderboard.map(row=>`
    <tr>
      <td style="color:${rankColors[row.rank]||'#6e7681'};font-weight:700;">${row.rank}</td>
      <td style="color:#e6edf3;font-weight:600;">${row.team_name}</td>
      <td style="text-align:right;color:#FF6B35;font-weight:700;">${row.total_score}</td>
      <td style="text-align:right;color:#58a6ff;">${row.receipt_pts}</td>
      <td style="text-align:right;color:#3fb950;">${row.judge_pts}</td>
    </tr>`).join('')||'<tr><td colspan="5" style="text-align:center;color:#6e7681;padding:1rem;">No scores yet</td></tr>';
}
// Auto-refresh leaderboard every 10s
setInterval(refreshLeaderboard, 10000);

// Response monitor
async function refreshResponses(){
  const r=await fetch('/api/gameday/session/'+SESSION_ID+'/responses');
  const d=await r.json();
  const monitor=document.getElementById('resp-monitor');
  const ts=document.getElementById('resp-ts');
  ts.textContent='· updated '+new Date().toLocaleTimeString();
  if(!d.responses||!d.responses.length){
    monitor.innerHTML='<div style="color:#6e7681;text-align:center;padding:1.5rem;">No responses yet</div>';
    return;
  }
  monitor.innerHTML=d.responses.map(resp=>{
    const aadc=resp.is_aadc?`<span style="color:#58a6ff;font-weight:700;">AADC: ${resp.aadc_score}/100</span>`:`<span style="color:#3fb950;">Judge: ${resp.judge_pts||0}</span>`;
    return `<div style="padding:.5rem .75rem;border-bottom:1px solid #21262d;display:flex;gap:.6rem;align-items:flex-start;">
      <div style="flex:1;min-width:0;">
        <div style="color:#e6edf3;font-weight:600;font-size:.78rem;">${resp.team_name||'?'} <span style="color:#6e7681;font-weight:400;">→ ${resp.inject_title||'?'}</span></div>
        <div style="color:#8b949e;font-size:.72rem;margin:.1rem 0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">${resp.response_preview||''}</div>
      </div>
      <div style="text-align:right;white-space:nowrap;font-size:.75rem;">
        ${aadc}<br>
        <span style="color:#FF6B35;font-weight:700;">+${resp.total_pts||0} pts</span>
      </div>
    </div>`;
  }).join('');
}
refreshResponses();
setInterval(refreshResponses, 8000);
</script>
{% endblock %}