Learn_System/js/notifications.js

/* ── Shared notification dropdown module ──────────────────────────── */
(function() {
  let _notifOpen = false;
  let _sse = null;

  const _ICONS = {
    achievement: { bg:'#FEF3C7', c:'#D97706',
      svg:'<svg class="ic" viewBox="0 0 24 24"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"/></svg>' },
    assignment: { bg:'#DBEAFE', c:'#2563EB',
      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="9" y1="13" x2="15" y2="13"/><line x1="9" y1="17" x2="12" y2="17"/></svg>' },
    grade: { bg:'#DCFCE7', c:'#16A34A',
      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>' },
    revision: { bg:'#FEE2E2', c:'#DC2626',
      svg:'<svg class="ic" viewBox="0 0 24 24"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>' },
    submission: { bg:'#E0F2FE', c:'#0284C7',
      svg:'<svg class="ic" viewBox="0 0 24 24"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>' },
    session: { bg:'rgba(155,93,229,.12)', c:'#9B5DE5',
      svg:'<svg class="ic" viewBox="0 0 24 24"><polyline points="22 12 18 12 15 21 9 3 6 12 2 12"/></svg>' },
    join: { bg:'#F0FDF4', c:'#16A34A',
      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2"/><circle cx="9" cy="7" r="4"/><line x1="19" y1="8" x2="19" y2="14"/><line x1="22" y1="11" x2="16" y2="11"/></svg>' },
    announcement: { bg:'#EDE9FE', c:'#7C3AED',
      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 11.9a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 1h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9a16 16 0 0 0 6.29 6.29l1.36-1.36a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>' },
  };
  function _icon(type) {
    const t = _ICONS[type] || { bg:'rgba(155,93,229,.1)', c:'#9B5DE5',
      svg:'<svg class="ic" viewBox="0 0 24 24"><path d="M18 8A6 6 0 0 0 6 8c0 7-3 9-3 9h18s-3-2-3-9"/><path d="M13.73 21a2 2 0 0 1-3.46 0"/></svg>' };
    return `<div class="notif-icon" style="--ni:${t.bg};--nc:${t.c}">${t.svg}</div>`;
  }

  function renderNotifDrop(data) {
    const drop  = document.getElementById('notif-drop');
    const badge = document.getElementById('notif-badge');
    if (!drop || !badge) return;
    if (data.unread > 0) { badge.textContent = data.unread > 9 ? '9+' : data.unread; badge.style.display = ''; }
    else badge.style.display = 'none';
    drop.innerHTML = `
      <div class="notif-drop-header">
        <div class="notif-drop-header-left">
          <span class="notif-drop-title">Уведомления</span>
          ${data.unread > 0 ? `<span class="notif-unread-badge">${data.unread}</span>` : ''}
        </div>
        ${data.unread > 0 ? `<button class="notif-read-all" onclick="LS.notif.markAllRead()">Отметить все прочитанными</button>` : ''}
      </div>
      ${data.notifications.length ? data.notifications.map(n => `
        <a class="notif-item${n.is_read ? '' : ' unread'}" href="${LS.safeHref(n.link)}" onclick="LS.notif.click(event,${n.id},'${LS.safeHref(n.link)}')">
          ${_icon(n.type)}
          <div class="notif-body">
            <div class="notif-msg">${LS.esc(n.message)}</div>
            <div class="notif-time">${LS.fmtRelTime(n.created_at)}</div>
          </div>
        </a>`).join('') : '<div class="notif-empty">Уведомлений нет</div>'}`;
  }

  async function load() {
    try { renderNotifDrop(await LS.getNotifications()); } catch {}
  }

  function toggle() {
    const drop = document.getElementById('notif-drop');
    if (!drop) return;
    _notifOpen = !_notifOpen;
    if (_notifOpen) {
      const btn = document.getElementById('notif-btn');
      if (btn) {
        const r = btn.getBoundingClientRect();
        const vh = window.innerHeight;
        // Anchor bottom of dropdown to button bottom, but don't go above viewport
        const bottom = vh - r.bottom;
        drop.style.top  = 'auto';
        drop.style.bottom = Math.max(8, bottom) + 'px';
        drop.style.left = (r.right + 8) + 'px';
      }
      drop.style.display = 'block';
      load();
    } else {
      drop.style.display = 'none';
    }
  }

  async function clickNotif(e, id, link) {
    e.preventDefault();
    await LS.markNotifRead(id).catch(() => {});
    await load();
    if (link && link !== '#') window.location.href = link;
  }

  async function markAllRead() {
    await LS.markAllNotifsRead().catch(() => {});
    await load();
  }

  let _inited = false;
  function init() {
    if (_inited) return;
    _inited = true;
    // Note: button already has onclick="LS.notif.toggle()" in HTML
    // Close on outside click
    document.addEventListener('click', e => {
      const drop = document.getElementById('notif-drop');
      if (!drop || !_notifOpen) return;
      if (!e.target.closest('#notif-drop') && !e.target.closest('#notif-btn')) {
        _notifOpen = false;
        drop.style.display = 'none';
      }
    });

    // SSE real-time
    _sse = LS.connectSSE(ev => {
      if (ev.type) load();
    });

    // Initial load
    load();
  }

  // Expose as LS.notif
  window.LS = window.LS || {};
  LS.notif = { init, toggle, load, click: clickNotif, markAllRead };
})();