{% extends "base.html" %}
{% block title %}Dashboard — KittyRec Admin{% endblock %}
{% block head %}
<style>
  .admin-who { display:flex; align-items:center; gap:.6rem; font-size:.82rem; color:var(--text2); }
  .admin-who strong { color:var(--text); }
  .scope-badge { font-size:.65rem; padding:1px 7px; border-radius:999px; font-weight:700; letter-spacing:.5px; text-transform:uppercase; }
  .scope-admin { background:rgba(124,58,237,.2); color:var(--purple-l); border:1px solid rgba(124,58,237,.3); }
  .scope-mod   { background:rgba(6,182,212,.15); color:var(--teal); border:1px solid rgba(6,182,212,.25); }
  .online-list { display:flex; flex-direction:column; gap:.4rem; max-height:340px; overflow-y:auto; }
  .online-item { display:flex; align-items:center; gap:.75rem; background:var(--bg3); border:1px solid var(--border); border-radius:7px; padding:.5rem .85rem; font-size:.82rem; }
  .online-item .name { font-weight:600; flex:1; }
  .online-item .room { color:var(--text3); font-size:.75rem; }
  .online-item .lvl  { color:var(--purple-l); font-size:.72rem; font-weight:700; }
  .ban-entry { font-size:.8rem; display:flex; gap:.75rem; align-items:center; padding:.45rem 0; border-bottom:1px solid var(--bg3); }
  .ban-entry:last-child { border-bottom:none; }
  .ban-action-ban { color:var(--red); font-weight:700; text-transform:uppercase; font-size:.65rem; }
  .ban-action-unban { color:var(--green); font-weight:700; text-transform:uppercase; font-size:.65rem; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="flex items-center gap-2">
    <h1>Dashboard</h1>
    <div class="admin-who ml-auto">
      Signed in as <strong>{{ account.username }}</strong>
      {% if SCOPE_ADMIN in scopes %}<span class="scope-badge scope-admin">Admin</span>{% endif %}
      {% if 'kittyrec.mod' in scopes %}<span class="scope-badge scope-mod">Mod</span>{% endif %}
    </div>
  </div>
  <p>Live server overview — auto-refreshes every 15 s</p>
</div>

<div class="stats-grid">
  <div class="stat-card purple">
    <div class="label">Total Players</div>
    <div class="value" id="s-total">{{ total_players }}</div>
    <div class="sub">registered accounts</div>
  </div>
  <div class="stat-card green">
    <div class="label">Online Now</div>
    <div class="value" id="s-online">{{ online_count }}</div>
    <div class="sub"><span class="live-dot"></span>active connections</div>
  </div>
  <div class="stat-card teal">
    <div class="label">Sessions</div>
    <div class="value" id="s-sessions">{{ session_count }}</div>
    <div class="sub">active Photon rooms</div>
  </div>
  <div class="stat-card yellow">
    <div class="label">Pending Gifts</div>
    <div class="value" id="s-gifts">{{ pending_gifts }}</div>
    <div class="sub">unopened boxes</div>
  </div>
  <div class="stat-card" style="--accent-color:var(--red)">
    <div class="label">Banned</div>
    <div class="value" id="s-banned" style="color:var(--red)">{{ banned_count }}</div>
    <div class="sub">active bans</div>
  </div>
</div>

<div class="grid-2" style="gap:1.5rem;margin-bottom:1.5rem">
  <div class="card">
    <div class="section-head">
      <h2>Online Players</h2>
      <span class="badge badge-green" id="online-badge"><span class="dot"></span> {{ online_count }}</span>
    </div>
    <div class="online-list" id="online-list">
      <p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Loading...</p>
    </div>
  </div>

  <div style="display:flex;flex-direction:column;gap:1.5rem">
    <div class="card">
      <div class="section-head"><h2>Active Sessions</h2><a href="/admin/sessions" class="btn btn-ghost btn-sm">View all</a></div>
      {% if sessions %}
      <div class="table-wrap">
        <table>
          <thead><tr><th>Room</th><th>Activity</th><th>Players</th><th>Mode</th></tr></thead>
          <tbody>
            {% for s in sessions %}
            <tr>
              <td style="font-family:monospace;font-size:.75rem;color:var(--teal)">{{ s.photon_room_id }}</td>
              <td style="font-size:.82rem">{{ s.name }}</td>
              <td><span class="badge badge-green">{{ s.players|length }}</span></td>
              <td>
                {% if s.sandbox %}<span class="badge badge-purple">Sandbox</span>
                {% elif s.private %}<span class="badge badge-gray">Private</span>
                {% else %}<span class="badge badge-teal">Public</span>{% endif %}
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
      {% else %}
      <p style="color:var(--text3);font-size:.85rem;text-align:center;padding:1.5rem 0">No active sessions</p>
      {% endif %}
    </div>

    <div class="card">
      <div class="section-head"><h2>Recent Moderation</h2><a href="/admin/bans" class="btn btn-ghost btn-sm">View all</a></div>
      {% if recent_bans %}
        {% for b in recent_bans %}
        <div class="ban-entry">
          <span class="ban-action-{{ b.action }}">{{ b.action }}</span>
          <span style="flex:1;font-weight:600">{{ b.username }}</span>
          <span style="color:var(--text3)">{{ b.reason[:40] if b.reason else '—' }}</span>
          <span style="color:var(--text3);font-size:.72rem">{{ b.created_at[:10] }}</span>
        </div>
        {% endfor %}
      {% else %}
      <p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1rem 0">No recent actions</p>
      {% endif %}
    </div>
  </div>
</div>

{% if SCOPE_ADMIN in scopes %}
<div class="card mb-2" style="margin-bottom:1rem">
  <div class="section-head">
    <h2>Store</h2>
    <button class="btn btn-primary btn-sm" onclick="rerollStore()">Reroll Store Now</button>
  </div>
  <p style="color:var(--text3);font-size:.82rem;margin:0">Force the store to rotate to a new random selection before the 12-hour window expires.</p>
</div>

<div class="card mb-2">
  <div class="section-head"><h2>Quick Gift All</h2></div>
  <div style="display:grid;grid-template-columns:1fr 1fr 1fr auto;gap:1rem;align-items:end">
    <div class="form-group" style="margin:0">
      <label>XP</label>
      <input type="number" id="ga-xp" value="1000" min="0" max="50000">
    </div>
    <div class="form-group" style="margin:0">
      <label>Rarity</label>
      <select id="ga-rarity">
        <option value="0">Common</option>
        <option value="10" selected>Uncommon</option>
        <option value="20">Rare</option>
        <option value="30">Epic</option>
        <option value="50">Legendary</option>
      </select>
    </div>
    <div class="form-group" style="margin:0">
      <label>Message</label>
      <input type="text" id="ga-msg" placeholder="From the KittyRec team!" maxlength="80">
    </div>
    <button class="btn btn-primary" onclick="giftAll()">Gift All</button>
  </div>
</div>
{% endif %}

{% include 'admin/partials/ban_modal.html' %}
{% endblock %}

{% block scripts %}
<script>
async function refreshStats() {
  try {
    const d = await (await fetch('/admin/api/stats')).json();
    document.getElementById('s-online').textContent   = d.online;
    document.getElementById('s-sessions').textContent = d.sessions;
    document.getElementById('s-gifts').textContent    = d.pending_gifts;
    document.getElementById('s-banned').textContent   = d.banned;
  } catch {}

  try {
    const players = await (await fetch('/admin/api/online_players')).json();
    const list = document.getElementById('online-list');
    document.getElementById('online-badge').innerHTML = `<span class="dot"></span> ${players.length}`;
    list.innerHTML = players.length ? players.map(p => `
      <div class="online-item">
        <span class="live-dot"></span>
        <span class="name"><a href="#" onclick="KR.openDrawer(${p.id});return false" style="color:inherit;text-decoration:none">${p.username}</a></span>
        <span class="room">${p.room}</span>
        <span class="lvl">Lv ${p.level}</span>
        <div class="flex gap-1">
          <button class="btn btn-ghost btn-sm" onclick="disconnectPlayer(${p.id})">Disconnect</button>
          <button class="btn btn-red btn-sm" onclick="quickBan(${p.id}, '${p.username.replace(/'/g,"\\'")}')">Ban</button>
        </div>
      </div>`).join('') : '<p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">No players online</p>';
  } catch {}
}

function quickBan(pid, name) { openBanModal(pid, name || '#' + pid); }
window.onBanSuccess = function () { setTimeout(refreshStats, 300); };

async function disconnectPlayer(pid) {
  const d = await api('/admin/api/disconnect/' + pid);
  toast(d.was_online ? 'Player disconnected' : 'Player was not online');
  setTimeout(refreshStats, 300);
}

async function rerollStore() {
  const d = await api('/admin/api/reroll_store');
  if (d.ok) toast('Store rerolled! New items are live.');
  else toast(d.error || 'Error', 'error');
}

async function giftAll() {
  const xp     = parseInt(document.getElementById('ga-xp').value) || 1000;
  const rarity = parseInt(document.getElementById('ga-rarity').value);
  const msg    = document.getElementById('ga-msg').value;
  const d = await api('/admin/api/gift_all', { xp, rarity, message: msg });
  toast('Gift sent to ' + d.count + ' players!');
  setTimeout(refreshStats, 500);
}

setInterval(refreshStats, 15000);
refreshStats();
</script>
{% endblock %}