SHiNE-server/shine-UI/js/pages/notifications-view.js

import { createTopBar } from '../components/topbar.js';
import { renderUserAvatar } from '../components/avatar-image.js';
import { authService, state } from '../state.js';
import { loadProfileSnapshot } from '../services/user-profile-params.js';
import { makeProfileRoute, makeShineMessageRoute } from '../services/shine-routes.js';
import { formatListTime } from '../services/channels-ux.js';
import { iconHtml } from '../components/ui-icon.js';

const CONNECTION_CLOSE_FRIEND = 10;
const CONNECTION_UNCLOSE_FRIEND = 11;
const CONNECTION_FRIEND = 14;
const CONNECTION_UNFRIEND = 15;
const CONNECTION_FOLLOW = 30;
const CONNECTION_UNFOLLOW = 31;
const CONNECTION_SHINE_CONFIRMED = 70;
const CONNECTION_SHINE_UNCONFIRMED = 71;
const CONNECTION_OFFICIAL_CONFIRMED = 80;
const CONNECTION_OFFICIAL_UNCONFIRMED = 81;
const profileSnapshotCache = new Map();
const profileSnapshotPending = new Map();

function connectionActionLabel(typeCode) {
  switch (Number(typeCode)) {
    case CONNECTION_CLOSE_FRIEND: return 'Добавил(а) вас в близкие друзья';
    case CONNECTION_UNCLOSE_FRIEND: return 'Убрал(а) вас из близких друзей';
    case CONNECTION_FRIEND: return 'Добавил(а) вас в друзья';
    case CONNECTION_UNFRIEND: return 'Убрал(а) вас из друзей';
    case CONNECTION_SHINE_CONFIRMED: return 'Подтвердил(а), что вы сияющий';
    case CONNECTION_SHINE_UNCONFIRMED: return 'Снял(а) подтверждение «сияющий»';
    case CONNECTION_OFFICIAL_CONFIRMED: return 'Подтвердил(а) официальный статус аккаунта';
    case CONNECTION_OFFICIAL_UNCONFIRMED: return 'Снял(а) подтверждение официального статуса';
    default: return 'Изменил(а) связь с вами';
  }
}

function eventActionLabel(typeCode) {
  if (Number(typeCode) === CONNECTION_UNFOLLOW) return 'Отписался(-ась) от вашего канала';
  return 'Подписался(-ась) на ваш канал';
}

export const pageMeta = { id: 'notifications-view', title: 'Уведомления' };

function normalizeItem(item) {
  return {
    kind: String(item?.kind || ''),
    createdAtMs: Number(item?.createdAtMs || 0),
    sourceLogin: String(item?.sourceLogin || ''),
    sourceBlockchainName: String(item?.sourceBlockchainName || ''),
    sourceBlockNumber: Number(item?.sourceBlockNumber || 0),
    sourceBlockHash: String(item?.sourceBlockHash || ''),
    sourceMsgSubType: item?.sourceMsgSubType == null ? null : Number(item.sourceMsgSubType),
    sourceText: String(item?.sourceText || ''),
    connectionTypeCode: item?.connectionTypeCode == null ? null : Number(item.connectionTypeCode),
    targetLogin: String(item?.targetLogin || ''),
    targetBlockchainName: String(item?.targetBlockchainName || ''),
    targetBlockNumber: item?.targetBlockNumber == null ? null : Number(item.targetBlockNumber),
    targetBlockHash: String(item?.targetBlockHash || ''),
    profile: null,
    engagement: null,
  };
}

function profileField(snapshot, key) {
  const row = (Array.isArray(snapshot?.fields) ? snapshot.fields : [])
    .find((field) => String(field?.key || '') === key);
  return String(row?.value || '').trim();
}

async function loadCachedProfileSnapshot(login) {
  const cleanLogin = String(login || '').trim();
  if (!cleanLogin) return null;
  const key = cleanLogin.toLowerCase();
  if (profileSnapshotCache.has(key)) return profileSnapshotCache.get(key);
  if (profileSnapshotPending.has(key)) return profileSnapshotPending.get(key);

  const pending = loadProfileSnapshot(cleanLogin)
    .then((snapshot) => {
      profileSnapshotCache.set(key, snapshot || null);
      profileSnapshotPending.delete(key);
      return snapshot || null;
    })
    .catch(() => {
      profileSnapshotCache.set(key, null);
      profileSnapshotPending.delete(key);
      return null;
    });

  profileSnapshotPending.set(key, pending);
  return pending;
}

function normalizeEngagement(source) {
  if (!source || typeof source !== 'object') return null;
  const likesCount = Math.max(0, Number(source.likesCount || 0));
  const repliesCount = Math.max(0, Number(source.repliesCount || 0));
  const ratingsCount = Math.max(0, Number(source.ratingsCount || 0));
  const repostsCount = Math.max(0, Number(source.repostsCount ?? source.repostCount ?? 0));
  const sharesCount = Math.max(0, Number(source.sharesCount ?? source.shareCount ?? 0));

  const result = {
    likesCount: Number.isFinite(likesCount) ? likesCount : 0,
    repliesCount: Number.isFinite(repliesCount) ? repliesCount : 0,
    ratingsCount: Number.isFinite(ratingsCount) ? ratingsCount : 0,
    repostsCount: Number.isFinite(repostsCount) ? repostsCount : 0,
    sharesCount: Number.isFinite(sharesCount) ? sharesCount : 0,
  };

  return Object.values(result).some((count) => count > 0) ? result : null;
}

async function loadSourceEngagement(item) {
  const blockchainName = String(item?.sourceBlockchainName || '').trim();
  const blockNumber = Number(item?.sourceBlockNumber);
  const blockHash = String(item?.sourceBlockHash || '').trim();
  if (!blockchainName || !Number.isFinite(blockNumber) || blockNumber < 0 || !blockHash) return null;

  try {
    const payload = await authService.getMessageThread(
      { blockchainName, blockNumber, blockHash },
      0,
      0,
      1,
      String(state.session.login || '').trim(),
    );
    return normalizeEngagement(payload?.focus);
  } catch {
    return null;
  }
}

async function enrichItem(item, activeTab) {
  const [profile, engagement] = await Promise.all([
    loadCachedProfileSnapshot(item.sourceLogin),
    activeTab === 'replies' ? loadSourceEngagement(item) : Promise.resolve(null),
  ]);
  return { ...item, profile, engagement };
}

function renderEmpty(activeTab) {
  const card = document.createElement('article');
  card.className = 'stack notification-empty-state';
  const title = document.createElement('strong');
  title.textContent = activeTab === 'events' ? 'Пока нет событий' : activeTab === 'connections' ? 'Пока нет связей' : 'Пока нет ответов';
  const text = document.createElement('p');
  text.className = 'meta-muted';
  text.textContent = activeTab === 'events' ? 'Подписки и отписки от ваших каналов появятся здесь.' : activeTab === 'connections' ? 'Изменения дружбы и подтверждений появятся здесь.' : 'Когда кто-то ответит на ваше сообщение в канале или обсуждении, ответ появится здесь.';
  card.append(title, text);
  return card;
}

function renderAvatar(item) {
  const profile = item.profile;
  const avatar = profile?.avatar?.txId
    ? {
      ar: String(profile.avatar.txId || '').trim(),
      sha256Hex: String(profile.avatar.sha256Hex || '').trim().toLowerCase(),
    }
    : null;
  return renderUserAvatar({
    login: item.sourceLogin || 'unknown',
    firstName: profileField(profile, 'first_name'),
    lastName: profileField(profile, 'last_name'),
    avatar,
    size: 'md',
    className: 'notification-avatar',
  });
}

// Строка как в списке чатов: имя и время, ниже – что произошло и текст ответа.
function renderHead(item) {
  const profile = item.profile;
  const fullName = [profileField(profile, 'first_name'), profileField(profile, 'last_name')].filter(Boolean).join(' ')
    || item.sourceLogin || 'Пользователь';
  const head = document.createElement('div');
  head.className = 'notification-card__head';
  const name = document.createElement('strong');
  name.className = 'notification-card__name';
  name.textContent = fullName;
  head.append(name);
  const time = document.createElement('span');
  time.className = 'notification-card__time';
  time.textContent = formatListTime(item.createdAtMs);
  head.append(time);
  return head;
}

function renderEngagement(engagement) {
  if (!engagement) return null;

  const stats = [
    { key: 'likesCount', icon: 'heart', label: 'Лайки' },
    { key: 'repliesCount', icon: 'message', label: 'Ответы' },
    { key: 'repostsCount', icon: 'refresh', label: 'Репосты' },
    { key: 'sharesCount', icon: 'forward', label: 'Отправки' },
  ].filter(({ key }) => Number(engagement[key] || 0) > 0);

  if (!stats.length) return null;

  const row = document.createElement('div');
  row.className = 'notification-engagement';
  stats.forEach(({ key, icon, label }) => {
    const stat = document.createElement('span');
    stat.className = 'notification-engagement-item';
    stat.title = label;

    const iconEl = document.createElement('span');
    iconEl.className = 'notification-engagement-icon';
    iconEl.setAttribute('aria-hidden', 'true');
    iconEl.innerHTML = iconHtml(icon);

    const countEl = document.createElement('span');
    countEl.className = 'notification-engagement-count';
    countEl.textContent = String(engagement[key]);
    stat.append(iconEl, countEl);
    row.append(stat);
  });

  return row;
}

function notificationRoute(item, activeTab) {
  if (activeTab === 'events' || activeTab === 'connections') {
    const login = String(item?.sourceLogin || '').trim();
    return login ? makeProfileRoute(login) : '';
  }

  const blockchainName = String(item?.sourceBlockchainName || '').trim();
  const blockNumber = Number(item?.sourceBlockNumber);
  if (!blockchainName || !Number.isFinite(blockNumber) || blockNumber < 0) return '';

  return makeShineMessageRoute({
    messageBlockchainName: blockchainName,
    messageBlockNumber: blockNumber,
  });
}

function bindNotificationNavigation(row, routePath, navigate) {
  if (!routePath || typeof navigate !== 'function') return;

  row.classList.add('notification-card--clickable');
  row.tabIndex = 0;
  row.setAttribute('role', 'link');

  const open = () => navigate(routePath);
  row.addEventListener('click', open);
  row.addEventListener('keydown', (event) => {
    if (event.key !== 'Enter' && event.key !== ' ') return;
    event.preventDefault();
    open();
  });
}

function renderItem(item, activeTab, navigate) {
  const row = document.createElement('article');
  row.className = 'notification-card';
  bindNotificationNavigation(row, notificationRoute(item, activeTab), navigate);

  const body = document.createElement('div');
  body.className = 'notification-card__body';
  body.append(renderHead(item));

  if (activeTab === 'replies') {
    // Во вкладке «Ответы» всё – ответы: подпись «ответил(а)» не нужна, сразу текст.
    const text = document.createElement('p');
    text.className = 'notification-card__text';
    text.textContent = item.sourceText || 'Ответ без текста';
    body.append(text);
    const engagement = renderEngagement(item.engagement);
    if (engagement) body.append(engagement);
  } else {
    const action = document.createElement('p');
    action.className = 'notification-card__action';
    action.textContent = activeTab === 'connections'
      ? connectionActionLabel(item.connectionTypeCode ?? item.sourceMsgSubType)
      : eventActionLabel(item.sourceMsgSubType, item);
    body.append(action);
  }

  row.append(renderAvatar(item), body);
  return row;
}

export function render({ navigate, chrome } = {}) {
  const screen = document.createElement('section');
  screen.className = 'stack notifications-screen';

  const tabs = document.createElement('div');
  tabs.className = 'tabs tabs--three notification-feed-tabs';
  tabs.setAttribute('role', 'radiogroup');
  tabs.setAttribute('aria-label', 'Категория уведомлений');
  const tabDefs = [['replies','Ответы'],['connections','Связи'],['events','События']];
  chrome?.setTopbar(createTopBar({
    title: 'Уведомления',
    className: 'topbar--root notifications-topbar',
  }));
  screen.append(tabs);

  const list = document.createElement('div');
  list.className = 'notifications-list';
  let payloadCache = null;
  let requestSeq = 0;
  let observer = null;
  const pendingSeenTimers = { replies: null, connections: null, events: null };
  const localSeen = { replies: 0, connections: 0, events: 0 };

  function countsFromPayload(payload) {
    return {
      replies: Number(payload?.repliesUnseenCount || 0),
      connections: Number(payload?.connectionsUnseenCount || 0),
      events: Number(payload?.eventsUnseenCount || 0),
    };
  }

  function updateToolbarBadge(payload) {
    const c = countsFromPayload(payload);
    state.notificationUnreadTotal = c.replies + c.connections + c.events;
    const btn = document.querySelector('[data-toolbar-page="notifications-view"]');
    if (!btn) return;
    let badge = btn.querySelector('.notification-toolbar-badge');
    if (state.notificationUnreadTotal <= 0) { badge?.remove(); return; }
    if (!badge) { badge = document.createElement('span'); badge.className = 'toolbar-unread-badge notification-toolbar-badge'; (btn.querySelector('.toolbar-icon') || btn).append(badge); }
    badge.textContent = state.notificationUnreadTotal > 99 ? '99+' : String(state.notificationUnreadTotal);
  }

  function renderTabs(payload) {
    const counts = countsFromPayload(payload);
    tabs.replaceChildren(...tabDefs.map(([key,label]) => {
      const b=document.createElement('button'); b.type='button'; b.className='tab-btn notification-tab-btn'; b.dataset.tab=key; b.setAttribute('role','radio'); b.setAttribute('aria-checked',state.notificationsTab===key?'true':'false');
      b.textContent = label;
      if (counts[key] > 0) {
        const count = document.createElement('span');
        count.className = 'tab-count';
        count.textContent = counts[key] > 99 ? '99+' : String(counts[key]);
        count.setAttribute('aria-label', `новых: ${counts[key]}`);
        b.append(count);
      }
      b.addEventListener('click',()=>{ if(state.notificationsTab===key)return; state.notificationsTab=key; renderCurrent(); });
      return b;
    }));
  }

  function categoryData(payload, tab) {
    if (tab === 'connections') return { items: payload?.connections || [], seenAt: Number(payload?.connectionsSeenAtMs || 0) };
    if (tab === 'events') return { items: payload?.events || [], seenAt: Number(payload?.eventsSeenAtMs || 0) };
    return { items: payload?.replies || [], seenAt: Number(payload?.repliesSeenAtMs || 0) };
  }

  function scheduleSeen(category, seenAtMs) {
    if (seenAtMs <= Number(localSeen[category] || 0)) return;
    localSeen[category] = seenAtMs;
    clearTimeout(pendingSeenTimers[category]);
    pendingSeenTimers[category] = setTimeout(async () => {
      const target = Number(localSeen[category] || 0);
      try {
        await authService.setNotificationSeen({ login: state.session.login, category, seenAtMs: target, storagePwd: state.session.storagePwdInMemory });
        if (!payloadCache) return;
        const key = category === 'connections' ? 'connectionsSeenAtMs' : category === 'events' ? 'eventsSeenAtMs' : 'repliesSeenAtMs';
        const countKey = category === 'connections' ? 'connectionsUnseenCount' : category === 'events' ? 'eventsUnseenCount' : 'repliesUnseenCount';
        payloadCache[key] = Math.max(Number(payloadCache[key] || 0), target);
        payloadCache[countKey] = (payloadCache[category] || []).filter(x => Number(x?.createdAtMs || 0) > payloadCache[key]).length;
        renderTabs(payloadCache); updateToolbarBadge(payloadCache);
      } catch (e) { console.warn('Не удалось подписать watermark уведомлений', e); }
    }, 350);
  }

  async function renderCurrent() {
    observer?.disconnect(); observer=null; renderTabs(payloadCache || {});
    const tab=state.notificationsTab; const {items:raw,seenAt}=categoryData(payloadCache || {},tab); localSeen[tab]=Math.max(localSeen[tab]||0,seenAt);
    const base=raw.map(normalizeItem); if(!base.length){list.replaceChildren(renderEmpty(tab));return;}
    const items=await Promise.all(base.map(x=>enrichItem(x,tab)));
    const unread=items.filter(x=>x.createdAtMs>seenAt); const old=items.filter(x=>x.createdAtMs<=seenAt);
    const nodes=[];
    const groupTitle=(text)=>{const el=document.createElement('h2');el.className='notification-group-title';el.textContent=text;return el;};
    if(unread.length) nodes.push(groupTitle(`Новые · ${unread.length}`));
    unread.forEach(x=>{const n=renderItem(x,tab,navigate);n.classList.add('notification-card--new');n.dataset.createdAtMs=String(x.createdAtMs);nodes.push(n);});
    if(unread.length && old.length) nodes.push(groupTitle('Ранее'));
    old.forEach(x=>nodes.push(renderItem(x,tab,navigate))); list.replaceChildren(...nodes);
    if(unread.length && 'IntersectionObserver' in window){
      observer=new IntersectionObserver(entries=>{ entries.forEach(e=>{ if(e.isIntersecting && e.intersectionRatio>=0.5){ const ts=Number(e.target.dataset.createdAtMs||0); if(ts>0){e.target.classList.remove('notification-card--new');scheduleSeen(tab,ts);} } }); },{threshold:[0.5]});
      list.querySelectorAll('.notification-card--new').forEach(n=>observer.observe(n));
    }
  }

  async function load() {
    const seq=++requestSeq; list.replaceChildren(renderEmpty(state.notificationsTab));
    try { payloadCache=await authService.getNotifications(); if(seq!==requestSeq)return; updateToolbarBadge(payloadCache); await renderCurrent(); }
    catch(error){ if(seq!==requestSeq)return; const card=document.createElement('article');card.className='card stack';card.innerHTML='<strong>Не удалось загрузить уведомления</strong>';const t=document.createElement('p');t.className='meta-muted';t.textContent=error?.message||'Ошибка запроса к серверу';card.append(t);list.replaceChildren(card);}
  }

  if (!['replies','connections','events'].includes(state.notificationsTab)) state.notificationsTab='replies';
  screen.cleanup = () => {
    observer?.disconnect();
    Object.values(pendingSeenTimers).forEach((timer) => clearTimeout(timer));
  };
  screen.append(list);
  void load();
  return screen;
}