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

import { profile } from '../mock-data.js';
import { authService, state } from '../state.js';
import {
  PROFILE_GENDER_FEMALE,
  PROFILE_GENDER_MALE,
  loadProfileSnapshot,
} from '../services/user-profile-params.js';
import { buildIdentityLines } from '../services/user-connections.js';
import { renderUserAvatar } from '../components/avatar-image.js';
import { createOverflowDots } from '../components/overflow-dots.js';

export const pageMeta = { id: 'profile-view', title: 'Профиль' };

function toggleText(enabled) {
  return enabled ? 'Yes' : 'No';
}

function genderLabel(value) {
  if (value === PROFILE_GENDER_MALE) return 'Мужской';
  if (value === PROFILE_GENDER_FEMALE) return 'Женский';
  return 'Не указан';
}

function escapeHtml(text) {
  return String(text || '')
    .replaceAll('&', '&')
    .replaceAll('<', '&lt;')
    .replaceAll('>', '&gt;')
    .replaceAll('"', '&quot;')
    .replaceAll("'", '&#39;');
}

function renderProfileInfoText(text) {
  const [intro, details] = String(text || '').split(/\n\n/, 2);
  if (!details) {
    return `<p class="profile-info-modal__lead">${escapeHtml(intro)}</p>`;
  }

  const [sectionTitle, ...items] = details.split('\n').filter(Boolean);
  return `
    <p class="profile-info-modal__lead">${escapeHtml(intro)}</p>
    <section class="profile-info-modal__section" aria-label="${escapeHtml(sectionTitle)}">
      <p class="profile-info-modal__section-title">${escapeHtml(sectionTitle)}</p>
      <ol class="profile-info-modal__list">
        ${items.map((item) => `<li>${escapeHtml(item.replace(/^\d+\)\s*/, ''))}</li>`).join('')}
      </ol>
    </section>
  `;
}

function openProfileInfoModal({ title, text }) {
  const root = document.getElementById('modal-root');
  if (!root) return;
  root.innerHTML = `
    <div class="modal profile-info-modal" id="profile-info-modal" role="dialog" aria-modal="true" aria-labelledby="profile-info-title">
      <section class="modal-card profile-info-modal__card stack">
        <header class="profile-info-modal__header">
          <div>
            <p class="profile-info-modal__eyebrow">Информация</p>
            <h3 class="modal-title profile-info-modal__title" id="profile-info-title">${escapeHtml(title)}</h3>
          </div>
          <button class="profile-info-modal__close" type="button" id="profile-info-close-icon" aria-label="Закрыть" title="Закрыть">&times;</button>
        </header>
        <div class="profile-info-modal__content">
          ${renderProfileInfoText(text)}
        </div>
        <footer class="profile-info-modal__footer">
          <button class="secondary-btn profile-info-modal__confirm" type="button" id="profile-info-close">Готово</button>
        </footer>
      </section>
    </div>
  `;
  const close = () => { root.innerHTML = ''; };
  root.querySelector('#profile-info-close')?.addEventListener('click', close);
  root.querySelector('#profile-info-close-icon')?.addEventListener('click', close);
  root.querySelector('#profile-info-modal')?.addEventListener('click', (event) => {
    if (event.target?.id === 'profile-info-modal') close();
  });
}

function officialInfoText() {
  return 'Можно создавать несколько альтернативных или анонимных каналов. '
    + 'Но для корректного учёта голосов на одного реального человека используется только один официальный канал.';
}

function shineInfoText() {
  return 'Сияющие — это те, от кого идёт внутреннее сияние на тонком плане.\n\n'
    + 'Пять принципов сияющих:\n'
    + '1) сияющие не обманывают;\n'
    + '2) сияющие чувствуют, что человек — это не только физическое тело, а нечто большее;\n'
    + '3) сияющие развиваются и в духовной, и в материальной плоскости;\n'
    + '4) у сияющих есть близкие друзья, с которыми им по-настоящему хорошо;\n'
    + '5) сияющие заботятся о мире: о людях, гармонии и общем благе.';
}

export function render({ navigate, chrome }) {
  const login = state.session.login || profile.login;

  const screen = document.createElement('section');
  screen.className = 'stack profile-screen';

  const topbar = document.createElement('header');
  topbar.className = 'page-header app-topbar-shell app-topbar-shell--profile';
  topbar.innerHTML = `
    <div class="header-left" aria-hidden="true"></div>
    <div class="header-center"><h1 class="page-title">Профиль</h1></div>
    <div class="header-actions profile-head-menu-wrap dm-head-menu-wrap">
      <button type="button" class="dm-head-menu-btn profile-head-menu-btn" aria-label="Меню профиля" aria-haspopup="menu" aria-expanded="false">
      </button>
    </div>
  `;

  const profileMenuWrap = topbar.querySelector('.profile-head-menu-wrap');
  const profileMenuButton = topbar.querySelector('.profile-head-menu-btn');
  profileMenuButton?.append(createOverflowDots());
  let profileMenuPortal = null;

  const closeProfileMenu = () => {
    profileMenuPortal?.remove();
    profileMenuPortal = null;
    profileMenuButton?.setAttribute('aria-expanded', 'false');
    profileMenuWrap?.classList.remove('is-open');
  };

  const positionProfileMenu = () => {
    if (!profileMenuPortal || !profileMenuButton) return;
    const rect = profileMenuButton.getBoundingClientRect();
    const margin = 10;
    const menuWidth = profileMenuPortal.offsetWidth || 224;
    const left = Math.max(margin, Math.min(window.innerWidth - menuWidth - margin, rect.right - menuWidth));
    profileMenuPortal.style.left = `${Math.round(left)}px`;
    profileMenuPortal.style.top = `${Math.round(rect.bottom + 7)}px`;
  };

  const openProfileMenu = () => {
    if (!profileMenuButton || profileMenuPortal) return;
    const portal = document.createElement('div');
    portal.className = 'dm-head-menu dm-head-menu--portal profile-head-menu';
    portal.setAttribute('role', 'menu');
    portal.innerHTML = `
      <button type="button" class="dm-head-menu-item profile-head-menu-item" role="menuitem" data-top-action="profile">
        <img src="/assets/profile-icon-profile.svg" alt="" aria-hidden="true" />
        <span>Редактировать профиль</span>
      </button>
      <button type="button" class="dm-head-menu-item profile-head-menu-item" role="menuitem" data-top-action="wallet">
        <img src="/assets/profile-icon-wallet.svg" alt="" aria-hidden="true" />
        <span>Кошелёк</span>
      </button>
      <button type="button" class="dm-head-menu-item profile-head-menu-item" role="menuitem" data-top-action="settings">
        <img src="/assets/profile-icon-settings.svg" alt="" aria-hidden="true" />
        <span>Настройки</span>
      </button>
    `;

    const goTo = (route) => {
      closeProfileMenu();
      navigate(route);
    };
    portal.querySelector('[data-top-action="profile"]')?.addEventListener('click', () => goTo('profile-edit-view'));
    portal.querySelector('[data-top-action="wallet"]')?.addEventListener('click', () => goTo('wallet-view'));
    portal.querySelector('[data-top-action="settings"]')?.addEventListener('click', () => goTo('settings-view'));
    portal.addEventListener('click', (event) => event.stopPropagation());

    document.body.append(portal);
    profileMenuPortal = portal;
    profileMenuButton.setAttribute('aria-expanded', 'true');
    profileMenuWrap?.classList.add('is-open');
    positionProfileMenu();
  };

  profileMenuButton?.addEventListener('click', (event) => {
    event.preventDefault();
    event.stopPropagation();
    if (profileMenuPortal) closeProfileMenu();
    else openProfileMenu();
  });

  document.addEventListener('click', (event) => {
    if (!profileMenuPortal) return;
    if (profileMenuPortal.contains(event.target) || profileMenuButton?.contains(event.target)) return;
    closeProfileMenu();
  });
  document.addEventListener('keydown', (event) => {
    if (event.key !== 'Escape' || !profileMenuPortal) return;
    closeProfileMenu();
    profileMenuButton?.focus();
  });
  window.addEventListener('resize', positionProfileMenu, { passive: true });
  window.addEventListener('scroll', positionProfileMenu, { passive: true, capture: true });

  chrome?.setTopbar(topbar);

  const card = document.createElement('div');
  card.className = 'card stack profile-main-card';

  const topRow = document.createElement('div');
  topRow.className = 'row';
  topRow.innerHTML = `
    <div class="row" style="gap:12px; align-items:center;">
      <div data-profile-avatar-slot="true"></div>
      <div class="profile-identity-lines" data-profile-identity="true">
        <div class="profile-identity-line profile-identity-login">${String(login || '').trim() || 'unknown'}</div>
      </div>
    </div>
  `;

  const badgesRow = document.createElement('div');
  badgesRow.className = 'row';
  badgesRow.innerHTML = `
    <button class="badge profile-toggle-btn is-no" type="button" data-toggle="official">Официальный: No</button>
    <button class="badge profile-toggle-btn is-no" type="button" data-toggle="shine">Сияющий: No</button>
  `;

  const listWrap = document.createElement('div');
  listWrap.className = 'stack profile-param-list';

  const officialBtn = badgesRow.querySelector('[data-toggle="official"]');
  const shineBtn = badgesRow.querySelector('[data-toggle="shine"]');
  const identityEl = topRow.querySelector('[data-profile-identity="true"]');
  const avatarSlotEl = topRow.querySelector('[data-profile-avatar-slot="true"]');

  let currentFields = [];
  let currentToggles = [];
  let currentGender = 'unknown';
  let currentAvatar = { value: '', source: '', txId: '', sha256Hex: '', timeMs: 0 };
  let currentStats = {
    ownedPublicChannelsCount: 0,
    followingUsersCount: 0,
    followingChannelsCount: 0,
    closeFriendsCount: 0,
  };

  function syncIdentity() {
    if (!identityEl) return;
    const firstName = currentFields.find((field) => field.key === 'first_name')?.value || '';
    const lastName = currentFields.find((field) => field.key === 'last_name')?.value || '';
    const lines = buildIdentityLines({ login, firstName, lastName });
    identityEl.innerHTML = lines.map((line, idx) => (
      `<div class="profile-identity-line${idx === lines.length - 1 ? ' profile-identity-login' : ''}">${escapeHtml(line)}</div>`
    )).join('');
  }

  function updateAvatarUi() {
    if (!(avatarSlotEl instanceof HTMLElement)) return;
    const firstName = String(currentFields.find((field) => field.key === 'first_name')?.value || '').trim();
    const lastName = String(currentFields.find((field) => field.key === 'last_name')?.value || '').trim();
    avatarSlotEl.innerHTML = '';
    avatarSlotEl.append(renderUserAvatar({
      login,
      firstName,
      lastName,
      avatar: currentAvatar?.txId
        ? { ar: currentAvatar.txId, sha256Hex: String(currentAvatar?.sha256Hex || '').trim().toLowerCase() }
        : null,
      size: 'large',
      className: 'profile-avatar',
    }));
  }

  function updateToggleButton(button, prefix, enabled) {
    button.textContent = `${prefix}: ${toggleText(enabled)}`;
    button.classList.remove('is-no', 'is-yes-official', 'is-yes-shine');
    if (!enabled) {
      button.classList.add('is-no');
      return;
    }
    if (prefix === 'Официальный') button.classList.add('is-yes-official');
    else button.classList.add('is-yes-shine');
  }

  function updateTogglesUi() {
    const official = currentToggles.find((item) => item.key === 'official') || { enabled: false };
    const shine = currentToggles.find((item) => item.key === 'shine') || { enabled: false };
    updateToggleButton(officialBtn, 'Официальный', official.enabled);
    updateToggleButton(shineBtn, 'Сияющий', shine.enabled);
  }

  function renderStats() {
    const stats = [
      { label: 'Собственные публичные каналы', value: currentStats.ownedPublicChannelsCount },
      { label: 'Подписки на пользователей', value: currentStats.followingUsersCount },
      { label: 'Подписки на каналы', value: currentStats.followingChannelsCount },
      { label: 'Близкие друзья', value: currentStats.closeFriendsCount },
    ];
    stats.forEach((stat) => {
      const row = document.createElement('div');
      row.className = 'card profile-param-item row';
      row.innerHTML = `<div class="profile-param-value"><b>${escapeHtml(stat.label)}</b>: ${escapeHtml(String(Number(stat.value || 0)))}</div>`;
      listWrap.append(row);
    });
  }

  officialBtn?.classList.add('profile-badge-trigger');
  shineBtn?.classList.add('profile-badge-trigger');
  officialBtn?.addEventListener('click', () => {
    openProfileInfoModal({
      title: 'Официальный канал',
      text: officialInfoText(),
    });
  });
  shineBtn?.addEventListener('click', () => {
    openProfileInfoModal({
      title: 'Справка о сияющих',
      text: shineInfoText(),
    });
  });

  function renderFields(fields) {
    listWrap.innerHTML = '';
    renderStats();
    fields.forEach((field) => {
      const row = document.createElement('div');
      row.className = 'card profile-param-item row';
      const value = String(field.value || '').trim() || 'не заполнено';
      row.innerHTML = `<div class="profile-param-value"><b>${field.label}</b>: ${escapeHtml(value)}</div>`;
      listWrap.append(row);

      if (field.key === 'last_name') {
        const genderRow = document.createElement('div');
        genderRow.className = 'card profile-param-item row';
        genderRow.innerHTML = `<div class="profile-param-value"><b>Пол</b>: ${escapeHtml(genderLabel(currentGender))}</div>`;
        listWrap.append(genderRow);
      }
    });
  }

  async function refreshProfileSnapshot() {
    if (state.session.isLocalDemo) {
      currentFields = [
        { key: 'first_name', label: 'Имя', value: 'Тестовый' },
        { key: 'last_name', label: 'Фамилия', value: 'Пользователь' },
        { key: 'address', label: 'Адрес', value: 'Локальный режим' },
        { key: 'website', label: 'Веб', value: '127.0.0.1' },
        { key: 'phone', label: 'Телефон', value: profile.phone },
      ];
      currentToggles = [
        { key: 'official', enabled: false },
        { key: 'shine', enabled: false },
      ];
      currentGender = 'unknown';
      currentAvatar = { value: '', source: '', txId: '', sha256Hex: '', timeMs: 0 };
      currentStats = {
        ownedPublicChannelsCount: 0,
        followingUsersCount: 0,
        followingChannelsCount: 0,
        closeFriendsCount: 0,
      };
      syncIdentity();
      updateAvatarUi();
      updateTogglesUi();
      renderFields(currentFields);
      return;
    }

    try {
      const [snapshot, user] = await Promise.all([
        loadProfileSnapshot(login),
        authService.getUser(login).catch(() => ({})),
      ]);
      currentFields = Array.isArray(snapshot.fields) ? snapshot.fields : [];
      currentToggles = Array.isArray(snapshot.toggles) ? snapshot.toggles : [];
      currentGender = snapshot.gender || 'unknown';
      currentAvatar = snapshot.avatar || { value: '', source: '', txId: '', sha256Hex: '', timeMs: 0 };
      currentStats = {
        ownedPublicChannelsCount: Number(user?.ownedPublicChannelsCount || 0),
        followingUsersCount: Number(user?.followingUsersCount || 0),
        followingChannelsCount: Number(user?.followingChannelsCount || 0),
        closeFriendsCount: Number(user?.closeFriendsCount || 0),
      };
      syncIdentity();
      updateAvatarUi();
      updateTogglesUi();
      renderFields(currentFields);
    } catch (error) {
      // ignore status row in profile-view
    }
  }

  card.append(topRow, badgesRow, listWrap);
  screen.append(card);

  updateAvatarUi();
  refreshProfileSnapshot();

  return screen;
}