{% extends "base.html" %}
{% block title %}AI GameDay League{% endblock %}

{% block extra_css %}
<style>
.team-card{border-radius:8px;padding:20px;border-left:4px solid var(--border-color,#30363d);transition:box-shadow .2s;}
.team-card:hover{box-shadow:0 4px 16px rgba(0,0,0,.3);}
.score-badge{display:inline-block;border-radius:20px;padding:3px 12px;font-weight:700;font-size:0.85rem;}
.rank-1{color:#f59e0b;font-size:1.4rem;font-weight:800;}
.rank-2{color:#9ca3af;font-size:1.2rem;font-weight:700;}
.rank-3{color:#b45309;font-size:1.1rem;font-weight:700;}
.dim-bar{height:6px;border-radius:3px;background:var(--bg-tertiary,#161b22);overflow:hidden;margin-top:4px;}
.dim-fill{height:100%;border-radius:3px;}
.ethics-ok{color:#22c55e;}
.ethics-warn{color:#ef4444;}
#status-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px;}
.dot-active{background:#22c55e;animation:pulse 1.5s infinite;}
.dot-idle{background:#6b7280;}
.dot-pending{background:#f59e0b;}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.4;}}
</style>
{% endblock %}

{% block content %}
<div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-bottom:24px;">
  <div>
    <h1 style="margin:0;font-size:1.6rem;">AI GameDay League</h1>
    <p style="margin:4px 0 0;color:var(--text-muted,#8b949e);">Autonomous 4-team cyber adversarial competition — Red vs Blue, Gold innovates, Green governs</p>
  </div>
  <div style="display:flex;gap:10px;flex-wrap:wrap;">
    <button class="btn btn-secondary" onclick="location.href='/gameday/ai-league/ops'">LLMOps Metrics</button>
    <button class="btn btn-primary" id="start-btn" onclick="startTournament()">+ New Tournament</button>
  </div>
</div>

<!-- Tournament status bar -->
{% if tournament %}
<div class="card" style="margin-bottom:20px;padding:14px 20px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;">
  <span id="status-dot" class="dot-{% if tournament.status == 'active' %}active{% elif tournament.status == 'pending' %}pending{% else %}idle{% endif %}"></span>
  <strong>{{ tournament.name }}</strong>
  <span style="color:var(--text-muted,#8b949e);">Round {{ tournament.current_round }}/{{ tournament.round_count }}</span>
  <span class="score-badge" style="background:var(--bg-tertiary,#161b22);font-size:0.75rem;">{{ tournament.status|upper }}</span>
  <span style="color:var(--text-muted,#8b949e);font-size:0.82rem;margin-left:auto;">Started {{ tournament.started_at or '—' }}</span>
</div>
{% else %}
<div class="card" style="margin-bottom:20px;padding:20px;text-align:center;color:var(--text-muted,#8b949e);">
  No tournaments yet. Click <strong>+ New Tournament</strong> to start an autonomous 5-round cyber competition.
</div>
{% endif %}

<!-- Leaderboard -->
{% if leaderboard %}
<h2 style="font-size:1.1rem;margin:0 0 14px;font-weight:600;">Live Standings</h2>
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:32px;">
  {% for t in leaderboard %}
  <a href="/gameday/ai-league/team/{{ t.team_key }}" style="text-decoration:none;">
  <div class="team-card card" style="border-left-color:{{ t.color }};">
    <div style="display:flex;align-items:center;gap:12px;margin-bottom:14px;">
      <span class="rank-{{ t.rank }}">
        {% if t.rank == 1 %}🥇{% elif t.rank == 2 %}🥈{% elif t.rank == 3 %}🥉{% else %}#{{ t.rank }}{% endif %}
      </span>
      <div>
        <div style="font-weight:700;font-size:1rem;color:{{ t.color }};">{{ t.name }}</div>
        <div style="font-size:0.78rem;color:var(--text-muted,#8b949e);">{{ t.domain }}</div>
      </div>
      <span class="score-badge" style="margin-left:auto;background:{{ t.color }}22;color:{{ t.color }};">{{ t.total_score }} pts</span>
    </div>
    <!-- Score dimensions -->
    <div style="display:grid;grid-template-columns:1fr 1fr;gap:8px;font-size:0.78rem;">
      <div>
        <div style="color:var(--text-muted,#8b949e);">Rounds Won</div>
        <div style="font-weight:600;">{{ t.rounds_won }}</div>
      </div>
      <div>
        <div style="color:var(--text-muted,#8b949e);">SUGGESTED</div>
        <div style="font-weight:600;">{{ t.artifacts_suggested }}</div>
      </div>
      <div>
        <div style="color:var(--text-muted,#8b949e);">Training Pairs</div>
        <div style="font-weight:600;">{{ t.training_pairs_contributed }}</div>
      </div>
      <div>
        <div style="color:var(--text-muted,#8b949e);">Ethics</div>
        <div style="font-weight:600;" class="{% if t.avg_ethics_score >= 0.8 %}ethics-ok{% else %}ethics-warn{% endif %}">
          {{ (t.avg_ethics_score * 100)|round(0)|int }}%
        </div>
      </div>
    </div>
    <!-- Innovation bar -->
    <div style="margin-top:12px;">
      <div style="font-size:0.75rem;color:var(--text-muted,#8b949e);margin-bottom:3px;">Innovation</div>
      <div class="dim-bar"><div class="dim-fill" style="width:{{ (t.avg_innovation_score * 100)|round(0)|int }}%;background:{{ t.color }};"></div></div>
    </div>
  </div>
  </a>
  {% endfor %}
</div>
{% endif %}

<!-- Round history sparkline table -->
{% if round_scores %}
<h2 style="font-size:1.1rem;margin:0 0 14px;font-weight:600;">Round History</h2>
<div class="card" style="overflow:auto;margin-bottom:32px;">
  <table style="width:100%;border-collapse:collapse;font-size:0.85rem;">
    <thead>
      <tr style="border-bottom:1px solid var(--border-color,#30363d);">
        <th style="padding:10px 14px;text-align:left;">Round</th>
        <th style="padding:10px 14px;text-align:left;">Team</th>
        <th style="padding:10px 14px;text-align:right;">Score</th>
        <th style="padding:10px 14px;text-align:right;">Quality</th>
        <th style="padding:10px 14px;text-align:right;">Innovation</th>
        <th style="padding:10px 14px;text-align:right;">Ethics</th>
        <th style="padding:10px 14px;text-align:right;">Compliance</th>
        <th style="padding:10px 14px;text-align:center;">Blocked</th>
      </tr>
    </thead>
    <tbody>
      {% for r in round_scores %}
      <tr style="border-bottom:1px solid var(--border-color,#21262d);">
        <td style="padding:8px 14px;color:var(--text-muted,#8b949e);">R{{ r.round_num }}</td>
        <td style="padding:8px 14px;font-weight:600;">{{ r.team_key|upper }}</td>
        <td style="padding:8px 14px;text-align:right;font-weight:700;">{{ r.total_score }}</td>
        <td style="padding:8px 14px;text-align:right;">{{ (r.quality_score * 100)|round(0)|int }}%</td>
        <td style="padding:8px 14px;text-align:right;">{{ (r.innovation_score * 100)|round(0)|int }}%</td>
        <td style="padding:8px 14px;text-align:right;" class="{% if r.ethics_score >= 0.7 %}ethics-ok{% else %}ethics-warn{% endif %}">
          {{ (r.ethics_score * 100)|round(0)|int }}%
        </td>
        <td style="padding:8px 14px;text-align:right;">{{ (r.compliance_score * 100)|round(0)|int }}%</td>
        <td style="padding:8px 14px;text-align:center;">
          {% if r.ethics_blocked %}
          <span style="color:#ef4444;font-weight:700;">BLOCKED</span>
          {% else %}
          <span style="color:#22c55e;">OK</span>
          {% endif %}
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

<!-- Past tournaments -->
{% if tournaments|length > 1 %}
<h2 style="font-size:1.1rem;margin:0 0 14px;font-weight:600;">Tournament History</h2>
<div class="card" style="overflow:auto;">
  <table style="width:100%;border-collapse:collapse;font-size:0.85rem;">
    <thead>
      <tr style="border-bottom:1px solid var(--border-color,#30363d);">
        <th style="padding:10px 14px;text-align:left;">Name</th>
        <th style="padding:10px 14px;">Status</th>
        <th style="padding:10px 14px;">Rounds</th>
        <th style="padding:10px 14px;">Created</th>
      </tr>
    </thead>
    <tbody>
      {% for t in tournaments %}
      <tr style="border-bottom:1px solid var(--border-color,#21262d);">
        <td style="padding:8px 14px;font-weight:600;">{{ t.name }}</td>
        <td style="padding:8px 14px;">
          <span class="score-badge" style="background:var(--bg-tertiary,#161b22);font-size:0.75rem;">{{ t.status }}</span>
        </td>
        <td style="padding:8px 14px;">{{ t.current_round }}/{{ t.round_count }}</td>
        <td style="padding:8px 14px;color:var(--text-muted,#8b949e);">{{ t.created_at }}</td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}

<!-- IQE widget -->
{% include "includes/iqe_query_widget.html" ignore missing %}

<!-- Start modal -->
<div id="start-modal" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:999;align-items:center;justify-content:center;">
  <div class="card" style="width:420px;max-width:95vw;padding:28px;">
    <h3 style="margin:0 0 16px;">Start New Tournament</h3>
    <label style="display:block;margin-bottom:8px;font-size:0.88rem;">Tournament Name</label>
    <input id="t-name" class="form-control" type="text" placeholder="GameDay-2026-Round1" style="margin-bottom:14px;">
    <label style="display:block;margin-bottom:8px;font-size:0.88rem;">Rounds (1–10)</label>
    <input id="t-rounds" class="form-control" type="number" value="5" min="1" max="10" style="margin-bottom:20px;">
    <div style="display:flex;gap:10px;justify-content:flex-end;">
      <button class="btn btn-secondary" onclick="closeModal()">Cancel</button>
      <button class="btn btn-primary" onclick="confirmStart()">Start Tournament</button>
    </div>
  </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
function startTournament(){ document.getElementById('start-modal').style.display='flex'; }
function closeModal(){ document.getElementById('start-modal').style.display='none'; }

function confirmStart(){
  const name   = document.getElementById('t-name').value.trim() || null;
  const rounds = parseInt(document.getElementById('t-rounds').value) || 5;
  fetch('/api/gameday/ai-league/start',{
    method:'POST',
    headers:{'Content-Type':'application/json'},
    body: JSON.stringify({name, round_count: rounds})
  }).then(r=>r.json()).then(d=>{
    closeModal();
    if(d.ok){ setTimeout(()=>location.reload(), 1500); }
  });
}

// Auto-refresh leaderboard every 30s when tournament is active
{% if tournament and tournament.status == 'active' %}
setInterval(()=>{
  fetch('/api/gameday/ai-league/leaderboard').then(r=>r.json()).then(()=>{
    location.reload();
  });
}, 30000);
{% endif %}
</script>
{% endblock %}