{% extends "base.html" %}
{% block title %}Live Leaderboard — AI GameDay{% endblock %}
{% block extra_css %}
<style>
body{background:#0d1117;}
.lb-wrap{max-width:960px;margin:0 auto;padding:1.5rem 1rem;}
.lb-title{text-align:center;padding:1.5rem 0 .5rem;}
.lb-title h1{font-size:2rem;font-weight:800;color:#FF6B35;margin:0 0 .3rem;}
.lb-title p{color:#6e7681;font-size:.9rem;}
.lb-card{background:#161b22;border:1px solid #30363d;border-radius:12px;padding:1rem 1.4rem;margin-bottom:.8rem;display:grid;grid-template-columns:60px 1fr auto;align-items:center;gap:1rem;transition:border-color .3s;}
.lb-card:hover{border-color:#FF6B35;}
.lb-card.rank-1{border-color:#FFB800;background:linear-gradient(90deg,#1a1500 0%,#161b22 100%);}
.lb-card.rank-2{border-color:#c0c0c0;background:linear-gradient(90deg,#111213 0%,#161b22 100%);}
.lb-card.rank-3{border-color:#cd7f32;background:linear-gradient(90deg,#110d00 0%,#161b22 100%);}
.rank-num{font-size:1.8rem;font-weight:800;text-align:center;line-height:1;}
.rank-1 .rank-num{color:#FFB800;}
.rank-2 .rank-num{color:#c0c0c0;}
.rank-3 .rank-num{color:#cd7f32;}
.rank-num.other{color:#30363d;font-size:1.4rem;}
.team-name{font-size:1.1rem;font-weight:700;color:#e6edf3;}
.score-breakdown{font-size:.78rem;color:#6e7681;margin-top:.3rem;display:flex;gap:.8rem;}
.score-val{font-size:1.6rem;font-weight:800;color:#FF6B35;}
.score-bar-bg{background:#21262d;border-radius:4px;height:10px;margin:.4rem 0 0;}
.score-bar-fill{border-radius:4px;height:10px;transition:width .8s;}
.ribbons-row{display:flex;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem;justify-content:center;}
.ribbon-card{background:#161b22;border:1px solid #30363d;border-radius:8px;padding:.6rem 1rem;text-align:center;min-width:160px;}
.ribbon-icon{font-size:1.4rem;}
.ribbon-label{font-size:.78rem;color:#6e7681;display:block;margin-top:.2rem;}
.ribbon-winner{font-size:.85rem;color:#e6edf3;font-weight:600;}
.pulse-dot{display:inline-block;width:8px;height:8px;background:#3fb950;border-radius:50%;margin-right:.4rem;animation:pulse 2s infinite;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.3;}}
.lb-filters{display:flex;gap:.5rem;flex-wrap:wrap;justify-content:center;margin-bottom:1.2rem;}
.lb-filter-btn{background:#161b22;border:1px solid #30363d;color:#8b949e;padding:.35rem .9rem;border-radius:6px;font-size:.78rem;cursor:pointer;transition:all .2s;}
.lb-filter-btn:hover{border-color:#58a6ff;color:#58a6ff;}
.lb-filter-btn.active{background:#1f6030;border-color:#3fb950;color:#3fb950;}
.lb-filter-btn.exclude{background:#3c1f1f;border-color:#f85149;color:#f85149;}
</style>
{% endblock %}
{% block content %}
<div class="lb-wrap">
  <div class="lb-title">
    <h1>📊 Live Leaderboard</h1>
    <p>
      <span class="pulse-dot"></span>{{ session.scenario_slug.replace('_',' ').title() }} ·
      <span class="fc-badge state-{{ session.state }}" style="font-size:.72rem;padding:.2rem .6rem;border-radius:12px;background:#1f6030;color:#3fb950;">{{ session.state }}</span>
    </p>
  </div>

  <!-- Ontology Filters -->
  <div class="lb-filters">
    {% for f in ontology_filters %}
    <button class="lb-filter-btn" data-filter="{{ f.ontology_class or '' }}" onclick="setFilter(this)">{{ f.label }}</button>
    {% endfor %}
    <button class="lb-filter-btn" data-exclude="cyber" onclick="toggleExclude(this)">Hide Cyber</button>
  </div>

  <!-- Ribbons -->
  {% if ribbons %}
  <div class="ribbons-row">
    {% for ribbon_id, winner in ribbons.items() %}
    {% set defn = ribbon_defs[ribbon_id] %}
    <div class="ribbon-card">
      <div class="ribbon-icon">{{ defn.icon }}</div>
      <span class="ribbon-label">{{ defn.label }}</span>
      {% if winner %}
      <div class="ribbon-winner">{{ winner.team_name }}</div>
      {% else %}
      <div style="color:#6e7681;font-size:.8rem;">TBD</div>
      {% endif %}
    </div>
    {% endfor %}
  </div>
  {% endif %}

  <!-- Leaderboard cards -->
  <div id="lb-list">
  {% for row in leaderboard %}
  {% set max_score = leaderboard[0].total_score if leaderboard else 1 %}
  <div class="lb-card rank-{{ row.rank if row.rank <= 3 else 'other' }}">
    <div class="rank-num {% if row.rank > 3 %}other{% endif %}">
      {% if row.rank == 1 %}🥇{% elif row.rank == 2 %}🥈{% elif row.rank == 3 %}🥉{% else %}{{ row.rank }}{% endif %}
    </div>
    <div>
      <div class="team-name">{{ row.team_name }}</div>
      <div class="score-breakdown">
        <span>🤖 AI Receipts: <strong style="color:#58a6ff;">{{ row.receipt_pts }}</strong></span>
        <span>📚 Judge: <strong style="color:#3fb950;">{{ row.judge_pts }}</strong></span>
        <span>⚡ Speed: <strong style="color:#FF6B35;">{{ row.time_bonus_pts }}</strong></span>
      </div>
      <div class="score-bar-bg">
        <div class="score-bar-fill" style="width:{{ [((row.total_score / (max_score or 1)) * 100)|round|int, 100]|min }}%;background:{% if row.rank==1 %}linear-gradient(90deg,#FFB800,#FF6B35){% elif row.rank==2 %}linear-gradient(90deg,#c0c0c0,#8b8b8b){% elif row.rank==3 %}linear-gradient(90deg,#cd7f32,#b56b20){% else %}linear-gradient(90deg,#4a90d9,#00D4FF){% endif %};"></div>
      </div>
    </div>
    <div class="score-val">{{ row.total_score }}<span style="font-size:.8rem;color:#6e7681;font-weight:400;"> pts</span></div>
  </div>
  {% else %}
  <div style="text-align:center;color:#6e7681;padding:3rem;">No scores yet. Waiting for teams...</div>
  {% endfor %}
  </div>

  <div style="text-align:center;margin-top:1rem;font-size:.75rem;color:#30363d;">
    Auto-refreshes every 10 seconds · <a href="/gameday/session/{{ session.session_id }}/facilitate" style="color:#30363d;">Facilitator Console</a>
  </div>
</div>

<script>
const SID={{ session.session_id }};
let activeFilter='';
let excludeCyber=false;

function setFilter(btn){
  const val=btn.dataset.filter;
  if(activeFilter===val){activeFilter='';btn.classList.remove('active');}
  else{activeFilter=val;document.querySelectorAll('.lb-filter-btn[data-filter]').forEach(b=>b.classList.remove('active'));btn.classList.add('active');}
  refreshLeaderboard();
}
function toggleExclude(btn){
  excludeCyber=!excludeCyber;
  btn.classList.toggle('exclude',excludeCyber);
  refreshLeaderboard();
}

async function refreshLeaderboard(){
  let url='/api/gameday/session/'+SID+'/leaderboard';
  const params=[];
  if(activeFilter)params.push('ontology_class='+encodeURIComponent(activeFilter));
  if(excludeCyber)params.push('exclude_class=cyber');
  if(params.length)url+='?'+params.join('&');
  const r=await fetch(url);
  const d=await r.json();
  if(!d.leaderboard||!d.leaderboard.length){
    document.getElementById('lb-list').innerHTML='<div style="text-align:center;color:#6e7681;padding:3rem;">No scores yet. Waiting for teams...</div>';
    return;
  }
  const maxScore=d.leaderboard[0].total_score||1;
  const colors={1:'linear-gradient(90deg,#FFB800,#FF6B35)',2:'linear-gradient(90deg,#c0c0c0,#8b8b8b)',3:'linear-gradient(90deg,#cd7f32,#b56b20)'};
  const rankMedals={1:'🥇',2:'🥈',3:'🥉'};
  document.getElementById('lb-list').innerHTML=d.leaderboard.map(row=>`
    <div class="lb-card rank-${row.rank<=3?row.rank:'other'}">
      <div class="rank-num ${row.rank>3?'other':''}">${rankMedals[row.rank]||row.rank}</div>
      <div>
        <div class="team-name">${row.team_name}</div>
        <div class="score-breakdown">
          <span>🤖 AI Receipts: <strong style="color:#58a6ff;">${row.receipt_pts}</strong></span>
          <span>📚 Judge: <strong style="color:#3fb950;">${row.judge_pts}</strong></span>
          <span>⚡ Speed: <strong style="color:#FF6B35;">${row.time_bonus_pts}</strong></span>
        </div>
        <div class="score-bar-bg">
          <div class="score-bar-fill" style="width:${Math.min(Math.round(row.total_score/maxScore*100),100)}%;background:${colors[row.rank]||'linear-gradient(90deg,#4a90d9,#00D4FF)'};"></div>
        </div>
      </div>
      <div class="score-val">${row.total_score}<span style="font-size:.8rem;color:#6e7681;font-weight:400;"> pts</span></div>
    </div>`).join('');
}
refreshLeaderboard();
setInterval(refreshLeaderboard,10000);
</script>
{% endblock %}