{% extends "admin/admin_base.html" %}
{% block title %}{{ profile.Username }} — KittyRec Admin{% endblock %}
{% block head %}
<style>
  .profile-header { display:flex; align-items:flex-start; gap:1.5rem; margin-bottom:1.5rem; }
  .profile-avatar { width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,var(--purple),var(--teal)); display:flex; align-items:center; justify-content:center; font-size:1.8rem; flex-shrink:0; border:2px solid var(--border); overflow:hidden; position:relative; cursor:pointer; }
  .profile-avatar img { width:100%; height:100%; object-fit:cover; }
  .profile-avatar .avatar-overlay { position:absolute; inset:0; background:rgba(0,0,0,.55); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .15s; font-size:.65rem; color:#fff; text-align:center; }
  .profile-avatar:hover .avatar-overlay { opacity:1; }
  .profile-meta h2 { font-size:1.4rem; font-weight:800; }
  .profile-meta .sub { color:var(--text2); font-size:.85rem; }
  .profile-fields { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:.75rem; }
  .field-box { background:var(--bg3); border:1px solid var(--border); border-radius:8px; padding:.75rem 1rem; }
  .field-box .label { font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.8px; color:var(--text3); margin-bottom:.25rem; }
  .field-box .val { font-size:1rem; font-weight:700; }
  .log-entry { display:flex; gap:.75rem; align-items:flex-start; padding:.5rem 0; border-bottom:1px solid var(--bg3); font-size:.82rem; }
  .log-entry:last-child { border-bottom:none; }
  .gift-row td { font-size:.8rem; }
</style>
{% endblock %}

{% block content %}
<div class="page-header">
  <div class="flex items-center gap-2">
    <a href="/admin/players" class="btn btn-ghost btn-sm">← Players</a>
    <h1>Player Detail</h1>
  </div>
</div>

<div class="card" style="margin-bottom:1.5rem">
  <div class="profile-header">
    <div class="profile-avatar" id="avatar-wrap" title="Click to change photo" onclick="document.getElementById('avatar-file').click()">
      <span id="avatar-letter">{{ profile.Username[0]|upper }}</span>
      <img id="avatar-img" src="/alt/{{ profile.Id }}" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%" onerror="this.remove()">
      <div class="avatar-overlay">Change</div>
    </div>
    <input type="file" id="avatar-file" accept="image/*" style="display:none" onchange="uploadAvatar(this)">
    <div class="profile-meta">
      <h2>{{ profile.Username }}
        {% if profile.Developer %}<span class="badge badge-yellow">Dev</span>{% endif %}
        {% if profile.Banned %}<span class="badge badge-red">Banned</span>{% endif %}
      </h2>
      <div class="sub">{{ profile.DisplayName }} &nbsp;·&nbsp; ID #{{ profile.Id }}</div>
      {% if is_online %}
      <div style="margin-top:.35rem"><span class="badge badge-green"><span class="live-dot"></span> Online{% if cur_session %} — {{ cur_session.name }}{% endif %}</span></div>
      {% else %}
      <div style="margin-top:.35rem"><span class="badge badge-gray">Offline</span></div>
      {% endif %}
    </div>
    <div class="flex gap-1 ml-auto" style="flex-wrap:wrap">
      {% if is_online %}
      <button class="btn btn-ghost btn-sm" onclick="disconnectPlayer({{ profile.Id }})">Disconnect WS</button>
      {% endif %}
      {% if not profile.Banned %}
      <button class="btn btn-red btn-sm" onclick="openBanModal({{ profile.Id }}, '{{ profile.Username }}')">Ban</button>
      {% elif SCOPE_ADMIN in scopes %}
      <button class="btn btn-green btn-sm" onclick="unban()">Unban</button>
      {% endif %}
      {% if SCOPE_ADMIN in scopes %}
      <button class="btn btn-ghost btn-sm" id="dev-btn" onclick="toggleDev()">{{ 'Remove Dev' if profile.Developer else 'Grant Dev' }}</button>
      <button class="btn btn-primary btn-sm" onclick="openGiftModal({{ profile.Id }}, '{{ profile.Username }}')">Gift</button>
      {% endif %}
    </div>
  </div>

  <div class="profile-fields">
    <div class="field-box">
      <div class="label">Level</div>
      <div class="val" style="color:var(--purple-l)">{{ profile.Level }}</div>
    </div>
    <div class="field-box">
      <div class="label">XP</div>
      <div class="val">{{ "{:,}".format(profile.XP) }}</div>
    </div>
    <div class="field-box">
      <div class="label">Joined</div>
      <div class="val" style="font-size:.85rem">{{ (profile.CreatedAt or '—')[:10] }}</div>
    </div>
    <div class="field-box">
      <div class="label">Last Login</div>
      <div class="val" style="font-size:.85rem">{{ (profile.LastLogin or '—')[:16].replace('T',' ') }}</div>
    </div>
    <div class="field-box">
      <div class="label">Tokens</div>
      <div class="val" style="color:var(--teal)">{{ "{:,}".format(profile.get('tokens') or profile.get('Tokens') or 0) }}</div>
    </div>
    <div class="field-box">
      <div class="label">Bio</div>
      <div class="val" style="font-size:.82rem;font-weight:400;color:var(--text2)">{{ profile.Bio or '—' }}</div>
    </div>
    {% if profile.Banned %}
    <div class="field-box" style="border-color:rgba(239,68,68,.3)">
      <div class="label" style="color:var(--red)">Ban Reason</div>
      <div class="val" style="font-size:.82rem;font-weight:400;color:var(--red)">{{ profile.BanReason or '—' }}</div>
    </div>
    <div class="field-box" style="border-color:rgba(239,68,68,.3)">
      <div class="label" style="color:var(--red)">Banned Until</div>
      <div class="val" style="font-size:.82rem;color:var(--red)">{{ profile.BannedUntil or 'Permanent' }}</div>
    </div>
    {% endif %}
  </div>
</div>

<div class="grid-2" style="gap:1.5rem">
  {% if SCOPE_ADMIN in scopes %}
  <div class="card">
    <div class="section-head"><h2>Admin Notes</h2></div>
    <div id="notes-list" style="margin-bottom:.75rem"></div>
    <div style="display:flex;gap:.5rem;padding:0 0 .5rem">
      <input type="text" id="note-input" placeholder="Add a note…" maxlength="500" style="flex:1">
      <button class="btn btn-primary btn-sm" onclick="addNote()">Add</button>
    </div>
  </div>
  {% endif %}

  <div class="card">
    <div class="section-head"><h2>Activity Timeline</h2><button class="btn btn-ghost btn-sm" onclick="loadTimeline()">Load</button></div>
    <div id="timeline-container" style="max-height:340px;overflow-y:auto">
      <p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Click Load to fetch activity</p>
    </div>
  </div>

  <div class="card">
    <div class="section-head"><h2>Ban Log</h2><span class="badge badge-gray">{{ ban_log|length }}</span></div>
    {% if ban_log %}
    {% for b in ban_log %}
    <div class="log-entry">
      <span style="color:var(--text3);white-space:nowrap;font-size:.72rem">{{ b.created_at[:16] if b.created_at else '—' }}</span>
      {% if b.action == 'ban' %}<span class="badge badge-red">Ban</span>{% else %}<span class="badge badge-green">Unban</span>{% endif %}
      <span style="flex:1;color:var(--text2)">{{ b.reason or '—' }}</span>
      <span style="color:var(--text3);font-size:.72rem">{{ b.admin_name or '—' }}</span>
    </div>
    {% endfor %}
    {% else %}
    <p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">No ban history</p>
    {% endif %}
  </div>

  <div class="card">
    <div class="section-head"><h2>Recent Gifts</h2><span class="badge badge-purple">{{ gifts|length }}</span></div>
    {% if gifts %}
    <div class="table-wrap">
      <table>
        <thead><tr><th>Date</th><th>XP</th><th>Item</th><th>Status</th></tr></thead>
        <tbody>
          {% for g in gifts[:20] %}
          <tr class="gift-row">
            <td style="color:var(--text3)">{{ g.created_at[:10] if g.created_at else '—' }}</td>
            <td style="color:var(--yellow)">+{{ "{:,}".format(g.xp) }}</td>
            <td style="color:var(--text2)">{{ g.equipment_prefab_name or '—' }}</td>
            <td>{% if g.consumed %}<span class="badge badge-green">Opened</span>{% else %}<span class="badge badge-gray">Pending</span>{% endif %}</td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% else %}
    <p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">No gifts</p>
    {% endif %}
  </div>
</div>

{% if SCOPE_ADMIN in scopes %}
<div class="grid-2" style="gap:1rem;margin-bottom:1rem">
  <div class="card">
    <div class="section-head"><h2>Security</h2><button class="btn btn-ghost btn-sm" onclick="loadSecurity()">Refresh</button></div>
    <div id="security-container"><p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Loading…</p></div>
  </div>
  <div class="card">
    <div class="section-head"><h2>Discord</h2><button class="btn btn-ghost btn-sm" onclick="loadDiscord()">Refresh</button></div>
    <div id="discord-container"><p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Loading…</p></div>
  </div>
</div>
<div class="card" style="margin-bottom:1rem">
  <div class="section-head"><h2>Inventory</h2><button class="btn btn-ghost btn-sm" onclick="loadInventory()">Load</button></div>
  <div id="inventory-container"><p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Click Load</p></div>
</div>
<div class="card" style="margin-bottom:1rem">
  <div class="section-head"><h2>Recent Chats</h2><button class="btn btn-ghost btn-sm" onclick="loadChats()">Load</button></div>
  <div id="chats-container" style="max-height:300px;overflow-y:auto"><p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Click Load</p></div>
</div>
<div class="card" style="margin-bottom:1rem">
  <div class="section-head"><h2>Social Graph</h2><button class="btn btn-ghost btn-sm" onclick="loadSocial()">Refresh</button></div>
  <div id="social-container"><p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Loading…</p></div>
</div>
<div class="card" style="margin-bottom:1rem">
  <div class="section-head"><h2>Gift Caps</h2><button class="btn btn-ghost btn-sm" onclick="loadGiftCaps()">Refresh</button></div>
  <div id="giftcaps-container"><p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Loading…</p></div>
</div>
<div class="card" style="margin-bottom:1rem">
  <div class="section-head">
    <h2>Settings</h2>
    <div class="flex gap-1">
      <button class="btn btn-ghost btn-sm" onclick="loadSettings()">Refresh</button>
      <button class="btn btn-teal btn-sm" onclick="forceOOBE()">Force OOBE</button>
      <button class="btn btn-ghost btn-sm" id="screen-mode-btn" onclick="toggleScreenMode()">Screen Mode</button>
    </div>
  </div>
  <div id="settings-container"><p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Loading…</p></div>
  <div style="display:flex;gap:.5rem;margin-top:.75rem">
    <input type="text" id="new-setting-key" placeholder="Key" style="flex:1">
    <input type="text" id="new-setting-val" placeholder="Value" style="flex:1">
    <button class="btn btn-primary btn-sm" onclick="addSetting()">Set</button>
  </div>
</div>
{% endif %}

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

{% if SCOPE_ADMIN in scopes %}
{% include 'admin/partials/gift_modal.html' %}
{% endif %}
{% endblock %}

{% block scripts %}
<script>
const PID = {{ profile.Id }};
document.addEventListener('DOMContentLoaded', () => {
  loadNotes();
  {% if SCOPE_ADMIN in scopes %}
  loadSecurity();
  loadDiscord();
  loadSocial();
  loadGiftCaps();
  loadSettings();
  {% endif %}
  const noteInput = document.getElementById('note-input');
  if (noteInput) noteInput.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); addNote(); } });
});

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

async function unban() {
  const d = await api('/admin/api/unban/' + PID);
  if (d.ok) { toast('Player unbanned'); setTimeout(() => location.reload(), 600); }
  else toast(d.error || 'Error', 'error');
}

async function toggleDev() {
  const d = await api('/admin/api/toggle_dev/' + PID);
  if (d.developer !== undefined) {
    document.getElementById('dev-btn').textContent = d.developer ? 'Remove Dev' : 'Grant Dev';
    toast(d.developer ? 'Dev status granted' : 'Dev status removed');
  }
}

async function loadNotes() {
  const list = document.getElementById('notes-list');
  if (!list) return;
  const notes = await KR.apiGet('/admin/api/player_notes/' + PID);
  if (!notes || !Array.isArray(notes)) { list.innerHTML = '<p style="color:var(--text3);font-size:.8rem;padding:.5rem 0">No notes</p>'; return; }
  list.innerHTML = notes.length ? notes.map(n => `<div style="display:flex;align-items:flex-start;gap:.5rem;padding:.4rem 0;border-bottom:1px solid var(--bg3);font-size:.82rem">
    <span style="flex:1;color:var(--text2)">${KR.escapeHtml(n.note)}</span>
    <span style="color:var(--text3);font-size:.7rem;white-space:nowrap">${KR.escapeHtml(n.created_by)} &bull; ${(n.created_at||'').slice(0,10)}</span>
    <button class="btn btn-ghost btn-sm" style="padding:1px 6px;font-size:.7rem;color:var(--red)" onclick="deleteNote(${n.id})">✕</button>
  </div>`).join('') : '<p style="color:var(--text3);font-size:.8rem;padding:.5rem 0">No notes</p>';
}
async function addNote() {
  const input = document.getElementById('note-input');
  const note = input.value.trim();
  if (!note) return;
  const r = await KR.apiPost('/admin/api/player_notes/' + PID, { note });
  if (r.ok) { input.value = ''; loadNotes(); }
  else KR.toast(r.error || 'Error', 'error');
}
async function deleteNote(nid) {
  const r = await fetch('/admin/api/player_notes/' + PID + '/' + nid, { method: 'DELETE' });
  const d = await r.json();
  if (d.ok) loadNotes();
  else KR.toast(d.error || 'Error', 'error');
}

async function loadTimeline() {
  const container = document.getElementById('timeline-container');
  container.innerHTML = '<p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">Loading…</p>';
  const events = await KR.apiGet('/admin/api/player_timeline/' + PID);
  if (!events || events.error) { container.innerHTML = '<p style="color:var(--red);font-size:.82rem;padding:1rem">Error loading timeline</p>'; return; }
  const typeMap = {ban:'red',unban:'green',gift:'yellow',account_created:'purple'};
  const labelMap = {ban:'Ban',unban:'Unban',gift:'Gift',account_created:'Created'};
  container.innerHTML = events.length ? events.map(e => {
    const color = typeMap[e.type] || 'gray';
    const label = labelMap[e.type] || e.type.toUpperCase();
    return `<div style="display:flex;gap:.75rem;align-items:flex-start;padding:.45rem 1rem;border-bottom:1px solid var(--bg3);font-size:.8rem">
      <span style="color:var(--text3);white-space:nowrap;font-size:.72rem;min-width:95px">${(e.timestamp||'').slice(0,16)}</span>
      <span class="badge badge-${color}" style="flex-shrink:0">${label}</span>
      <span style="color:var(--text2);word-break:break-word">${KR.escapeHtml(e.detail||'')}</span>
    </div>`;
  }).join('') : '<p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">No activity recorded</p>';
}

async function forceLogout() {
  if (!confirm('Revoke all cached login tokens? Player must re-login.')) return;
  const r = await KR.apiPost('/admin/api/revoke_tokens/' + PID);
  if (r.ok) { KR.toast('Revoked ' + r.revoked + ' token(s)'); loadSecurity(); }
  else KR.toast(r.error || 'Error', 'error');
}

async function loadSecurity() {
  const c = document.getElementById('security-container');
  c.innerHTML = '<p style="color:var(--text3);font-size:.82rem;padding:1rem">Loading…</p>';
  const d = await KR.apiGet('/admin/api/player_security/' + PID);
  if (!d || d.error) { c.innerHTML = '<p style="color:var(--red);font-size:.82rem;padding:1rem">Error</p>'; return; }
  let html = '';
  if (d.ips && d.ips.length) {
    html += '<div style="margin-bottom:.75rem"><div style="font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:.35rem">Login IPs</div>';
    html += d.ips.map(ip => `<div style="font-family:monospace;font-size:.78rem;color:var(--teal);padding:.2rem 0;border-bottom:1px solid var(--bg3)">${KR.escapeHtml(ip.ip_address)} <span style="color:var(--text3);font-size:.7rem">${(ip.last_seen||'').slice(0,10)}</span></div>`).join('');
    html += '</div>';
  }
  if (d.associated && d.associated.length) {
    html += '<div><div style="font-size:.72rem;font-weight:700;color:var(--yellow);text-transform:uppercase;margin-bottom:.35rem">Shared IPs</div>';
    html += d.associated.map(a => `<div style="display:flex;align-items:center;gap:.5rem;padding:.3rem 0;border-bottom:1px solid var(--bg3);font-size:.8rem">
      <a href="#" onclick="KR.openDrawer(${a.id});return false" style="font-weight:600;color:var(--text)">${KR.escapeHtml(a.username)}</a>
      <span style="color:var(--text3);font-size:.72rem">#${a.id}</span>
      ${a.banned ? '<span class="badge badge-red">Banned</span>' : ''}
      <span style="color:var(--text3);font-size:.7rem;margin-left:auto">${a.shared_ips.slice(0,2).join(', ')}</span>
    </div>`).join('');
    html += '</div>';
  }
  if (!html) html = '<p style="color:var(--text3);font-size:.82rem;padding:.5rem 0">No security data</p>';
  html += '<div style="margin-top:.75rem;padding-top:.75rem;border-top:1px solid var(--bg3)"><button class="btn btn-red btn-sm" onclick="forceLogout()">Force Logout (Revoke Tokens)</button></div>';
  c.innerHTML = html;
}

async function loadDiscord() {
  const c = document.getElementById('discord-container');
  c.innerHTML = '<p style="color:var(--text3);font-size:.82rem;padding:1rem">Loading…</p>';
  const d = await KR.apiGet('/admin/api/discord_info/' + PID);
  if (!d) { c.innerHTML = '<p style="color:var(--red);font-size:.82rem;padding:1rem">Error</p>'; return; }
  if (!d.linked) { c.innerHTML = '<p style="color:var(--text3);font-size:.82rem;padding:.5rem 0">No Discord linked</p>'; return; }
  c.innerHTML = `<div style="font-size:.82rem">
    <div style="font-weight:600;color:var(--text)">${KR.escapeHtml(d.discord_username)}</div>
    <div style="font-family:monospace;font-size:.72rem;color:var(--text3);margin:.2rem 0">${KR.escapeHtml(d.discord_user_id)}</div>
    <div style="color:var(--text3);font-size:.72rem">Linked ${(d.linked_at||'').slice(0,10)}</div>
    <button class="btn btn-red btn-sm" style="margin-top:.6rem" onclick="unlinkDiscord()">Unlink Discord</button>
  </div>`;
}

async function unlinkDiscord() {
  if (!confirm('Unlink Discord account?')) return;
  const r = await KR.apiPost('/admin/api/discord_unlink/' + PID);
  if (r.ok) { KR.toast('Discord unlinked'); loadDiscord(); }
  else KR.toast(r.error || 'Error', 'error');
}

async function loadInventory() {
  const c = document.getElementById('inventory-container');
  c.innerHTML = '<p style="color:var(--text3);font-size:.82rem;padding:1rem">Loading…</p>';
  const d = await KR.apiGet('/admin/api/player_inventory/' + PID);
  if (!d || d.error) { c.innerHTML = '<p style="color:var(--red);font-size:.82rem;padding:1rem">Error</p>'; return; }
  let html = '';
  if (d.equipment && d.equipment.length) {
    html += '<div style="margin-bottom:1rem"><div style="font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:.35rem">Equipment (' + d.equipment.length + ')</div><div style="display:flex;flex-wrap:wrap;gap:.3rem">';
    html += d.equipment.map(e => `<span class="badge ${e.favorited ? 'badge-yellow' : 'badge-gray'}" title="${KR.escapeHtml(e.guid)}">${KR.escapeHtml(e.prefab.replace(/[\[\]]/g,''))}</span>`).join('');
    html += '</div></div>';
  }
  if (d.avatar_items && d.avatar_items.length) {
    html += '<div style="margin-bottom:1rem"><div style="font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:.35rem">Avatar Items (' + d.avatar_items.length + ')</div><div style="display:flex;flex-wrap:wrap;gap:.3rem">';
    html += d.avatar_items.slice(0, 40).map(a => `<span class="badge badge-teal">${KR.escapeHtml(a.avatar_item_desc)}</span>`).join('');
    if (d.avatar_items.length > 40) html += `<span class="badge badge-gray">+${d.avatar_items.length - 40} more</span>`;
    html += '</div></div>';
  }
  if (d.consumables && d.consumables.length) {
    html += '<div><div style="font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:.35rem">Consumables</div><div style="display:flex;flex-wrap:wrap;gap:.3rem">';
    html += d.consumables.map(c => `<span class="badge badge-purple">${KR.escapeHtml(c.consumable_item_desc)} ×${c.quantity}</span>`).join('');
    html += '</div></div>';
  }
  if (!html) html = '<p style="color:var(--text3);font-size:.82rem;padding:.5rem 0">No inventory</p>';
  c.innerHTML = html;
}

async function loadChats() {
  const c = document.getElementById('chats-container');
  c.innerHTML = '<p style="color:var(--text3);font-size:.82rem;padding:1rem">Loading…</p>';
  const msgs = await KR.apiGet('/admin/api/player_chats/' + PID);
  if (!msgs || msgs.error) { c.innerHTML = '<p style="color:var(--red);font-size:.82rem;padding:1rem">Error</p>'; return; }
  c.innerHTML = msgs.length ? msgs.map(m => `<div style="display:flex;gap:.5rem;align-items:flex-start;padding:.4rem 1rem;border-bottom:1px solid var(--bg3);font-size:.8rem">
    <span style="color:var(--text3);white-space:nowrap;font-size:.72rem;min-width:95px">${(m.sent_at||'').slice(0,16)}</span>
    <span style="color:var(--purple-l);font-weight:600;white-space:nowrap">${KR.escapeHtml(m.sender_username||'#'+m.sender_id)}</span>
    <span style="color:var(--text2);word-break:break-word">${KR.escapeHtml(m.contents)}</span>
  </div>`).join('') : '<p style="color:var(--text3);font-size:.82rem;text-align:center;padding:1.5rem 0">No chat messages</p>';
}

async function loadSocial() {
  const c = document.getElementById('social-container');
  if (!c) return;
  c.innerHTML = '<p style="color:var(--text3);font-size:.82rem;padding:1rem">Loading…</p>';
  const d = await KR.apiGet('/admin/api/player_social/' + PID);
  if (!d || d.error) { c.innerHTML = '<p style="color:var(--red);font-size:.82rem;padding:1rem">Error</p>'; return; }
  const section = (label, color, items, keyId = 'id', keyName = 'username') => {
    if (!items || !items.length) return '';
    return `<div style="margin-bottom:.75rem"><div style="font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:.35rem">${label} (${items.length})</div><div style="display:flex;flex-wrap:wrap;gap:.3rem">` +
      items.map(i => `<a href="#" onclick="KR.openDrawer(${i[keyId]});return false" class="badge badge-${color}" style="text-decoration:none">${KR.escapeHtml(i[keyName])} #${i[keyId]}${i.banned ? ' — banned' : ''}</a>`).join('') +
      '</div></div>';
  };
  let html = section('Friends', 'green', d.friends)
    + section('Pending Sent', 'gray', d.pending_sent)
    + section('Pending Received', 'teal', d.pending_received)
    + section('Muted', 'yellow', d.muted)
    + section('Ignored', 'red', d.ignored)
    + section('Subscribed To', 'purple', d.subscribers);
  if (d.subscriber_count) html += `<div style="font-size:.78rem;color:var(--text3);margin-top:.35rem">${d.subscriber_count} subscriber(s) to this player</div>`;
  c.innerHTML = html || '<p style="color:var(--text3);font-size:.82rem;padding:.5rem 0">No social data</p>';
}

async function loadGiftCaps() {
  const c = document.getElementById('giftcaps-container');
  if (!c) return;
  c.innerHTML = '<p style="color:var(--text3);font-size:.82rem;padding:1rem">Loading…</p>';
  const d = await KR.apiGet('/admin/api/player_gift_caps/' + PID);
  if (!d || d.error) { c.innerHTML = '<p style="color:var(--red);font-size:.82rem;padding:1rem">Error</p>'; return; }
  const todayBadge = d.today >= 15 ? 'badge-red' : d.today >= 10 ? 'badge-yellow' : 'badge-green';
  let html = `<div style="display:flex;align-items:center;gap:.75rem;padding:.5rem 1rem;border-bottom:1px solid var(--bg3)">
    <span style="font-size:.82rem;color:var(--text2)">Today (${d.today_date})</span>
    <span class="badge ${todayBadge}">${d.today} / 15 gifts</span>
    {% if SCOPE_ADMIN in scopes %}<button class="btn btn-red btn-sm" onclick="resetGiftCap('${d.today_date}')">Reset Today</button>{% endif %}
  </div>`;
  if (d.history && d.history.length) {
    html += '<div style="padding:.5rem 1rem"><div style="font-size:.72rem;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:.35rem">14-Day History</div><div style="display:flex;flex-wrap:wrap;gap:.3rem">';
    html += d.history.map(h => `<span class="badge ${h.count >= 15 ? 'badge-red' : h.count >= 10 ? 'badge-yellow' : 'badge-gray'}" title="${h.date}">${h.date.slice(5)}: ${h.count}</span>`).join('');
    html += '</div></div>';
  }
  c.innerHTML = html;
}

async function resetGiftCap(date) {
  if (!confirm('Reset gift cap for ' + date + '? Player can earn gifts again.')) return;
  const r = await KR.apiPost('/admin/api/player_gift_caps/' + PID + '/reset', {date});
  if (r.ok) { KR.toast('Gift cap reset for ' + date); loadGiftCaps(); }
  else KR.toast(r.error || 'Error', 'error');
}

async function uploadAvatar(input) {
  const file = input.files[0];
  if (!file) return;
  const fd = new FormData();
  fd.append('image', file);
  const r = await fetch('/admin/api/set_profile_image/{{ profile.Id }}', { method: 'POST', body: fd });
  const d = await r.json();
  if (d.ok) {
    const img = document.getElementById('avatar-img') || document.createElement('img');
    img.id = 'avatar-img';
    img.src = '/api/images/v1/profile/{{ profile.Id }}?t=' + Date.now();
    img.style.display = '';
    const letter = document.getElementById('avatar-letter');
    if (letter) letter.remove();
    document.getElementById('avatar-wrap').prepend(img);
    toast('Profile photo updated');
  } else {
    toast(d.error || 'Upload failed', 'error');
  }
  input.value = '';
}

let _screenModeEnabled = false;
async function loadSettings() {
  const c = document.getElementById('settings-container');
  if (!c) return;
  c.innerHTML = '<p style="color:var(--text3);font-size:.82rem;padding:1rem">Loading…</p>';
  const settings = await KR.apiGet('/admin/api/player_settings/' + PID);
  if (!settings || settings.error) { c.innerHTML = '<p style="color:var(--red);font-size:.82rem;padding:1rem">Error</p>'; return; }
  const sm = settings.find(s => s.Key === 'screen_mode_user');
  _screenModeEnabled = sm && sm.Value === '1';
  const smBtn = document.getElementById('screen-mode-btn');
  if (smBtn) smBtn.textContent = _screenModeEnabled ? 'Disable Screen Mode' : 'Enable Screen Mode';
  if (!settings.length) { c.innerHTML = '<p style="color:var(--text3);font-size:.82rem;padding:1rem">No settings</p>'; return; }
  c.innerHTML = `<div class="table-wrap"><table>
    <thead><tr><th>Key</th><th>Value</th><th></th></tr></thead>
    <tbody>${settings.map(s => `<tr>
      <td style="font-family:monospace;font-size:.78rem;color:var(--teal)">${KR.escapeHtml(s.Key)}</td>
      <td style="font-size:.82rem;color:var(--text2);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${KR.escapeHtml(s.Value)}">${KR.escapeHtml(s.Value)}</td>
      <td style="white-space:nowrap">
        <button class="btn btn-ghost btn-sm" style="padding:2px 8px;font-size:.72rem" onclick="editSetting('${KR.escapeHtml(s.Key)}','${KR.escapeHtml(s.Value).replace(/'/g,"\\'")}')">Edit</button>
        <button class="btn btn-ghost btn-sm" style="padding:2px 8px;font-size:.72rem;color:var(--red)" onclick="deleteSetting('${KR.escapeHtml(s.Key)}')">Del</button>
      </td>
    </tr>`).join('')}
    </tbody></table></div>`;
}

async function addSetting() {
  const key = document.getElementById('new-setting-key').value.trim();
  const value = document.getElementById('new-setting-val').value;
  if (!key) { KR.toast('Key required', 'error'); return; }
  const d = await KR.apiPost('/admin/api/player_settings/' + PID, { action: 'set', key, value });
  if (d.ok) { document.getElementById('new-setting-key').value = ''; document.getElementById('new-setting-val').value = ''; KR.toast('Setting saved'); loadSettings(); }
  else KR.toast(d.error || 'Error', 'error');
}

function editSetting(key, currentVal) {
  const newVal = prompt(`Edit value for "${key}":`, currentVal);
  if (newVal === null) return;
  KR.apiPost('/admin/api/player_settings/' + PID, { action: 'set', key, value: newVal })
    .then(d => { if (d.ok) { KR.toast('Setting updated'); loadSettings(); } else KR.toast(d.error || 'Error', 'error'); });
}

async function deleteSetting(key) {
  if (!confirm(`Delete setting "${key}"?`)) return;
  const d = await KR.apiPost('/admin/api/player_settings/' + PID, { action: 'delete', key });
  if (d.ok) { KR.toast('Setting deleted'); loadSettings(); }
  else KR.toast(d.error || 'Error', 'error');
}

async function forceOOBE() {
  const d = await KR.apiPost('/admin/api/force_oobe/' + PID, {});
  if (d.ok) { KR.toast('OOBE forced complete'); loadSettings(); }
  else KR.toast(d.error || 'Error', 'error');
}

async function toggleScreenMode() {
  const enabled = !_screenModeEnabled;
  const d = await KR.apiPost('/admin/api/force_screen_mode/' + PID, { enabled });
  if (d.ok) { KR.toast('Screen mode ' + (enabled ? 'enabled' : 'disabled')); loadSettings(); }
  else KR.toast(d.error || 'Error', 'error');
}
</script>
{% endblock %}