{% extends "base.html" %}
{% block title %}AI GameDay — Sessions{% endblock %}
{% block content %}
<div class="page-header" 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</h1>
    <p style="margin:4px 0 0;color:var(--text-muted,#8b949e);">Tabletop exercise sessions — snake-draft team formation + scenario matching</p>
  </div>
  <button class="btn btn-primary" onclick="openNewSession()">+ New Session</button>
</div>

<!-- Sessions grid -->
<div id="sessions-grid" style="display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;">
  {% if sessions %}
    {% for s in sessions %}
    <div class="card" style="border-left:4px solid {% if s.status=='open' %}#10b981{% elif s.status=='active' %}#3b82f6{% else %}#6b7280{% endif %};">
      <div style="display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:10px;">
        <div>
          <h3 style="margin:0;font-size:1.05rem;">{{ s.name }}</h3>
          {% if s.scenario_slug %}
          <span style="font-size:0.78rem;color:var(--text-muted,#8b949e);">{{ s.scenario_slug }}</span>
          {% endif %}
        </div>
        <span class="badge badge-{% if s.status=='open' %}success{% elif s.status=='active' %}info{% else %}secondary{% endif %}">{{ s.status }}</span>
      </div>
      <div style="display:flex;gap:16px;margin-bottom:14px;font-size:0.82rem;color:var(--text-muted,#8b949e);">
        <span>Max teams: {{ s.max_teams }}</span>
        <span>{{ s.created_at[:10] }}</span>
      </div>
      <a href="/gameday/session/{{ s.session_id }}" class="btn btn-secondary" style="width:100%;text-align:center;">Open Session →</a>
    </div>
    {% endfor %}
  {% else %}
  <div class="card" style="grid-column:1/-1;text-align:center;padding:48px 24px;color:var(--text-muted,#8b949e);">
    <div style="font-size:3rem;margin-bottom:12px;">🎯</div>
    <p style="font-size:1rem;margin:0 0 16px;">No sessions yet. Create your first GameDay session to get started.</p>
    <button class="btn btn-primary" onclick="openNewSession()">Create First Session</button>
  </div>
  {% endif %}
</div>

<!-- New Session Modal -->
<div id="modal-new" style="display:none;position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:1000;align-items:center;justify-content:center;">
  <div class="card" style="width:100%;max-width:480px;margin:24px;">
    <h2 style="margin:0 0 20px;font-size:1.2rem;">New GameDay Session</h2>
    <label style="display:block;margin-bottom:4px;font-size:0.85rem;font-weight:600;">Session Name *</label>
    <input id="inp-name" type="text" placeholder="e.g. Blue Team Exercise April 2026" 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.9rem;margin-bottom:12px;">

    <label style="display:block;margin-bottom:4px;font-size:0.85rem;font-weight:600;">Scenario (optional)</label>
    <input id="inp-slug" type="text" placeholder="e.g. ai_security_challenge" 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.9rem;margin-bottom:12px;">

    <label style="display:block;margin-bottom:4px;font-size:0.85rem;font-weight:600;">Max Teams</label>
    <input id="inp-teams" type="number" value="8" min="2" max="20" 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.9rem;margin-bottom:20px;">

    <div id="modal-err" style="display:none;color:#ef4444;margin-bottom:12px;font-size:0.85rem;"></div>
    <div style="display:flex;gap:10px;justify-content:flex-end;">
      <button class="btn btn-secondary" onclick="closeNewSession()">Cancel</button>
      <button class="btn btn-primary" onclick="submitNewSession()">Create Session</button>
    </div>
  </div>
</div>

<script>
function openNewSession() {
  const m = document.getElementById('modal-new');
  m.style.display = 'flex';
  document.getElementById('inp-name').focus();
}
function closeNewSession() {
  document.getElementById('modal-new').style.display = 'none';
  document.getElementById('modal-err').style.display = 'none';
}
async function submitNewSession() {
  const name = document.getElementById('inp-name').value.trim();
  const slug = document.getElementById('inp-slug').value.trim();
  const maxT = parseInt(document.getElementById('inp-teams').value) || 8;
  const err  = document.getElementById('modal-err');
  if (!name) { err.textContent = 'Session name is required.'; err.style.display='block'; return; }
  err.style.display = 'none';
  const r = await fetch('/gameday/api/sessions', {
    method: 'POST',
    headers: {'Content-Type':'application/json'},
    body: JSON.stringify({name, scenario_slug: slug, max_teams: maxT}),
  });
  const data = await r.json();
  if (!r.ok) { err.textContent = data.error || 'Create failed.'; err.style.display='block'; return; }
  window.location.href = '/gameday/session/' + data.session.session_id;
}
document.getElementById('modal-new').addEventListener('click', function(e) {
  if (e.target === this) closeNewSession();
});
document.getElementById('inp-name').addEventListener('keydown', function(e) {
  if (e.key === 'Enter') submitNewSession();
});
</script>
{% endblock %}