{% extends 'admin/admin_base.html' %}
{% block title %}Discord Analytics — KittyRec Admin{% endblock %}
{% block content %}
<style>
.dc-wrap{padding:12px 16px;font-size:.82rem}
.dc-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.dc-title{font-size:1.15rem;font-weight:800;color:var(--kr-text)}
.dc-meta{font-size:.68rem;color:var(--kr-text-muted);margin-top:2px}
.dc-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:9px}
.dc-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:9px;margin-bottom:9px}
.kpi-row{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:10px}
.kpi{background:var(--kr-surface);border:1px solid var(--kr-border);border-radius:8px;padding:10px 13px;min-width:110px;flex:1;position:relative;overflow:hidden}
.kpi .kv{font-size:1.55rem;font-weight:800;line-height:1;color:var(--kr-text)}
.kpi .kl{font-size:.62rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--kr-text-muted);margin-top:3px}
.kpi .kt{font-size:.7rem;font-weight:700;margin-top:4px}
.kpi .kt.up{color:var(--kr-success)}.kpi .kt.dn{color:var(--kr-danger)}.kpi .kt.nc{color:var(--kr-text-muted)}
.kpi::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px}
.kpi.purple::after{background:var(--kr-purple)}.kpi.green::after{background:var(--kr-success)}
.kpi.teal::after{background:var(--kr-info)}.kpi.yellow::after{background:var(--kr-warning)}
.kpi.pink::after{background:var(--kr-accent)}
.kpi.purple .kv{color:var(--kr-purple-l)}.kpi.green .kv{color:var(--kr-success)}
.kpi.teal .kv{color:var(--kr-info)}.kpi.yellow .kv{color:var(--kr-warning)}
.kpi.pink .kv{color:var(--kr-accent)}
.chart-block{background:var(--kr-surface);border:1px solid var(--kr-border);border-radius:8px;padding:12px 14px;margin-bottom:9px;position:relative}
.ch-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:8px;gap:8px}
.ch-title{font-size:.72rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;color:var(--kr-text)}
.ch-sub{font-size:.64rem;color:var(--kr-text-muted);margin-top:2px}
.an-section{background:var(--kr-surface);border:1px solid var(--kr-border);border-radius:8px;margin-bottom:9px;overflow:hidden}
.an-sh{display:flex;align-items:center;justify-content:space-between;padding:7px 11px;border-bottom:1px solid var(--kr-border);font-size:.65rem;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--kr-text-muted)}
.an-tw{overflow-x:auto}
table.at{width:100%;border-collapse:collapse;font-size:.78rem}
table.at thead th{background:var(--kr-surface2);color:var(--kr-purple-l);padding:5px 9px;text-align:left;font-size:.64rem;font-weight:700;letter-spacing:.7px;text-transform:uppercase;border-bottom:1px solid var(--kr-border);white-space:nowrap}
table.at tbody td{padding:5px 9px;border-bottom:1px solid rgba(155,89,182,.07);vertical-align:middle}
table.at tbody tr:last-child td{border-bottom:none}
table.at tbody tr:hover{background:rgba(155,89,182,.05)}
.badge-join{background:rgba(16,185,129,.15);color:var(--kr-success);border:1px solid rgba(16,185,129,.3);border-radius:4px;padding:1px 6px;font-size:.65rem;font-weight:700}
.badge-leave{background:rgba(239,68,68,.12);color:var(--kr-danger);border:1px solid rgba(239,68,68,.25);border-radius:4px;padding:1px 6px;font-size:.65rem;font-weight:700}
.badge-linked{background:rgba(124,58,237,.15);color:var(--kr-purple-l);border:1px solid rgba(124,58,237,.3);border-radius:4px;padding:1px 6px;font-size:.65rem;font-weight:700}
.dim{color:var(--kr-text-muted)}
@media(max-width:768px){.dc-grid-2,.dc-grid-3{grid-template-columns:1fr}}
</style>

<div class="dc-wrap">
  <div class="dc-header">
    <div>
      <div class="dc-title">Discord Analytics</div>
      <div class="dc-meta" id="dc-meta">KittyNet server — loading…</div>
    </div>
    <button class="btn btn-ghost btn-sm" onclick="loadData()">Refresh</button>
  </div>

  <div class="kpi-row" id="kpi-row">
    <div class="kpi purple"><div class="kv" id="kpi-members">—</div><div class="kl">Members</div></div>
    <div class="kpi green"><div class="kv" id="kpi-growth">—</div><div class="kl">7-Day Growth</div></div>
    <div class="kpi teal"><div class="kv" id="kpi-messages">—</div><div class="kl">Total Messages</div></div>
    <div class="kpi yellow"><div class="kv" id="kpi-linked">—</div><div class="kl">Linked Accounts</div></div>
    <div class="kpi pink"><div class="kv" id="kpi-voice">—</div><div class="kl">Voice Sessions</div></div>
    <div class="kpi purple"><div class="kv" id="kpi-active-voice">—</div><div class="kl">In Voice Now</div></div>
  </div>

  <div class="chart-block">
    <div class="ch-header">
      <div><div class="ch-title">Member Growth</div><div class="ch-sub">Last 30 days — sampled every ~2h</div></div>
    </div>
    <canvas id="chart-growth" height="70"></canvas>
  </div>

  <div class="dc-grid-2">
    <div class="chart-block" style="margin-bottom:0">
      <div class="ch-header">
        <div><div class="ch-title">Message Activity</div><div class="ch-sub">Last 48 hours by hour</div></div>
      </div>
      <canvas id="chart-hourly" height="140"></canvas>
    </div>
    <div class="chart-block" style="margin-bottom:0">
      <div class="ch-header">
        <div><div class="ch-title">Top Channels</div><div class="ch-sub">By all-time message count</div></div>
      </div>
      <canvas id="chart-channels" height="140"></canvas>
    </div>
  </div>
  <div style="margin-bottom:9px"></div>

  <div class="dc-grid-2">
    <div class="chart-block" style="margin-bottom:0">
      <div class="ch-header">
        <div><div class="ch-title">Top Voice Channels</div><div class="ch-sub">Total hours logged</div></div>
      </div>
      <canvas id="chart-voice" height="140"></canvas>
    </div>
    <div class="an-section" style="margin-bottom:0">
      <div class="an-sh">Recent Join / Leave Events</div>
      <div class="an-tw">
        <table class="at">
          <thead><tr><th>User</th><th>Event</th><th>When</th></tr></thead>
          <tbody id="tbl-events"><tr><td colspan="3" class="dim" style="padding:12px 9px">Loading…</td></tr></tbody>
        </table>
      </div>
    </div>
  </div>
  <div style="margin-bottom:9px"></div>

  <div class="an-section">
    <div class="an-sh">Top Active Discord Users</div>
    <div class="an-tw">
      <table class="at">
        <thead><tr><th>#</th><th>Username</th><th>Messages</th><th>Last Active</th></tr></thead>
        <tbody id="tbl-users"><tr><td colspan="4" class="dim" style="padding:12px 9px">Loading…</td></tr></tbody>
      </table>
    </div>
  </div>

  <div class="an-section">
    <div class="an-sh">Discord-Linked KittyRec Accounts <span id="linked-count" style="font-weight:400;text-transform:none;letter-spacing:0;color:var(--kr-text-muted)"></span></div>
    <div class="an-tw">
      <table class="at">
        <thead><tr><th>Discord User</th><th>KittyRec Account</th><th>Level</th><th>Linked At</th></tr></thead>
        <tbody id="tbl-links"><tr><td colspan="4" class="dim" style="padding:12px 9px">Loading…</td></tr></tbody>
      </table>
    </div>
  </div>
</div>

{% endblock %}
{% block scripts %}
<script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.0/dist/chart.umd.min.js"></script>
<script>
const _BG      = '#0d0b1a';
const _SURFACE = '#12121f';
const _GRID    = '#1e1a3a';
const _TEXT    = '#e2e8f0';
const _MUTED   = '#94a3b8';
const _PURPLE  = '#8b5cf6';
const _PURPLE2 = '#6d3bef';
const _TEAL    = '#06b6d4';
const _GREEN   = '#10b981';
const _YELLOW  = '#f59e0b';

Chart.defaults.color = _MUTED;
Chart.defaults.borderColor = _GRID;
Chart.defaults.font.family = "'Segoe UI', system-ui, sans-serif";
Chart.defaults.font.size = 11;

const _charts = {};

function _mkChart(id, cfg) {
  if (_charts[id]) _charts[id].destroy();
  _charts[id] = new Chart(document.getElementById(id), cfg);
}

function _fmtTime(iso) {
  if (!iso) return '—';
  try {
    const d = new Date(iso);
    return d.toLocaleDateString('en-US', {month:'short', day:'numeric', hour:'2-digit', minute:'2-digit', hour12:false, timeZone:'UTC'}) + ' UTC';
  } catch { return iso; }
}

function _fmtDate(iso) {
  if (!iso) return '—';
  try {
    return new Date(iso).toLocaleDateString('en-US', {month:'short', day:'numeric', timeZone:'UTC'});
  } catch { return iso; }
}

async function loadData() {
  document.getElementById('dc-meta').textContent = 'Loading…';
  let d;
  try {
    const r = await fetch('/admin/api/discord_analytics');
    d = await r.json();
  } catch(e) {
    document.getElementById('dc-meta').textContent = 'Failed to load — ' + e;
    return;
  }
  if (d.error) {
    document.getElementById('dc-meta').textContent = 'Error: ' + d.error;
    return;
  }

  document.getElementById('dc-meta').textContent = 'KittyNet server — refreshed at ' + new Date().toLocaleTimeString();

  const s = d.summary;
  document.getElementById('kpi-members').textContent = s.members.toLocaleString();
  const gEl = document.getElementById('kpi-growth');
  gEl.textContent = (s.growth_7d >= 0 ? '+' : '') + s.growth_7d;
  gEl.className = 'kv ' + (s.growth_7d > 0 ? 'up' : s.growth_7d < 0 ? 'dn' : 'nc');
  document.getElementById('kpi-messages').textContent = s.total_messages.toLocaleString();
  document.getElementById('kpi-linked').textContent = s.linked_accounts;
  document.getElementById('kpi-voice').textContent = s.voice_sessions.toLocaleString();
  document.getElementById('kpi-active-voice').textContent = s.active_voice;

  _buildGrowth(d.growth);
  _buildHourly(d.hourly_48h);
  _buildChannels(d.top_channels);
  _buildVoice(d.top_voice);
  _buildEvents(d.member_events);
  _buildUsers(d.top_users);
  _buildLinks(d.discord_links);
}

function _buildGrowth(pts) {
  if (!pts || !pts.length) return;
  _mkChart('chart-growth', {
    type: 'line',
    data: {
      labels: pts.map(p => _fmtDate(p.t)),
      datasets: [{
        data: pts.map(p => p.c),
        borderColor: _PURPLE,
        backgroundColor: _PURPLE + '22',
        borderWidth: 2,
        fill: true,
        tension: 0.3,
        pointRadius: 0,
      }]
    },
    options: {
      responsive: true,
      plugins: {legend:{display:false}, tooltip:{mode:'index',intersect:false}},
      scales: {
        x: {grid:{color:_GRID}, ticks:{maxTicksLimit:8, color:_MUTED}},
        y: {grid:{color:_GRID}, ticks:{color:_MUTED, precision:0}},
      }
    }
  });
}

function _buildHourly(pts) {
  if (!pts || !pts.length) return;
  const labels = pts.map(p => {
    try { return new Date(p.h).toLocaleTimeString('en-US', {hour:'2-digit', minute:'2-digit', hour12:false, timeZone:'UTC'}); }
    catch { return p.h; }
  });
  const vals = pts.map(p => p.c);
  const maxV = Math.max(...vals);
  _mkChart('chart-hourly', {
    type: 'bar',
    data: {
      labels,
      datasets: [{
        data: vals,
        backgroundColor: vals.map(v => v === maxV ? _PURPLE : _PURPLE2 + 'cc'),
        borderRadius: 3,
      }]
    },
    options: {
      responsive: true,
      plugins: {legend:{display:false}, tooltip:{mode:'index',intersect:false}},
      scales: {
        x: {grid:{display:false}, ticks:{maxTicksLimit:12, color:_MUTED}},
        y: {grid:{color:_GRID}, ticks:{color:_MUTED, precision:0}},
      }
    }
  });
}

function _buildChannels(chs) {
  if (!chs || !chs.length) return;
  const top = chs.slice().reverse();
  _mkChart('chart-channels', {
    type: 'bar',
    data: {
      labels: top.map(c => '#' + c.name.slice(0, 20)),
      datasets: [{
        data: top.map(c => c.total),
        backgroundColor: top.map((_, i) => i === top.length - 1 ? _PURPLE : _PURPLE2 + 'cc'),
        borderRadius: 3,
      }]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      plugins: {legend:{display:false}, tooltip:{mode:'index',intersect:false}},
      scales: {
        x: {grid:{color:_GRID}, ticks:{color:_MUTED, precision:0}},
        y: {grid:{display:false}, ticks:{color:_MUTED}},
      }
    }
  });
}

function _buildVoice(chs) {
  if (!chs || !chs.length) return;
  const top = chs.slice().reverse();
  _mkChart('chart-voice', {
    type: 'bar',
    data: {
      labels: top.map(c => c.name.slice(0, 22)),
      datasets: [{
        data: top.map(c => c.hours),
        backgroundColor: _TEAL + 'cc',
        borderRadius: 3,
      }]
    },
    options: {
      indexAxis: 'y',
      responsive: true,
      plugins: {legend:{display:false}, tooltip:{callbacks:{label: ctx => ctx.parsed.x.toFixed(1) + 'h'}}},
      scales: {
        x: {grid:{color:_GRID}, ticks:{color:_MUTED}},
        y: {grid:{display:false}, ticks:{color:_MUTED}},
      }
    }
  });
}

function _buildEvents(evs) {
  const tb = document.getElementById('tbl-events');
  if (!evs || !evs.length) {
    tb.innerHTML = '<tr><td colspan="3" class="dim" style="padding:12px 9px">No events yet</td></tr>';
    return;
  }
  tb.innerHTML = evs.map(e =>
    `<tr><td>${e.username || '?'}</td>` +
    `<td><span class="${e.type === 'join' ? 'badge-join' : 'badge-leave'}">${e.type}</span></td>` +
    `<td class="dim">${_fmtTime(e.timestamp)}</td></tr>`
  ).join('');
}

function _buildUsers(users) {
  const tb = document.getElementById('tbl-users');
  if (!users || !users.length) {
    tb.innerHTML = '<tr><td colspan="4" class="dim" style="padding:12px 9px">No data yet</td></tr>';
    return;
  }
  tb.innerHTML = users.map((u, i) =>
    `<tr><td class="dim">${i + 1}</td>` +
    `<td>${u.username}</td>` +
    `<td><strong>${u.total.toLocaleString()}</strong></td>` +
    `<td class="dim">${_fmtTime(u.last)}</td></tr>`
  ).join('');
}

function _buildLinks(links) {
  const tb = document.getElementById('tbl-links');
  const ct = document.getElementById('linked-count');
  if (!links || !links.length) {
    tb.innerHTML = '<tr><td colspan="4" class="dim" style="padding:12px 9px">No accounts linked yet</td></tr>';
    ct.textContent = '';
    return;
  }
  ct.textContent = '— ' + links.length + ' account' + (links.length !== 1 ? 's' : '');
  tb.innerHTML = links.map(l =>
    `<tr><td>${l.discord_username} <span class="dim" style="font-size:.68rem">${l.discord_id}</span></td>` +
    `<td><a href="/admin/players/${l.profile_id || ''}" style="color:var(--kr-purple-l)">${l.game_username}</a></td>` +
    `<td class="dim">Lvl ${l.level}</td>` +
    `<td class="dim">${_fmtTime(l.linked_at)}</td></tr>`
  ).join('');
}

loadData();
</script>
{% endblock %}