Learn_System/frontend/js/admin/admin.js

'use strict';
// admin.html — main orchestrator (thin shell after Phase 2 section split).
// Section modules live in /js/admin/sections/*.js — admin.js wires them
// to the router + handles tabs not yet extracted (topics/audit/errors/health/classroom/avatars).
// Order of operation preserved: loads after api.js + sidebar.js + router.js + _shared.js + sections/*.js

  const { user, isTeacher, isAdmin } = LS.initPage();
  if (!isTeacher) { window.location.href = '/dashboard'; throw new Error(); }
  document.getElementById('page-sub').textContent =
    isAdmin ? 'Администратор · полный доступ' : 'Учитель · просмотр статистики';

  /* Populate shared context for section modules */
  AdminCtx.user      = user;
  AdminCtx.isTeacher = isTeacher;
  AdminCtx.isAdmin   = isAdmin;

  /* Admin-only tabs: show to everyone for discoverability, but lock for non-admins */
  const ADMIN_ONLY_TABS = ['btn-tab-subjects','btn-tab-permissions','btn-tab-shop','btn-tab-gam','btn-tab-tpl','btn-tab-sims','btn-tab-games'];
  const lockSvg = '<svg class="adm-lock" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>';
  ADMIN_ONLY_TABS.forEach(id => {
    const el = document.getElementById(id);
    if (!el) return;
    el.style.display = '';               // always visible now
    if (!isAdmin) {
      el.classList.add('locked');
      el.title = 'Только для администраторов';
      el.insertAdjacentHTML('beforeend', lockSvg);
    }
  });
  // Система group: visible to everyone too
  const sysGroup = document.getElementById('admin-nav-system-group');
  if (sysGroup) sysGroup.style.display = '';

  /* Collapsible nav groups — state persisted in localStorage */
  window.toggleAdminGroup = function (slug) {
    const g = document.querySelector(`.admin-nav-group[data-ng="${slug}"]`);
    if (!g) return;
    const collapsed = g.classList.toggle('collapsed');
    try { localStorage.setItem('ls_adm_g_' + slug, collapsed ? '1' : '0'); } catch {}
  };
  // Restore collapsed state on page load
  document.querySelectorAll('.admin-nav-group').forEach(g => {
    const slug = g.dataset.ng;
    try {
      if (localStorage.getItem('ls_adm_g_' + slug) === '1') g.classList.add('collapsed');
    } catch {}
  });
  LS.showBoardIfAllowed();
  LS.hideDisabledFeatures?.();
  LS.notif?.init();

  /* ─── Tabs → section bridge ─── */
  // Routes that map 1:1 to a section module (Phase 2-extracted).
  const ROUTE_TO_SECTION = {
    stats: 'stats',
    questions: 'questions',
    tests: 'tests',
    assignments: 'assignments',
    subjects: 'subjects',
    users: 'users',
    sessions: 'sessions',
    permissions: 'permissions',
    shop: 'shop',
    gam: 'gam',
    tpl: 'tpl',
    sims: 'sims',
    games: 'games',
    sublog: 'sublog',
  };

  function switchTab(btn, opts) {
    if (btn.classList.contains('locked')) {
      LS.toast('Этот раздел доступен только администраторам', 'warn');
      return;
    }
    document.querySelectorAll('.tab-pane').forEach(p => p.classList.remove('active'));
    document.querySelectorAll('.admin-nav-item').forEach(b => b.classList.remove('active'));
    const name = btn.dataset.tab;
    document.getElementById('tab-' + name).classList.add('active');
    btn.classList.add('active');
    // Dispatch to section module for the 13 Phase-2 tabs
    const secName = ROUTE_TO_SECTION[name];
    if (secName && AdminSections[secName]) {
      AdminSections[secName].init();
    }
    // System tabs (not yet extracted in Phase 2) — load inline
    if (name === 'topics')        loadTopics();
    else if (name === 'audit')    loadAuditLog();
    else if (name === 'errors')   loadErrorLog();
    else if (name === 'health')   loadHealth();
    else if (name === 'classroom'){ loadCrModuleState(); loadCrActiveSessions(); loadCrHistory(); }
    else if (name === 'avatars')  loadAvatarRequests();

    // Sync URL hash via router (silent so we don't recurse).
    if (!(opts && opts.fromRouter) && window.AdminRouter) {
      AdminRouter.navigate('#' + name, { silent: true });
    }
  }
  window.switchTab = switchTab;

  /* Cross-section orchestrator: navigate to Questions tab + open Q-modal pre-filled */
  async function goAddQuestion(slug) {
    const qBtn = document.querySelector('[data-tab="questions"]');
    switchTab(qBtn);
    document.getElementById('q-subject').value = slug;
    await AdminSections.questions.reload();
    AdminSections.questions.openModal();
    document.getElementById('qf-subject').value = slug;
    await AdminSections.questions.loadModalTopics();
  }
  window.goAddQuestion = goAddQuestion;

  /* ═══ TOPICS ═══════════════════════════════════════════════════════ */
  let _topicsSubjects = [];
  async function loadTopicSubjects() {
    if (_topicsSubjects.length) return;
    try {
      _topicsSubjects = await LS.getSubjects();
      const sel = document.getElementById('topics-subj-filter');
      sel.innerHTML = _topicsSubjects.map(s => `<option value="${s.id}">${esc(s.name)}</option>`).join('');
    } catch {}
  }
  async function loadTopics() {
    await loadTopicSubjects();
    const subjId = document.getElementById('topics-subj-filter').value;
    const el = document.getElementById('topics-list');
    el.innerHTML = LS.skeleton(4, 'row');
    try {
      const rows = await LS.api(`/api/admin/topics?subject_id=${subjId}`);
      document.getElementById('topics-count').textContent = rows.length + ' тем';
      if (!rows.length) { el.innerHTML = '<div style="padding:32px;text-align:center;color:var(--text-3)">Тем нет</div>'; return; }
      el.innerHTML = '<div style="display:flex;flex-direction:column;gap:6px">' + rows.map(t => `
        <div class="adm-panel" style="padding:12px 18px;margin:0;display:flex;align-items:center;gap:14px">
          <span style="font-size:0.75rem;color:var(--text-3);font-weight:700;min-width:28px">#${t.order_index}</span>
          <span style="flex:1;font-weight:600">${esc(t.name)}</span>
          <span style="font-size:0.78rem;color:var(--text-3)">${t.question_count} вопр.</span>
          <button class="adm-btn adm-btn-small" style="background:var(--border-h);color:var(--text-2);padding:5px 12px" onclick="renameTopic(${t.id},'${esc(t.name).replace(/'/g,"\\'")}')">
            <i data-lucide="pencil" style="width:12px;height:12px;vertical-align:-1px"></i>
          </button>
          <button class="adm-btn adm-btn-small" style="background:rgba(241,91,181,0.1);color:var(--pink);padding:5px 12px" onclick="deleteTopic(${t.id},'${esc(t.name).replace(/'/g,"\\'")}',${t.question_count})">
            <i data-lucide="trash-2" style="width:12px;height:12px;vertical-align:-1px"></i>
          </button>
        </div>`).join('') + '</div>';
      if (window.lucide) lucide.createIcons({ nodes: [el] });
    } catch (e) { el.innerHTML = `<div style="color:var(--pink)">${esc(e.message)}</div>`; }
  }
  function showAddTopic() { document.getElementById('topics-add-row').style.display = ''; document.getElementById('topics-new-name').focus(); }
  async function createTopic() {
    const name = document.getElementById('topics-new-name').value.trim();
    if (!name) return;
    const subjId = document.getElementById('topics-subj-filter').value;
    try {
      await LS.api('/api/admin/topics', { method:'POST', body: JSON.stringify({ subject_id: subjId, name }) });
      document.getElementById('topics-new-name').value = '';
      document.getElementById('topics-add-row').style.display = 'none';
      LS.toast('Тема создана', 'success');
      loadTopics();
    } catch (e) { LS.toast(e.message, 'error'); }
  }
  async function renameTopic(id, oldName) {
    const name = prompt('Новое название темы:', oldName);
    if (!name || name === oldName) return;
    try {
      await LS.api(`/api/admin/topics/${id}`, { method:'PATCH', body: JSON.stringify({ name }) });
      LS.toast('Тема переименована', 'success');
      loadTopics();
    } catch (e) { LS.toast(e.message, 'error'); }
  }
  async function deleteTopic(id, name, qcount) {
    if (qcount > 0) { LS.toast(`Нельзя удалить тему с ${qcount} вопросами`, 'warn'); return; }
    if (!await LS.confirm(`Удалить тему "${name}"?`, { danger: true })) return;
    try {
      await LS.api(`/api/admin/topics/${id}`, { method:'DELETE' });
      LS.toast('Тема удалена', 'success');
      loadTopics();
    } catch (e) { LS.toast(e.message, 'error'); }
  }
  window.showAddTopic = showAddTopic;
  window.createTopic = createTopic;
  window.renameTopic = renameTopic;
  window.deleteTopic = deleteTopic;

  /* ═══ BROADCAST ═════════════════════════════════════════════════════ */
  async function sendBroadcast() {
    const message = document.getElementById('bc-message').value.trim();
    if (!message) { LS.toast('Введите сообщение', 'warn'); return; }
    const role = document.getElementById('bc-role').value;
    const link = document.getElementById('bc-link').value.trim() || null;
    try {
      const r = await LS.api('/api/admin/broadcast', { method:'POST', body: JSON.stringify({ message, role, link }) });
      document.getElementById('bc-result').textContent = `Отправлено ${r.sent} пользователям`;
      document.getElementById('bc-message').value = '';
      LS.toast(`Уведомление отправлено ${r.sent} пользователям`, 'success');
    } catch (e) { LS.toast(e.message, 'error'); }
  }
  window.sendBroadcast = sendBroadcast;

  /* ═══ AUDIT LOG ════════════════════════════════════════════════════ */
  async function loadAuditLog() {
    const el = document.getElementById('audit-list');
    el.innerHTML = LS.skeleton(5, 'row');
    try {
      const rows = await LS.api('/api/admin/audit-log?limit=200');
      if (!rows.length) { el.innerHTML = '<div style="padding:32px;text-align:center;color:var(--text-3)">Журнал пуст</div>'; return; }
      const ACTION_LABELS = {
        'user.role_change': 'Смена роли', 'user.edit': 'Редактирование', 'user.ban': 'Блокировка',
        'user.unban': 'Разблокировка', 'user.delete': 'Удаление', 'user.clear_sessions': 'Очистка истории',
        'features.update': 'Фичи обновлены', 'topic.create': 'Создание темы', 'topic.update': 'Редакт. темы',
        'topic.delete': 'Удаление темы', 'broadcast': 'Рассылка',
      };
      const ACTION_COLORS = {
        'user.delete': 'var(--pink)', 'user.ban': 'var(--pink)', 'user.clear_sessions': 'var(--amber)',
      };
      el.innerHTML = `<div class="sl-wrap"><table class="sl-table">
        <thead><tr><th>Дата</th><th>Админ</th><th>Действие</th><th>Цель</th><th>Детали</th><th>IP</th></tr></thead>
        <tbody>${rows.map(r => {
          const dt = new Date(r.created_at);
          const ds = dt.toLocaleDateString('ru',{day:'numeric',month:'short'}) + ' ' + dt.toLocaleTimeString('ru',{hour:'2-digit',minute:'2-digit'});
          const acol = ACTION_COLORS[r.action] || 'var(--violet)';
          return `<tr>
            <td><span class="sl-date">${ds}</span></td>
            <td>${esc(r.admin_name || '—')}</td>
            <td><span style="color:${acol};font-weight:700;font-size:0.82rem">${ACTION_LABELS[r.action] || r.action}</span></td>
            <td style="font-size:0.82rem;color:var(--text-3)">${esc(r.target || '')}</td>
            <td style="font-size:0.82rem;max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap" title="${esc(r.detail || '')}">${esc(r.detail || '')}</td>
            <td style="font-size:0.78rem;color:var(--text-3);font-family:monospace">${esc(r.ip || '')}</td>
          </tr>`;
        }).join('')}</tbody></table></div>`;
    } catch (e) { el.innerHTML = `<div style="color:var(--pink)">${esc(e.message)}</div>`; }
  }
  async function clearAuditLog() {
    if (!await LS.confirm('Очистить весь аудит-лог?', { danger: true })) return;
    try {
      await LS.api('/api/admin/audit-log', { method:'DELETE' });
      document.getElementById('audit-list').innerHTML = '<div style="padding:32px;text-align:center;color:var(--text-3)">Журнал очищен</div>';
      LS.toast('Журнал очищен', 'success');
    } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
  }
  window.clearAuditLog = clearAuditLog;

  /* ═══ ERROR LOG ════════════════════════════════════════════════════ */
  async function loadErrorLog() {
    const el = document.getElementById('errors-list');
    el.innerHTML = LS.skeleton(3, 'row');
    try {
      const rows = await LS.api('/api/admin/error-log?limit=200');
      if (!rows.length) { el.innerHTML = '<div style="padding:32px;text-align:center;color:var(--text-3);font-size:0.88rem">Ошибок нет</div>'; return; }
      el.innerHTML = rows.map(r => {
        const dt = new Date(r.created_at);
        const ds = dt.toLocaleDateString('ru',{day:'numeric',month:'short'}) + ' ' + dt.toLocaleTimeString('ru',{hour:'2-digit',minute:'2-digit'});
        return `<div class="adm-panel" style="padding:14px 18px;margin-bottom:8px;border-left:3px solid var(--pink)">
          <div style="display:flex;align-items:center;gap:10px;margin-bottom:6px">
            <span style="font-size:0.78rem;color:var(--pink);font-weight:700">${r.method || ''} ${esc(r.route || '')}</span>
            <span style="font-size:0.72rem;color:var(--text-3);margin-left:auto">${ds}</span>
            ${r.user_id ? `<span style="font-size:0.72rem;color:var(--text-3)">user:${r.user_id}</span>` : ''}
          </div>
          <div style="font-size:0.88rem;font-weight:600;color:var(--text);margin-bottom:4px">${esc(r.message)}</div>
          ${r.stack ? `<details><summary style="font-size:0.75rem;color:var(--text-3);cursor:pointer">Stack trace</summary><pre style="font-size:0.72rem;color:var(--text-3);white-space:pre-wrap;max-height:200px;overflow:auto;margin-top:6px;padding:8px;background:rgba(0,0,0,0.02);border-radius:8px">${esc(r.stack)}</pre></details>` : ''}
        </div>`;
      }).join('');
    } catch (e) { el.innerHTML = `<div style="color:var(--pink)">${esc(e.message)}</div>`; }
  }
  async function clearErrorLog() {
    if (!await LS.confirm('Очистить журнал ошибок?', { danger: true })) return;
    try {
      await LS.api('/api/admin/error-log', { method:'DELETE' });
      document.getElementById('errors-list').innerHTML = '<div style="padding:32px;text-align:center;color:var(--text-3)">Журнал очищен</div>';
      LS.toast('Журнал очищен', 'success');
    } catch (e) { LS.toast('Ошибка: ' + e.message, 'error'); }
  }
  window.clearErrorLog = clearErrorLog;

  /* ═══ SYSTEM HEALTH ════════════════════════════════════════════════ */
  async function loadHealth() {
    const el = document.getElementById('health-content');
    el.innerHTML = LS.skeleton(3, 'row');
    try {
      const h = await LS.api('/api/admin/health');
      const fmtBytes = b => b > 1e9 ? (b/1e9).toFixed(1)+' GB' : b > 1e6 ? (b/1e6).toFixed(1)+' MB' : (b/1e3).toFixed(0)+' KB';
      const fmtUp = s => { const d=Math.floor(s/86400), hr=Math.floor(s%86400/3600), m=Math.floor(s%3600/60); return d>0?`${d}d ${hr}h`:hr>0?`${hr}h ${m}m`:`${m}m`; };
      el.innerHTML = `
        <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;margin-bottom:24px">
          <div class="adm-panel" style="padding:18px;margin:0;text-align:center">
            <div style="font-size:1.3rem;font-weight:800;font-family:'Unbounded',sans-serif;color:var(--green)">${fmtUp(h.uptime)}</div>
            <div style="font-size:0.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;margin-top:4px">Uptime</div>
          </div>
          <div class="adm-panel" style="padding:18px;margin:0;text-align:center">
            <div style="font-size:1.3rem;font-weight:800;font-family:'Unbounded',sans-serif;color:var(--violet)">${fmtBytes(h.db.sizeBytes)}</div>
            <div style="font-size:0.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;margin-top:4px">База данных</div>
          </div>
          <div class="adm-panel" style="padding:18px;margin:0;text-align:center">
            <div style="font-size:1.3rem;font-weight:800;font-family:'Unbounded',sans-serif">${fmtBytes(h.uploads.sizeBytes)}</div>
            <div style="font-size:0.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;margin-top:4px">Файлы</div>
          </div>
          <div class="adm-panel" style="padding:18px;margin:0;text-align:center">
            <div style="font-size:1.3rem;font-weight:800;font-family:'Unbounded',sans-serif;color:${h.recentErrors>0?'var(--pink)':'var(--green)'}">${h.recentErrors}</div>
            <div style="font-size:0.72rem;color:var(--text-3);font-weight:700;text-transform:uppercase;margin-top:4px">Ошибок за 24ч</div>
          </div>
        </div>
        <div style="display:grid;grid-template-columns:1fr 1fr;gap:14px">
          <div class="adm-panel" style="margin:0">
            <div class="adm-panel-title">Платформа</div>
            <table style="width:100%;font-size:0.88rem">
              <tr><td style="color:var(--text-3);padding:4px 0">Node.js</td><td style="font-weight:600">${h.node}</td></tr>
              <tr><td style="color:var(--text-3);padding:4px 0">OS</td><td style="font-weight:600">${h.platform}</td></tr>
              <tr><td style="color:var(--text-3);padding:4px 0">CPU ядра</td><td style="font-weight:600">${h.cpus}</td></tr>
              <tr><td style="color:var(--text-3);padding:4px 0">RAM использовано</td><td style="font-weight:600">${fmtBytes(h.memory.rss)}</td></tr>
              <tr><td style="color:var(--text-3);padding:4px 0">RAM heap</td><td style="font-weight:600">${fmtBytes(h.memory.heapUsed)}</td></tr>
              <tr><td style="color:var(--text-3);padding:4px 0">RAM свободно</td><td style="font-weight:600">${fmtBytes(h.freeMem)} / ${fmtBytes(h.totalMem)}</td></tr>
            </table>
          </div>
          <div class="adm-panel" style="margin:0">
            <div class="adm-panel-title">Данные</div>
            <table style="width:100%;font-size:0.88rem">
              <tr><td style="color:var(--text-3);padding:4px 0">Пользователей</td><td style="font-weight:600">${h.db.totalUsers}</td></tr>
              <tr><td style="color:var(--text-3);padding:4px 0">Всего сессий</td><td style="font-weight:600">${h.db.totalSessions}</td></tr>
              <tr><td style="color:var(--text-3);padding:4px 0">Сессий сегодня</td><td style="font-weight:600;color:var(--violet)">${h.db.todaySessions}</td></tr>
              <tr><td style="color:var(--text-3);padding:4px 0">Вопросов в базе</td><td style="font-weight:600">${h.db.totalQuestions}</td></tr>
            </table>
          </div>
        </div>`;
    } catch (e) { el.innerHTML = `<div style="color:var(--pink)">${esc(e.message)}</div>`; }
  }

  /* ════════════════════════════════════════════════
     ОНЛАЙН-УРОКИ (classroom admin)
  ════════════════════════════════════════════════ */
  let _crHistPage = 1, _crHistTotal = 0, _crHistPages = 0, _crHistSearch = '';
  let _crOpenDetailId = null, _crHistDebTimer = null;

  async function loadCrModuleState() {
    try {
      const features = await LS.api('/api/admin/features');
      const chk = document.getElementById('cr-master-chk');
      if (chk) chk.checked = features.classroom !== false;
    } catch(e) { /* silent */ }
  }

  async function crMasterToggle(enabled) {
    try {
      await LS.api('/api/admin/features', { method: 'PATCH', body: JSON.stringify({ classroom: enabled }) });
      LS.toast(enabled ? 'Модуль онлайн-уроков включён' : 'Модуль онлайн-уроков отключён', enabled ? 'success' : 'warning', 3000);
    } catch(e) {
      LS.toast('Ошибка: ' + e.message, 'error');
      const chk = document.getElementById('cr-master-chk');
      if (chk) chk.checked = !enabled;
    }
  }
  window.crMasterToggle = crMasterToggle;

  function fmtLiveDuration(createdAt) {
    const sec = Math.round((Date.now() - new Date(createdAt).getTime()) / 1000);
    return AdminCtx.fmtDuration(sec);
  }

  async function loadCrActiveSessions() {
    const el = document.getElementById('cr-live-list');
    try {
      const { sessions } = await LS.api('/api/classroom/admin/active');
      if (!sessions.length) {
        el.innerHTML = '<div class="empty">Нет активных уроков</div>';
        return;
      }
      el.innerHTML = sessions.map(s => {
        const dur = fmtLiveDuration(s.created_at);
        const title = s.title || `Урок #${s.id}`;
        const cls   = s.class_name ? `Класс: ${esc(s.class_name)}` : 'Личный урок';
        return `<div class="cr-live-card">
          <div class="cr-live-pulse"></div>
          <div class="cr-live-info">
            <div class="cr-live-title">${esc(title)}</div>
            <div class="cr-live-meta">${esc(s.teacher_name)} · ${cls}</div>
          </div>
          <div class="cr-live-badges">
            <span class="cr-badge cr-badge-online">
              <svg class="ic" viewBox="0 0 24 24" style="width:11px;height:11px"><path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><path d="M23 21v-2a4 4 0 0 0-3-3.87"/><path d="M16 3.13a4 4 0 0 1 0 7.75"/></svg>
              ${s.online_count}
            </span>
            <span class="cr-badge cr-badge-msgs">
              <svg class="ic" viewBox="0 0 24 24" style="width:11px;height:11px"><path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/></svg>
              ${s.message_count}
            </span>
            <span class="cr-badge cr-badge-dur">
              <svg class="ic" viewBox="0 0 24 24" style="width:11px;height:11px"><circle cx="12" cy="12" r="10"/><polyline points="12 6 12 12 16 14"/></svg>
              ${dur}
            </span>
          </div>
          <div class="cr-live-actions">
            <button class="btn-cr-end" onclick="adminEndSession(${s.id})">Завершить</button>
          </div>
        </div>`;
      }).join('');
    } catch(e) {
      el.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
    }
    if (window.lucide) lucide.createIcons();
  }

  async function adminEndSession(id) {
    if (!await LS.confirm(`Завершить урок #${id}? Все участники будут отключены.`, { title: 'Завершить урок', confirmText: 'Завершить' })) return;
    try {
      await LS.api(`/api/classroom/${id}`, { method: 'DELETE' });
      LS.toast('Урок завершён', 'success', 2500);
      loadCrActiveSessions();
    } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
  }
  window.adminEndSession = adminEndSession;

  function crHistDebounce() {
    clearTimeout(_crHistDebTimer);
    _crHistDebTimer = setTimeout(() => { _crHistPage = 1; loadCrHistory(); }, 350);
  }
  window.crHistDebounce = crHistDebounce;

  async function loadCrHistory(page) {
    const { fmtDate, fmtDuration } = AdminCtx;
    if (page) _crHistPage = page;
    _crHistSearch = (document.getElementById('cr-hist-q')?.value || '').trim();
    const el = document.getElementById('cr-hist-list');
    el.innerHTML = '<div class="spinner"></div>';
    try {
      const params = new URLSearchParams({ page: _crHistPage, limit: 20 });
      if (_crHistSearch) params.set('search', _crHistSearch);
      const { sessions, total, pages } = await LS.api('/api/classroom/admin/sessions?' + params);
      _crHistTotal = total; _crHistPages = pages;
      document.getElementById('cr-hist-count').textContent = `${total} уроков`;
      if (!sessions.length) {
        el.innerHTML = '<div class="empty">Нет завершённых уроков</div>';
        renderCrPagination();
        return;
      }
      el.innerHTML = sessions.map(s => {
        const title = s.title || `Урок #${s.id}`;
        const cls   = s.class_name ? `Класс: ${esc(s.class_name)}` : 'Личный урок';
        const dur   = fmtDuration(s.ended_at ? Math.round((new Date(s.ended_at)-new Date(s.created_at))/1000) : null);
        return `<div>
          <div class="cr-hist-row${_crOpenDetailId===s.id?' open':''}" onclick="toggleCrDetail(${s.id},this)">
            <div class="cr-hist-icon">
              <svg class="ic" viewBox="0 0 24 24" style="width:18px;height:18px;color:var(--violet)"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"/><line x1="8" y1="21" x2="16" y2="21"/><line x1="12" y1="17" x2="12" y2="21"/></svg>
            </div>
            <div class="cr-hist-main">
              <div class="cr-hist-title">${esc(title)}</div>
              <div class="cr-hist-meta">${esc(s.teacher_name)} · ${cls} · ${fmtDate(s.ended_at || s.created_at)}</div>
            </div>
            <div class="cr-hist-chips">
              <span class="cr-badge cr-badge-online">${s.participant_count} уч.</span>
              <span class="cr-badge cr-badge-msgs">${s.message_count} сообщ.</span>
              <span class="cr-badge cr-badge-dur">${dur}</span>
            </div>
            <svg class="cr-hist-chevron ic" viewBox="0 0 24 24"><polyline points="6 9 12 15 18 9"/></svg>
          </div>
          <div class="cr-detail-drawer${_crOpenDetailId===s.id?' open':''}" id="cr-detail-${s.id}">
            <div class="cr-detail-inner" id="cr-detail-inner-${s.id}">
              <div class="spinner"></div>
            </div>
          </div>
        </div>`;
      }).join('');
      if (_crOpenDetailId) {
        const dr = document.getElementById(`cr-detail-${_crOpenDetailId}`);
        if (dr) loadCrSessionDetail(_crOpenDetailId);
      }
      renderCrPagination();
    } catch(e) {
      el.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
    }
    if (window.lucide) lucide.createIcons();
  }
  window.loadCrHistory = loadCrHistory;

  function renderCrPagination() {
    const el = document.getElementById('cr-hist-pagination');
    if (_crHistPages <= 1) { el.innerHTML = ''; return; }
    const p = _crHistPage, total = _crHistPages;
    let html = '<div class="cr-pagination">';
    html += `<button class="cr-page-btn" onclick="loadCrHistory(${p-1})" ${p<=1?'disabled':''}>
      <svg class="ic" viewBox="0 0 24 24" style="width:14px;height:14px"><polyline points="15 18 9 12 15 6"/></svg>
    </button>`;
    const range = [];
    for (let i=1;i<=total;i++) {
      if (i===1||i===total||Math.abs(i-p)<=1) range.push(i);
      else if (range[range.length-1]!=='…') range.push('…');
    }
    range.forEach(r => {
      if (r==='…') html += `<span class="cr-page-info">…</span>`;
      else html += `<button class="cr-page-btn${r===p?' active':''}" onclick="loadCrHistory(${r})">${r}</button>`;
    });
    html += `<button class="cr-page-btn" onclick="loadCrHistory(${p+1})" ${p>=total?'disabled':''}>
      <svg class="ic" viewBox="0 0 24 24" style="width:14px;height:14px"><polyline points="9 18 15 12 9 6"/></svg>
    </button></div>`;
    el.innerHTML = html;
  }

  async function toggleCrDetail(id, rowEl) {
    const wasOpen = _crOpenDetailId === id;
    document.querySelectorAll('.cr-hist-row.open').forEach(r => r.classList.remove('open'));
    document.querySelectorAll('.cr-detail-drawer.open').forEach(d => { d.classList.remove('open'); d.style.maxHeight=''; });
    _crOpenDetailId = null;
    if (wasOpen) return;
    rowEl.classList.add('open');
    const dr = document.getElementById(`cr-detail-${id}`);
    if (dr) { dr.classList.add('open'); }
    _crOpenDetailId = id;
    await loadCrSessionDetail(id);
  }
  window.toggleCrDetail = toggleCrDetail;

  async function loadCrSessionDetail(id) {
    const { fmtDuration } = AdminCtx;
    const inner = document.getElementById(`cr-detail-inner-${id}`);
    if (!inner) return;
    inner.innerHTML = '<div class="spinner"></div>';
    try {
      const { session, stats, attendance, pages } = await LS.api(`/api/classroom/${id}/summary`);
      const dur = fmtDuration(stats.duration_sec);
      inner.innerHTML = `
        <div class="cr-detail-grid">
          <div class="cr-detail-stat"><div class="cr-detail-val">${stats.participant_count}</div><div class="cr-detail-label">Участников</div></div>
          <div class="cr-detail-stat"><div class="cr-detail-val">${stats.message_count}</div><div class="cr-detail-label">Сообщений</div></div>
          <div class="cr-detail-stat"><div class="cr-detail-val">${stats.page_count}</div><div class="cr-detail-label">Страниц</div></div>
          <div class="cr-detail-stat"><div class="cr-detail-val" style="font-size:1rem">${dur}</div><div class="cr-detail-label">Длительность</div></div>
        </div>
        ${attendance.length ? `
          <div class="section-title" style="font-size:0.72rem;margin-bottom:8px">Посещаемость</div>
          <div class="cr-attend-list">
            ${attendance.map(a => `
              <div class="cr-attend-row">
                <svg class="ic" viewBox="0 0 24 24" style="width:15px;height:15px;flex-shrink:0;color:var(--violet)"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
                <span class="cr-attend-name">${esc(a.user_name)}</span>
                <span class="cr-attend-time">${a.joined_at ? new Date(a.joined_at).toLocaleTimeString('ru-RU',{hour:'2-digit',minute:'2-digit'}) : '—'}</span>
                <span class="cr-attend-dur">${a.duration_sec ? fmtDuration(a.duration_sec) : (a.left_at ? '—' : '<span style="color:var(--green)">онлайн</span>')}</span>
              </div>
            `).join('')}
          </div>
        ` : ''}
        ${pages.length > 1 ? `
          <div class="section-title" style="font-size:0.72rem;margin:16px 0 8px">Страницы доски</div>
          <div class="cr-pages-list">
            ${pages.map(p => `
              <div class="cr-page-chip">
                <span class="cr-page-num">Стр. ${p.page_num}</span>
                <span class="cr-page-cnt">${p.stroke_count} штр.</span>
              </div>
            `).join('')}
          </div>
        ` : ''}
        <div class="cr-detail-actions">
          <button class="btn-cr-export" onclick="adminExportChat(${id})">
            <svg class="ic" viewBox="0 0 24 24" style="width:13px;height:13px;vertical-align:-2px"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>
            Экспорт чата
          </button>
          <button class="btn-cr-del" onclick="adminDeleteSession(${id})">
            <svg class="ic" viewBox="0 0 24 24" style="width:13px;height:13px;vertical-align:-2px"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6"/><path d="M10 11v6"/><path d="M14 11v6"/></svg>
            Удалить запись
          </button>
        </div>`;
    } catch(e) {
      inner.innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
    }
  }

  function adminExportChat(id) {
    window.open(`/api/classroom/${id}/chat/export`, '_blank');
  }
  window.adminExportChat = adminExportChat;

  async function adminDeleteSession(id) {
    if (!await LS.confirm('Удалить всю запись об этом уроке? Данные нельзя восстановить.', { title: 'Удалить урок', confirmText: 'Удалить', dangerous: true })) return;
    try {
      await LS.api(`/api/classroom/${id}/history`, { method: 'DELETE' });
      LS.toast('Урок удалён', 'success', 2500);
      _crOpenDetailId = null;
      loadCrHistory();
    } catch(e) { LS.toast('Ошибка: ' + e.message, 'error'); }
  }
  window.adminDeleteSession = adminDeleteSession;

  /* ── Avatar moderation ─────────────────────────────────────────────── */
  async function loadAvatarRequests() {
    const list = document.getElementById('av-list');
    list.innerHTML = '<div style="color:var(--muted);text-align:center;padding:40px 0;font-size:0.85rem">Загрузка...</div>';
    try {
      const rows = await LS.get('/api/avatar/pending');
      const badge = document.getElementById('av-badge');
      if (rows.length) {
        badge.textContent = rows.length;
        badge.style.display = 'inline-flex';
      } else {
        badge.style.display = 'none';
      }
      if (!rows.length) {
        list.innerHTML = '<div class="av-empty"><i data-lucide="check-circle" style="width:36px;height:36px;opacity:.3;display:block;margin:0 auto 10px"></i>Нет заявок на модерацию</div>';
        if (window.lucide) lucide.createIcons();
        return;
      }
      list.innerHTML = `<div class="av-grid">${rows.map(r => {
        const initials = (r.user_name||'LS').split(' ').slice(0,2).map(w=>(w[0]||'').toUpperCase()).join('') || 'LS';
        const curAvatar = r.current_avatar
          ? `<img src="/avatars/${esc(r.current_avatar)}" alt="">`
          : initials;
        const newAvatar = `<img src="/avatars/${esc(r.filename)}" alt="" onerror="this.parentElement.textContent='?'">`;
        const d = new Date(r.created_at).toLocaleString('ru', { day:'numeric', month:'short', hour:'2-digit', minute:'2-digit' });
        return `<div class="av-card" id="av-card-${r.id}">
          <div class="av-card-top">
            <div class="av-imgs">
              <div class="av-img-wrap">
                <span>Сейчас</span>
                <div class="av-img">${curAvatar}</div>
              </div>
              <svg class="av-arrow" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" width="16" height="16"><line x1="5" y1="12" x2="19" y2="12"/><polyline points="12 5 19 12 12 19"/></svg>
              <div class="av-img-wrap">
                <span>Новый</span>
                <div class="av-img">${newAvatar}</div>
              </div>
            </div>
          </div>
          <div>
            <div class="av-user-name">${esc(r.user_name||r.user_email)}</div>
            <div class="av-date">${esc(r.user_email)} · ${d}</div>
          </div>
          <div class="av-actions">
            <button class="av-approve" onclick="avatarApprove(${r.id})">Одобрить</button>
            <button class="av-reject"  onclick="avatarRejectPrompt(${r.id})">Отклонить</button>
          </div>
        </div>`;
      }).join('')}</div>`;
      if (window.lucide) lucide.createIcons();
    } catch {
      list.innerHTML = '<div class="av-empty">Ошибка загрузки</div>';
    }
  }

  async function avatarApprove(id) {
    const card = document.getElementById('av-card-' + id);
    if (card) card.style.opacity = '0.5';
    try {
      await LS.post('/api/avatar/' + id + '/approve', {});
      LS.toast('Аватар одобрен', 'success');
      loadAvatarRequests();
    } catch { LS.toast('Ошибка', 'error'); if (card) card.style.opacity = ''; }
  }
  window.avatarApprove = avatarApprove;

  function avatarRejectPrompt(id) {
    const reason = prompt('Причина отклонения (необязательно):') ?? null;
    if (reason === null) return;
    avatarReject(id, reason);
  }
  window.avatarRejectPrompt = avatarRejectPrompt;

  async function avatarReject(id, reason) {
    const card = document.getElementById('av-card-' + id);
    if (card) card.style.opacity = '0.5';
    try {
      await LS.patch('/api/avatar/' + id + '/reject', { reason });
      LS.toast('Аватар отклонён', 'info');
      loadAvatarRequests();
    } catch { LS.toast('Ошибка', 'error'); if (card) card.style.opacity = ''; }
  }
  window.avatarReject = avatarReject;

  /* ─── init ─── */
  // Initial #stats tab is .active in markup — section module will lazy-load on first switchTab.
  AdminSections.stats.init();
  loadAvatarRequests(); // load badge count on page open
  if (window.lucide) lucide.createIcons();

  /* ─── Hash router wiring ─── */
  (function initAdminRouter() {
    if (!window.AdminRouter) return;

    function activate(route) {
      const name = route || 'stats';
      const btn = document.querySelector('.admin-nav-item[data-tab="' + name + '"]');
      if (!btn) {
        console.warn('AdminRouter: unknown route', name);
        AdminRouter.navigate('#stats', { replace: true, silent: true });
        const fallback = document.querySelector('.admin-nav-item[data-tab="stats"]');
        if (fallback) switchTab(fallback, { fromRouter: true });
        return;
      }
      if (btn.classList.contains('locked')) {
        LS.toast('Этот раздел доступен только администраторам', 'warn');
        AdminRouter.navigate('#stats', { replace: true, silent: true });
        const fallback = document.querySelector('.admin-nav-item[data-tab="stats"]');
        if (fallback) switchTab(fallback, { fromRouter: true });
        return;
      }
      switchTab(btn, { fromRouter: true });
    }

    AdminRouter.on('change', (r) => activate(r.route));

    // Initial dispatch: respect existing hash, else default to #stats.
    const initial = AdminRouter.current();
    if (!initial.route) {
      AdminRouter.navigate('#stats', { replace: true, silent: true });
    } else if (initial.route !== 'stats') {
      activate(initial.route);
    }
  })();