{% extends "admin/admin_base.html" %}
{% block title %}Sessions — KittyRec Admin{% endblock %}
{% block head %}
<style>
  .session-card { background:var(--bg2); border:1px solid var(--border); border-radius:var(--radius); padding:1.25rem; margin-bottom:1rem; }
  .session-header { display:flex; align-items:center; gap:.75rem; margin-bottom:.75rem; }
  .session-id { font-family:monospace; font-size:.78rem; color:var(--teal); background:var(--bg3); padding:2px 8px; border-radius:5px; }
  .session-players { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.75rem; }
  .player-chip { display:flex; align-items:center; gap:.4rem; background:var(--bg3); border:1px solid var(--border); border-radius:6px; padding:.3rem .65rem; font-size:.8rem; }
  .player-chip a { color:var(--text); text-decoration:none; font-weight:600; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="flex items-center gap-2">
    <h1>Sessions</h1>
    <span class="badge badge-teal ml-auto">{{ session_details|length }} active</span>
    <span class="badge badge-green"><span class="dot"></span> {{ online_count }} online</span>
  </div>
  <p>Live Photon room sessions</p>
</div>

{% if session_details %}
<div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:1rem">
  {% for sd in session_details %}
  <div class="session-card">
    <div class="session-header">
      <span class="session-id">{{ sd.session.photon_room_id }}</span>
      {% if sd.session.sandbox %}<span class="badge badge-purple">Sandbox</span>
      {% elif sd.session.private %}<span class="badge badge-gray">Private</span>
      {% else %}<span class="badge badge-teal">Public</span>{% endif %}
      <span class="badge badge-green ml-auto"><span class="dot"></span> {{ sd.session.players|length }}</span>
    </div>
    <div style="font-weight:700;font-size:.95rem">{{ sd.session.name }}</div>
    <div style="color:var(--text3);font-size:.75rem;margin-top:.2rem">Activity: {{ sd.session.activity_key }}</div>
    <div class="session-players">
      {% for p in sd.players %}
      <div class="player-chip">
        <span class="live-dot"></span>
        <a href="#" onclick="KR.openDrawer({{ p.Id }});return false">{{ p.Username }}</a>
        <span style="color:var(--purple-l);font-size:.7rem">Lv {{ p.Level }}</span>
        <button class="btn btn-ghost btn-sm" style="padding:1px 6px;font-size:.7rem" onclick="disconnectPlayer({{ p.Id }})">Kick</button>
      </div>
      {% endfor %}
      {% if not sd.players %}
      <span style="color:var(--text3);font-size:.8rem">No player profiles found</span>
      {% endif %}
    </div>
  </div>
  {% endfor %}
</div>
{% else %}
<div class="card" style="text-align:center;padding:3rem">
  <div style="color:var(--text2)">No active sessions right now</div>
</div>
{% endif %}
{% endblock %}

{% block scripts %}
<script>
async function disconnectPlayer(pid) {
  const d = await api('/admin/api/disconnect/' + pid);
  toast(d.was_online ? 'Player disconnected' : 'Already offline');
  setTimeout(refreshSessions, 1000);
}

async function refreshSessions() {
  try {
    const r = await fetch('/admin/api/online_players');
    if (!r.ok) return;
    const d = await r.json();
    const badge = document.querySelector('.badge-teal');
    if (badge) badge.textContent = (d.sessions || []).length + ' active';
  } catch {}
}

setInterval(refreshSessions, 20000);
</script>
{% endblock %}