{% extends "base.html" %}
{% block title %}GameDay — {{ session.name }}{% endblock %}
{% block content %}
<div style="margin-bottom:24px;">
  <a href="/gameday/" style="font-size:0.85rem;color:var(--text-muted,#8b949e);">← All Sessions</a>
  <div style="display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;margin-top:8px;">
    <div>
      <h1 style="margin:0;font-size:1.5rem;">🎮 {{ session.name }}</h1>
      <span id="status-badge" class="badge badge-{% if session.status=='open' %}success{% elif session.status=='active' %}info{% else %}secondary{% endif %}" style="margin-top:4px;display:inline-block;">{{ session.status }}</span>
      {% if session.scenario_slug %}
      <span style="margin-left:8px;font-size:0.8rem;color:var(--text-muted,#8b949e);">{{ session.scenario_slug }}</span>
      {% endif %}
    </div>
    <div style="display:flex;gap:8px;flex-wrap:wrap;">
      <button class="btn btn-secondary" onclick="loadRecommendation()">🎯 Recommend Scenario</button>
      <button class="btn btn-secondary" onclick="runFormation()">⚡ Auto-Draft Teams</button>
      <button class="btn btn-primary" onclick="confirmFormation()" id="btn-confirm" style="display:none;">✅ Confirm Teams</button>
    </div>
  </div>
</div>

<!-- Stats strip -->
<div style="display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:24px;">
  <div class="card" style="text-align:center;padding:16px 12px;">
    <div style="font-size:1.6rem;font-weight:700;" id="stat-players">—</div>
    <div style="font-size:0.78rem;color:var(--text-muted,#8b949e);">Players</div>
  </div>
  <div class="card" style="text-align:center;padding:16px 12px;">
    <div style="font-size:1.6rem;font-weight:700;" id="stat-teams">—</div>
    <div style="font-size:0.78rem;color:var(--text-muted,#8b949e);">Teams (max {{ session.max_teams }})</div>
  </div>
  <div class="card" style="text-align:center;padding:16px 12px;">
    <div style="font-size:1.6rem;font-weight:700;" id="stat-roles">—</div>
    <div style="font-size:0.78rem;color:var(--text-muted,#8b949e);">Unique Roles</div>
  </div>
</div>

<div style="display:grid;grid-template-columns:1fr 1fr;gap:20px;" class="session-grid">

  <!-- Left: Registration -->
  <div>
    <div class="card" style="margin-bottom:20px;">
      <h2 style="margin:0 0 16px;font-size:1rem;">Register Player</h2>
      <input id="inp-player" type="text" placeholder="Player name *" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border,#30363d);border-radius:6px;background:var(--bg-secondary,#161b22);color:inherit;font-size:0.88rem;margin-bottom:8px;">
      <input id="inp-email" type="email" placeholder="Email (optional)" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border,#30363d);border-radius:6px;background:var(--bg-secondary,#161b22);color:inherit;font-size:0.88rem;margin-bottom:8px;">
      <textarea id="inp-skill" placeholder="Describe your background / skill set *&#10;e.g. 'MLOps engineer, 5yrs Kubernetes + model deployment'" rows="3" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border,#30363d);border-radius:6px;background:var(--bg-secondary,#161b22);color:inherit;font-size:0.88rem;resize:vertical;margin-bottom:8px;"></textarea>
      <input id="inp-academy" type="text" placeholder="Academy username (optional)" style="width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--border,#30363d);border-radius:6px;background:var(--bg-secondary,#161b22);color:inherit;font-size:0.88rem;margin-bottom:12px;">
      <div id="reg-err" style="display:none;color:#ef4444;margin-bottom:8px;font-size:0.83rem;"></div>
      <button class="btn btn-primary" style="width:100%;" onclick="submitRegistration()">Register →</button>
    </div>

    <!-- Registrations list -->
    <div class="card">
      <h2 style="margin:0 0 14px;font-size:1rem;">Registered Players <span id="reg-count" style="font-weight:400;color:var(--text-muted,#8b949e);"></span></h2>
      <div id="reg-list" style="display:flex;flex-direction:column;gap:8px;">
        <div style="text-align:center;padding:24px;color:var(--text-muted,#8b949e);font-size:0.9rem;">Loading…</div>
      </div>
    </div>
  </div>

  <!-- Right: Teams + Scenario -->
  <div>
    <!-- Scenario Recommendation -->
    <div class="card" style="margin-bottom:20px;display:none;" id="recommend-card">
      <h2 style="margin:0 0 12px;font-size:1rem;">🎯 Scenario Recommendation</h2>
      <div id="recommend-content"></div>
    </div>

    <!-- Team Formation -->
    <div class="card">
      <h2 style="margin:0 0 14px;font-size:1rem;">Team Formation</h2>
      <div id="teams-panel">
        <div style="text-align:center;padding:32px 16px;color:var(--text-muted,#8b949e);">
          <div style="font-size:2rem;margin-bottom:8px;">⚡</div>
          <p style="margin:0;font-size:0.9rem;">Register players first, then click "Auto-Draft Teams" to generate balanced teams.</p>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
@media (max-width:768px) { .session-grid { grid-template-columns:1fr !important; } }
.player-chip { display:flex;align-items:center;justify-content:space-between;padding:8px 10px;border-radius:6px;background:var(--bg-secondary,#161b22);font-size:0.85rem; }
.team-block { border:1px solid var(--border,#30363d);border-radius:8px;padding:12px;margin-bottom:10px; }
.team-block h4 { margin:0 0 8px;font-size:0.9rem; }
.member-row { display:flex;align-items:center;justify-content:space-between;padding:5px 6px;border-radius:4px;font-size:0.82rem; }
.member-row:hover { background:rgba(255,255,255,0.04); }
.role-pill { font-size:0.72rem;padding:2px 7px;border-radius:10px;background:rgba(99,102,241,.2);color:#a5b4fc;white-space:nowrap; }
.conf-dot { width:8px;height:8px;border-radius:50%;display:inline-block;flex-shrink:0; }
</style>

<script>
const SID = {{ session.session_id }};
let _registrations = [];
let _teams = [];
let _draftPlan = null;

async function loadSession() {
  const r = await fetch(`/gameday/api/sessions/${SID}`);
  const d = await r.json();
  _registrations = d.registrations || [];
  _teams = d.teams || [];
  renderRegistrations();
  if (_teams.length) renderTeams(_teams, false);
  updateStats();
}

function updateStats() {
  document.getElementById('stat-players').textContent = _registrations.length;
  const teamCount = _draftPlan ? _draftPlan.num_teams : _teams.length;
  document.getElementById('stat-teams').textContent = teamCount || '—';
  const roles = new Set(_registrations.map(r => r.matched_role_id));
  document.getElementById('stat-roles').textContent = roles.size || '—';
}

function confColor(c) {
  if (c >= 0.75) return '#10b981';
  if (c >= 0.45) return '#f59e0b';
  return '#ef4444';
}

function renderRegistrations() {
  const el = document.getElementById('reg-list');
  document.getElementById('reg-count').textContent = `(${_registrations.length})`;
  if (!_registrations.length) {
    el.innerHTML = '<div style="text-align:center;padding:20px;color:var(--text-muted,#8b949e);font-size:0.88rem;">No players yet.</div>';
    return;
  }
  el.innerHTML = _registrations.map(r => `
    <div class="player-chip">
      <div style="display:flex;align-items:center;gap:8px;">
        <span class="conf-dot" style="background:${confColor(r.match_confidence)};"></span>
        <div>
          <span style="font-weight:600;">${r.player_name}</span>
          <span class="role-pill" style="margin-left:6px;">${r.matched_role_label || r.matched_role_id}</span>
        </div>
      </div>
      <span style="font-size:0.75rem;color:var(--text-muted,#8b949e);" title="${r.match_reasoning}">${Math.round(r.match_confidence*100)}%</span>
    </div>
  `).join('');
}

async function submitRegistration() {
  const player = document.getElementById('inp-player').value.trim();
  const skill  = document.getElementById('inp-skill').value.trim();
  const err    = document.getElementById('reg-err');
  if (!player || !skill) { err.textContent='Name and skill description are required.'; err.style.display='block'; return; }
  err.style.display='none';
  const r = await fetch(`/gameday/api/sessions/${SID}/register`, {
    method:'POST', headers:{'Content-Type':'application/json'},
    body: JSON.stringify({
      player_name: player,
      email: document.getElementById('inp-email').value.trim(),
      stated_skill: skill,
      academy_username: document.getElementById('inp-academy').value.trim(),
    }),
  });
  const d = await r.json();
  if (!r.ok) { err.textContent = d.error || 'Registration failed.'; err.style.display='block'; return; }
  _registrations.push(d.registration);
  renderRegistrations();
  updateStats();
  document.getElementById('inp-player').value='';
  document.getElementById('inp-email').value='';
  document.getElementById('inp-skill').value='';
  document.getElementById('inp-academy').value='';
}

async function runFormation() {
  if (!_registrations.length) { alert('Register at least one player first.'); return; }
  const r = await fetch(`/gameday/api/sessions/${SID}/formation`, {method:'POST', headers:{'Content-Type':'application/json'}, body:'{}'});
  const d = await r.json();
  if (!r.ok) { alert('Formation failed: ' + (d.error || '')); return; }
  _draftPlan = d;
  renderTeams(d.teams, true);
  updateStats();
  document.getElementById('btn-confirm').style.display='inline-flex';
}

function renderTeams(teams, isDraft) {
  const el = document.getElementById('teams-panel');
  if (!teams || !teams.length) { el.innerHTML = '<div style="text-align:center;padding:32px 16px;color:var(--text-muted,#8b949e);">No teams yet.</div>'; return; }
  const teamColors = ['#3b82f6','#10b981','#f59e0b','#ef4444','#8b5cf6','#06b6d4','#ec4899','#84cc16'];
  el.innerHTML = (isDraft ? '<div style="font-size:0.8rem;color:#f59e0b;margin-bottom:12px;">⚡ Draft plan — review and confirm</div>' : '') +
    teams.map((t, i) => `
    <div class="team-block" style="border-color:${teamColors[i % teamColors.length]}40;">
      <h4 style="color:${teamColors[i % teamColors.length]};">
        ${t.team_name}
        <span style="font-weight:400;color:var(--text-muted,#8b949e);font-size:0.8rem;margin-left:6px;">${t.members.length} member${t.members.length!==1?'s':''}</span>
      </h4>
      ${t.members.map(m => `
        <div class="member-row">
          <span>${m.player_name}</span>
          <span class="role-pill">${m.role_label || m.role_id}</span>
        </div>
      `).join('')}
    </div>
  `).join('');
}

async function confirmFormation() {
  const r = await fetch(`/gameday/api/sessions/${SID}/confirm`, {method:'POST'});
  const d = await r.json();
  if (!r.ok) { alert('Confirm failed: ' + (d.error||'')); return; }
  document.getElementById('btn-confirm').style.display='none';
  alert(`Teams confirmed — ${d.teams_created} teams, ${d.members_created} members created.`);
  loadSession();
}

async function loadRecommendation() {
  if (!_registrations.length) { alert('Register players first.'); return; }
  const r = await fetch(`/gameday/api/sessions/${SID}/recommend`);
  const d = await r.json();
  const card = document.getElementById('recommend-card');
  const content = document.getElementById('recommend-content');
  card.style.display='block';

  const techPct = Math.round((d.tech_ratio||0)*100);
  const optHtml = (d.all_options||[]).slice(0,4).map(o => `
    <div style="display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:0.83rem;">
      <span>${o.icon||'🎯'}</span>
      <span style="flex:1;">${o.label}</span>
      <span style="color:${o.fit_score>=0.7?'#10b981':o.fit_score>=0.4?'#f59e0b':'#ef4444'};font-weight:600;">${Math.round(o.fit_score*100)}%</span>
    </div>
  `).join('');

  content.innerHTML = `
    <div style="margin-bottom:12px;">
      <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px;">
        <div style="flex:1;height:8px;border-radius:4px;background:var(--border,#30363d);overflow:hidden;">
          <div style="width:${techPct}%;height:100%;background:linear-gradient(90deg,#3b82f6,#8b5cf6);border-radius:4px;"></div>
        </div>
        <span style="font-size:0.8rem;white-space:nowrap;">${techPct}% technical</span>
      </div>
      <p style="font-size:0.83rem;color:var(--text-muted,#8b949e);margin:0;">${d.reasoning||''}</p>
    </div>
    ${d.recommended_slug ? `<div style="font-weight:600;margin-bottom:10px;">Top pick: ${d.recommended_label}</div>` : ''}
    ${optHtml}
  `;
}

loadSession();
</script>
{% endblock %}