Learn_System/frontend/js/admin/sections/sessions.js

'use strict';
/* admin → sessions section: sessions timeline + drawer detail */
(function () {
  'use strict';
  let inited = false;

  let allSessions  = [];
  // Phase 6: clicking a session row navigates to the deep page (#sessions/:id)
  // instead of toggling an inline drawer. The drawer rendering is gone.
  function gotoSession(id) {
    if (window.AdminRouter) AdminRouter.navigate('#sessions/' + id);
  }

  /* SVG icons (Lucide-style) — kept local to mirror users.js without coupling */
  const SESS_ICONS = {
    eye:   '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>',
    trash: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 6h18"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"/><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/><line x1="10" y1="11" x2="10" y2="17"/><line x1="14" y1="11" x2="14" y2="17"/></svg>',
  };

  /* Inject .row-actions / .row-action-btn styles only if users.js hasn't (sessions can render first). */
  function ensureRowActionsStyles() {
    if (document.getElementById('row-actions-style')) return;
    const s = document.createElement('style');
    s.id = 'row-actions-style';
    s.textContent = `
      .row-actions { opacity: 0; transition: opacity .15s ease; display: inline-flex; gap: 4px; vertical-align: middle; }
      tr:hover .row-actions, .sess-tl-item:hover .row-actions { opacity: 1; }
      tr.selected .row-actions, .sess-tl-item.open .row-actions { opacity: 1; }
      .row-action-btn { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); transition: background .12s ease, border-color .12s ease, color .12s ease; padding: 0; }
      .row-action-btn:hover { background: rgba(155,93,229,.08); border-color: var(--violet); color: var(--violet); }
      .row-action-btn:focus-visible { outline: 2px solid var(--violet); outline-offset: 1px; }
      .row-action-btn.danger:hover { background: rgba(239,68,68,.08); border-color: var(--red, #EF4444); color: var(--red, #EF4444); }
      .row-action-btn svg { width: 14px; height: 14px; pointer-events: none; }
      .row-action-btn:disabled { opacity: .5; cursor: wait; }
      .row-actions-cell { text-align: right; white-space: nowrap; padding-right: 12px; }
      @media (max-width: 768px) {
        .row-actions { display: none; }
      }
    `;
    document.head.appendChild(s);
  }

  async function load() {
    const subject = document.getElementById('t-subject').value;
    document.getElementById('t-body').innerHTML = '<div class="spinner"></div>';
    ensureRowActionsStyles();
    try {
      allSessions = await LS.adminGetSessions({ subject: subject || undefined });
      renderSessions();
    } catch (e) {
      document.getElementById('t-body').innerHTML = `<div class="error">Ошибка: ${esc(e.message)}</div>`;
    }
  }

  function sessPctRing(pct) {
    const { pctClass } = AdminCtx;
    const pc  = pctClass(pct);
    const colorMap = {'pct-hi':'var(--green)','pct-mid':'var(--amber)','pct-lo':'var(--pink)'};
    const color = colorMap[pc] || 'var(--text-3)';
    const circ = 106.8;
    const dash = (pct / 100 * circ).toFixed(1);
    return `<svg class="sess-tl-ring" width="48" height="48" viewBox="0 0 48 48">
      <circle cx="24" cy="24" r="17" fill="none" stroke="rgba(15,23,42,0.08)" stroke-width="4"/>
      <circle cx="24" cy="24" r="17" fill="none" stroke="${color}" stroke-width="4"
        stroke-dasharray="${dash} ${circ}" stroke-dashoffset="26.7" stroke-linecap="round"
        transform="rotate(-90 24 24)"/>
      <text x="24" y="28" text-anchor="middle" font-family="Unbounded,sans-serif" font-size="8" font-weight="800" fill="${color}">${pct}%</text>
    </svg>`;
  }

  function renderSessions() {
    const { MODES, fmtDate, fmtTime } = AdminCtx;
    const modeF   = document.getElementById('t-mode').value;
    const searchF = document.getElementById('t-search').value.toLowerCase();
    const filtered = allSessions.filter(s => {
      if (modeF && s.mode !== modeF) return false;
      if (searchF && !s.user_name.toLowerCase().includes(searchF) && !s.user_email.toLowerCase().includes(searchF)) return false;
      return true;
    });
    document.getElementById('t-count').textContent = `${filtered.length} тестов`;
    if (!filtered.length) {
      document.getElementById('t-body').innerHTML = '<div class="empty">Нет тестов</div>';
      return;
    }
    const groups = {};
    filtered.forEach(s => {
      const key = fmtDate(s.started_at);
      (groups[key] = groups[key] || []).push(s);
    });
    document.getElementById('t-body').innerHTML = Object.entries(groups).map(([date, sessions]) =>
      `<div class="sess-tl-day">${date}</div>
       <div class="sess-tl-wrap">${sessions.map(s => {
         const ring = s.percent !== null
           ? sessPctRing(s.percent)
           : `<div style="width:48px;height:48px;display:flex;align-items:center;justify-content:center;font-family:'Unbounded',sans-serif;font-size:0.85rem;font-weight:800;color:var(--text-3)">—</div>`;
         return `<div class="sess-tl-item" id="trow-${s.id}" onclick="gotoSession(${s.id})">
           ${ring}
           <div class="sess-tl-user">
             <div class="sess-tl-name">${esc(s.user_name)}</div>
             <div class="sess-tl-meta">${esc(s.subject_name||'?')} · <span class="mode-badge mode-${s.mode}">${MODES[s.mode]||s.mode}</span></div>
           </div>
           <div class="sess-tl-score">${s.score??'—'} / ${s.total}</div>
           <div class="sess-tl-time">${fmtTime(s.duration_sec)}</div>
           <div class="row-actions" onclick="event.stopPropagation()">
             <button type="button" class="row-action-btn" title="Открыть детали"
               onclick="event.stopPropagation();gotoSession(${s.id})">${SESS_ICONS.eye}</button>
             <button type="button" class="row-action-btn danger" title="Удалить сессию"
               onclick="event.stopPropagation();quickDeleteSession(${s.id},this)">${SESS_ICONS.trash}</button>
           </div>
         </div>`;
       }).join('')}</div>`
    ).join('');
  }

  async function quickDeleteSession(id, btn) {
    if (!await LS.confirm(
      'Удалить эту сессию? Все ответы и связанные данные будут удалены.\nЭто действие нельзя отменить.',
      { title: 'Удалить сессию', confirmText: 'Удалить' }
    )) return;
    btn.disabled = true;
    try {
      await LS.adminDeleteSession(id);
      LS.toast('Сессия удалена', 'success');
      // Refresh from server — keeps grouped layout consistent.
      await load();
    } catch (e) {
      LS.toast('Ошибка: ' + e.message, 'error');
      btn.disabled = false;
    }
  }

  // Expose handlers
  window.loadSessions = load;
  window.renderSessions = renderSessions;
  window.gotoSession = gotoSession;
  window.quickDeleteSession = quickDeleteSession;

  window.AdminSections = window.AdminSections || {};
  window.AdminSections.sessions = {
    init: async () => { if (inited) return; inited = true; await load(); },
    reload: load,
  };
})();