{% extends "admin/admin_base.html" %}
{% block title %}Chat Moderation — KittyRec Admin{% endblock %}
{% block head %}
<style>
  .thread-row { cursor:pointer; }
  .thread-row:hover td { background:var(--bg3); }
  .msg-bubble { padding:.55rem .85rem; border-radius:8px; background:var(--bg3); border:1px solid var(--border); font-size:.85rem; line-height:1.45; word-break:break-word; }
  .msg-wrap { display:flex; flex-direction:column; gap:.6rem; max-height:500px; overflow-y:auto; }
  .msg-item { display:flex; align-items:flex-start; gap:.6rem; }
  .msg-meta { font-size:.7rem; color:var(--text3); white-space:nowrap; margin-top:.25rem; }
  .msg-system .msg-bubble { background:rgba(124,58,237,.08); border-color:rgba(124,58,237,.2); color:var(--text2); font-style:italic; }
  #thread-panel { position:fixed; top:0; right:0; width:480px; max-width:100vw; height:100vh; background:var(--bg2); border-left:1px solid var(--border); z-index:800; display:none; flex-direction:column; box-shadow:-8px 0 32px rgba(0,0,0,.5); }
  #thread-panel.open { display:flex; }
  #thread-header { padding:1rem 1.25rem; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:.75rem; flex-shrink:0; }
  #thread-body { flex:1; overflow-y:auto; padding:1rem 1.25rem; }
  #thread-panel-close { background:none; border:none; color:var(--text3); font-size:1.3rem; cursor:pointer; margin-left:auto; }
  #thread-panel-close:hover { color:var(--text); }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="flex items-center gap-2">
    <h1>Chat Moderation</h1>
    <span class="badge badge-gray ml-auto">{{ threads|length }} threads</span>
  </div>
  <p>All player chat threads — click a row to view messages</p>
</div>

<div class="card">
  <div class="search-bar">
    <input type="text" id="search" placeholder="Filter by player username…" oninput="filterThreads()">
  </div>
  <div class="table-wrap">
    <table id="threads-table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Players</th>
          <th>Messages</th>
          <th>Last Activity</th>
          <th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for t in threads %}
        <tr class="thread-row" id="trow-{{ t.id }}" data-players="{{ t.players|map(attribute='username')|join(' ')|lower }}" onclick="openThread({{ t.id }})">
          <td class="mono" style="color:var(--text3)">#{{ t.id }}</td>
          <td>
            {% for p in t.players %}
            <a href="/admin/players/{{ p.id }}" onclick="event.stopPropagation()" style="color:var(--text2);text-decoration:none;font-size:.82rem">{{ p.username }}</a>{% if not loop.last %}<span style="color:var(--border)"> · </span>{% endif %}
            {% endfor %}
          </td>
          <td style="color:var(--text2)">{{ t.message_count }}</td>
          <td style="color:var(--text3);font-size:.78rem">{{ t.last_message_at[:16] if t.last_message_at else '—' }}</td>
          <td>
            <button class="btn btn-ghost btn-sm" onclick="openThread({{ t.id }});event.stopPropagation()">View</button>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div id="thread-panel">
  <div id="thread-header">
    <div>
      <div style="font-weight:700" id="thread-panel-title">Thread</div>
      <div style="font-size:.75rem;color:var(--text3)" id="thread-panel-sub"></div>
    </div>
    <button id="thread-panel-close" onclick="closeThread()">&times;</button>
  </div>
  <div id="thread-body">
    <p style="color:var(--text3);text-align:center;padding:2rem 0">Loading…</p>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
function filterThreads() {
  const q = document.getElementById('search').value.toLowerCase();
  document.querySelectorAll('#threads-table tbody tr').forEach(r => {
    r.style.display = r.dataset.players.includes(q) ? '' : 'none';
  });
}

let _currentThread = null;

async function openThread(tid) {
  _currentThread = tid;
  document.getElementById('thread-panel').classList.add('open');
  document.getElementById('thread-panel-title').textContent = 'Thread #' + tid;
  document.getElementById('thread-panel-sub').textContent = '';
  const body = document.getElementById('thread-body');
  body.innerHTML = '<p style="color:var(--text3);text-align:center;padding:2rem 0">Loading…</p>';
  const d = await KR.apiGet('/admin/api/chat_thread/' + tid);
  if (!d || d.error) { body.innerHTML = '<p style="color:var(--red);padding:1rem">Error loading</p>'; return; }
  const msgs = d.messages || [];
  document.getElementById('thread-panel-sub').textContent = msgs.length + ' messages';
  if (!msgs.length) { body.innerHTML = '<p style="color:var(--text3);text-align:center;padding:2rem 0">No messages</p>'; return; }
  body.innerHTML = '<div class="msg-wrap">' + msgs.map(m => {
    const isSystem = m.sender_id <= 23;
    const ts = (m.sent_at || '').slice(0, 16);
    return `<div class="msg-item ${isSystem ? 'msg-system' : ''}" id="msg-${m.id}">
      <div style="flex:1">
        <div style="font-size:.72rem;color:var(--purple-l);font-weight:600;margin-bottom:.2rem">${KR.escapeHtml(m.sender_username || '#' + m.sender_id)}</div>
        <div class="msg-bubble">${KR.escapeHtml(m.contents)}</div>
        <div class="msg-meta">${ts}</div>
      </div>
      {% if SCOPE_ADMIN in scopes %}
      <button class="btn btn-ghost btn-sm" style="color:var(--red);padding:2px 7px;flex-shrink:0;margin-top:.25rem" onclick="deleteMsg(${m.id})">Del</button>
      {% endif %}
    </div>`;
  }).join('') + '</div>';
}

function closeThread() {
  document.getElementById('thread-panel').classList.remove('open');
  _currentThread = null;
}

async function deleteMsg(mid) {
  if (!confirm('Delete this message?')) return;
  const r = await fetch('/admin/api/chat_message/' + mid, { method: 'DELETE' });
  const d = await r.json();
  if (d.ok) {
    const el = document.getElementById('msg-' + mid);
    if (el) el.remove();
    KR.toast('Message deleted');
  } else KR.toast(d.error || 'Error', 'error');
}

document.addEventListener('keydown', e => { if (e.key === 'Escape') closeThread(); });
</script>
{% endblock %}