{% extends "admin/admin_base.html" %}
{% block title %}Players — KittyRec Admin{% endblock %}
{% block head %}
<style>
  .username-cell { font-weight:600; }
  .mono { font-family:monospace; font-size:.78rem; }
  .action-bar { display:flex; gap:.4rem; flex-wrap:wrap; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="flex items-center gap-2">
    <h1>Players</h1>
    <span class="badge badge-purple ml-auto">{{ profiles|length }} accounts</span>
  </div>
  <p>Manage player accounts, bans, and rewards</p>
</div>

<div id="bulk-bar" style="display:none;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius);padding:.65rem 1rem;margin-bottom:.75rem;display:none;align-items:center;gap:.75rem;flex-wrap:wrap">
  <span id="bulk-count" style="font-size:.82rem;color:var(--text2);font-weight:600"></span>
  <button class="btn btn-ghost btn-sm" onclick="bulkAction('disconnect')">Disconnect</button>
  {% if SCOPE_ADMIN in scopes %}
  <button class="btn btn-red btn-sm" onclick="openBulkBan()">Ban Selected</button>
  <button class="btn btn-green btn-sm" onclick="bulkAction('unban')">Unban Selected</button>
  <button class="btn btn-primary btn-sm" onclick="openBulkGift()">Gift Selected</button>
  {% endif %}
  <button class="btn btn-ghost btn-sm" style="margin-left:auto" onclick="clearSelection()">Clear</button>
</div>

<div class="card">
  <div class="search-bar">
    <input type="text" id="search" placeholder="Filter by username or display name…" oninput="filterTable()" autofocus>
  </div>
  <div class="table-wrap">
    <table id="players-table">
      <thead>
        <tr>
          <th style="width:32px"><input type="checkbox" id="select-all" onchange="toggleSelectAll(this)" style="cursor:pointer"></th>
          <th>ID</th><th>Player</th><th>Display Name</th><th>Level</th><th>XP</th><th>Tokens</th><th>Status</th><th>Joined</th><th>Last Login</th><th>Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for p in profiles %}
        <tr id="row-{{ p.id }}" data-name="{{ p.username|lower }} {{ p.display_name|lower }}">
          <td><input type="checkbox" class="row-cb" data-pid="{{ p.id }}" onchange="onCheckChange()" style="cursor:pointer"></td>
          <td class="mono" style="color:var(--text3)">{{ p.id }}</td>
          <td class="username-cell">
            <div style="display:flex;align-items:center;gap:.5rem">
              <div style="width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,var(--purple),var(--teal));display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:700;flex-shrink:0;overflow:hidden;position:relative">
                <span style="position:absolute;inset:0;display:flex;align-items:center;justify-content:center">{{ p.username[0]|upper }}</span>
                <img src="/alt/{{ p.id }}" style="width:100%;height:100%;object-fit:cover;position:absolute;inset:0;border-radius:50%" onerror="this.remove()">
              </div>
              <a href="#" onclick="KR.openDrawer({{ p.id }});return false" style="color:var(--text);text-decoration:none">{{ p.username }}</a>
            </div>
          </td>
          <td style="color:var(--text2);font-size:.82rem">{{ p.display_name }}</td>
          <td><span class="badge badge-purple">Lv {{ p.level }}</span></td>
          <td class="mono" style="color:var(--text2)">{{ "{:,}".format(p.xp) }}</td>
          <td class="mono" style="color:var(--teal)">{{ "{:,}".format(p.tokens or 0) }}</td>
          <td>
            {% if p.id in online_ids %}<span class="badge badge-green"><span class="dot"></span> Online</span>{% else %}<span class="badge badge-gray">Offline</span>{% endif %}
            {% if p.banned %}<span class="badge badge-red">Banned</span>{% endif %}
            {% if p.developer %}<span class="badge badge-yellow">Dev</span>{% endif %}
          </td>
          <td style="color:var(--text3);font-size:.78rem">{{ p.created_at[:10] if p.created_at else '—' }}</td>
          <td style="color:var(--text3);font-size:.78rem">{{ p.last_login[:10] if p.last_login else '—' }}</td>
          <td>
            <div class="action-bar">
              <button class="btn btn-ghost btn-sm" onclick="KR.openDrawer({{ p.id }})">View</button>
              {% if p.id in online_ids %}
              <button class="btn btn-ghost btn-sm" onclick="disconnectPlayer({{ p.id }})">Disconnect</button>
              {% endif %}
              {% if not p.banned %}
              <button class="btn btn-red btn-sm" onclick="openBanModal({{ p.id }}, '{{ p.username }}')">Ban</button>
              {% else %}
              {% if SCOPE_ADMIN in scopes %}
              <button class="btn btn-green btn-sm" onclick="unban({{ p.id }}, this)">Unban</button>
              {% endif %}
              {% endif %}
              {% if SCOPE_ADMIN in scopes %}
              <button class="btn btn-ghost btn-sm" onclick="toggleDev({{ p.id }}, this)">{{ 'Dev' if p.developer else 'Grant Dev' }}</button>
              <button class="btn btn-green btn-sm" onclick="openGiftModal({{ p.id }}, '{{ p.username }}')">Gift</button>
              {% endif %}
            </div>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

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

{% block scripts %}
<script>
function filterTable() {
  const q = document.getElementById('search').value.toLowerCase();
  document.querySelectorAll('#players-table tbody tr').forEach(r => {
    r.style.display = r.dataset.name.includes(q) ? '' : 'none';
  });
}
const _qp = new URLSearchParams(location.search).get('search');
if (_qp) { document.getElementById('search').value = _qp; filterTable(); }

async function toggleDev(id, btn) {
  const d = await api('/admin/api/toggle_dev/' + id);
  if (d.developer !== undefined) {
    btn.textContent = d.developer ? 'Dev' : 'Grant Dev';
    const row = document.getElementById('row-' + id);
    const badge = row.querySelector('.badge-yellow');
    if (d.developer && !badge) {
      const td = row.cells[6];
      const span = document.createElement('span');
      span.className = 'badge badge-yellow'; span.textContent = 'Dev';
      td.appendChild(document.createTextNode(' ')); td.appendChild(span);
    } else if (!d.developer && badge) {
      badge.remove();
    }
    toast(d.developer ? 'Dev status granted' : 'Dev status removed');
  }
}

window.onBanSuccess = function (pid) {
  const row = document.getElementById('row-' + pid);
  if (row && !row.cells[6].querySelector('.badge-red')) {
    const span = document.createElement('span');
    span.className = 'badge badge-red'; span.textContent = 'Banned';
    row.cells[6].appendChild(document.createTextNode(' ')); row.cells[6].appendChild(span);
  }
};

async function unban(pid, btn) {
  const d = await api('/admin/api/unban/' + pid);
  if (d.ok) {
    btn.closest('tr').querySelector('.badge-red')?.remove();
    btn.remove();
    toast('Player unbanned');
  } else toast(d.error || 'Error', 'error');
}

async function disconnectPlayer(pid) {
  const d = await api('/admin/api/disconnect/' + pid);
  toast(d.was_online ? 'Player disconnected' : 'Already offline');
}

(async function markAltAccounts() {
  try {
    const sharedIds = await KR.apiGet('/admin/api/shared_ips');
    if (!Array.isArray(sharedIds)) return;
    const set = new Set(sharedIds);
    document.querySelectorAll('#players-table tbody tr').forEach(row => {
      const idCell = row.cells[0];
      if (!idCell) return;
      const pid = parseInt(idCell.textContent.trim());
      if (set.has(pid)) {
        const nameCell = row.cells[1];
        if (nameCell && !nameCell.querySelector('.alt-hint')) {
          const span = document.createElement('span');
          span.className = 'alt-hint';
          span.title = 'Shares IP with another account';
          span.style.cssText = 'margin-left:.35rem;font-size:.62rem;font-weight:700;letter-spacing:.3px;text-transform:uppercase;color:var(--yellow);cursor:default;background:rgba(245,158,11,.12);border:1px solid rgba(245,158,11,.25);border-radius:3px;padding:1px 5px';
          span.textContent = 'alt';
          nameCell.appendChild(span);
        }
      }
    });
  } catch {}
})();

function getSelectedPids() {
  return [...document.querySelectorAll('.row-cb:checked')].map(cb => parseInt(cb.dataset.pid));
}

function onCheckChange() {
  const pids = getSelectedPids();
  const bar = document.getElementById('bulk-bar');
  const countEl = document.getElementById('bulk-count');
  if (pids.length) {
    bar.style.display = 'flex';
    countEl.textContent = pids.length + ' selected';
  } else {
    bar.style.display = 'none';
  }
}

function toggleSelectAll(cb) {
  document.querySelectorAll('#players-table tbody tr:not([style*="display: none"]) .row-cb').forEach(c => { c.checked = cb.checked; });
  onCheckChange();
}

function clearSelection() {
  document.querySelectorAll('.row-cb').forEach(c => c.checked = false);
  document.getElementById('select-all').checked = false;
  onCheckChange();
}

async function bulkAction(action, extra) {
  const pids = getSelectedPids();
  if (!pids.length) return;
  const d = await KR.apiPost('/admin/api/bulk_action', { action, pids, ...extra });
  if (d.ok) {
    const r = d.results || {};
    KR.toast(`${action}: ${r.ok || 0} done${r.fail ? ', ' + r.fail + ' failed' : ''}`);
    clearSelection();
    if (action === 'ban' || action === 'unban') setTimeout(() => location.reload(), 600);
  } else KR.toast(d.error || 'Error', 'error');
}

function openBulkBan() {
  const pids = getSelectedPids();
  if (!pids.length) return;
  const reason = prompt(`Ban reason for ${pids.length} player(s):`);
  if (reason === null) return;
  const dur = prompt('Duration in hours (0 = permanent):', '24');
  if (dur === null) return;
  bulkAction('ban', { reason: reason || 'Rule violation', duration_hours: parseInt(dur) || 24 });
}

function openBulkGift() {
  const pids = getSelectedPids();
  if (!pids.length) return;
  const xp = prompt(`XP amount for ${pids.length} player(s):`, '1000');
  if (xp === null) return;
  const msg = prompt('Message (optional):', '');
  if (msg === null) return;
  bulkAction('gift', { xp: parseInt(xp) || 1000, rarity: 0, message: msg });
}
</script>

{% endblock %}