import { createTopBar } from '../components/topbar.js';
import { authService, state } from '../state.js';
import { loadRelationsForPair, loadUserProfileCard } from '../services/user-connections.js';
import { navigateBack } from '../router.js';

export const pageMeta = { id: 'user-relation-manage-view', title: 'Добавить' };

function effectiveSocial(f) { if (f.outCloseFriend) return 'close_friend'; if (f.outFriend) return 'friend'; if (f.outContact) return 'contact'; return 'none'; }

export function render({route, chrome}) {
  const targetLogin = String(route?.params?.login || '').trim(); const selfLogin = String(state.session.login || '').trim();
  const screen = document.createElement('section'); screen.className = 'stack';
  const body = document.createElement('div'); body.className = 'stack'; const status = document.createElement('div'); status.className = 'status-line';
  chrome?.setTopbar(createTopBar({ title: 'Добавить', back: { label: '←', onClick: () => navigateBack() } }));
  screen.append(
    status,
    body,
  );
  let flags, selfCard, targetCard;

  async function setKind(kind, enabled) { await authService.setUserRelation({ login: selfLogin, toLogin: targetLogin, kind, enabled, storagePwd: state.session.storagePwdInMemory }); }
  async function changeSocial(next) {
    const current = effectiveSocial(flags); if (current === next) return;
    if (next === 'none') { if (flags.outCloseFriend) await setKind('close_friend', false); if (flags.outFriend) await setKind('friend', false); if (flags.outContact) await setKind('contact', false); }
    if (next === 'contact') { if (flags.outCloseFriend) await setKind('close_friend', false); if (flags.outFriend) await setKind('friend', false); if (!flags.outContact) await setKind('contact', true); }
    if (next === 'friend') { if (flags.outCloseFriend) await setKind('close_friend', false); if (!flags.outFriend) await setKind('friend', true); }
    if (next === 'close_friend' && !flags.outCloseFriend) await setKind('close_friend', true);
    await refresh();
  }

  async function refresh() {
    status.textContent = 'Загрузка...'; body.innerHTML = '';
    [selfCard, targetCard, flags] = await Promise.all([loadUserProfileCard(selfLogin), loadUserProfileCard(targetLogin), loadRelationsForPair({ currentLogin: selfLogin, targetLogin })]);
    const social = effectiveSocial(flags);
    const canPrimary = selfCard.accountRole === 'primary' && targetCard.accountRole !== 'non_voting';
    const canShine = selfCard.accountRole === 'primary' && selfCard.shineStatus === 'shining' && targetCard.shineStatus !== 'not_interested';
    body.innerHTML = `
      <div class="card stack"><b>Связь с ${targetLogin}</b>
        <div class="row wrap-row" data-social>${['none','contact','friend','close_friend'].map(v => `<button class="secondary-btn ${social===v?'is-active':''}" data-social-kind="${v}">${({none:'Нет',contact:'Контакт',friend:'Друг',close_friend:'Близкий друг'})[v]}</button>`).join('')}</div>
      </div>
      ${canPrimary ? `<div class="card row"><span>Основной аккаунт</span><button class="secondary-btn" data-confirm="official_account">${flags.outOfficialAccount ? 'Убрать подтверждение' : 'Подтвердить'}</button></div>` : ''}
      ${canShine ? `<div class="card row"><span>Сияющий</span><button class="secondary-btn" data-confirm="shine_confirmed">${flags.outShineConfirmed ? 'Убрать подтверждение' : 'Подтвердить'}</button></div>` : ''}
    `;
    status.textContent = '';
  }

  body.addEventListener('click', async (e) => {
    const btn = e.target.closest('button'); if (!btn) return;
    const social = btn.dataset.socialKind; const confirm = btn.dataset.confirm;
    try { status.textContent = 'Сохранение...'; if (social) await changeSocial(social); else if (confirm) { const enabled = confirm === 'official_account' ? !flags.outOfficialAccount : !flags.outShineConfirmed; await setKind(confirm, enabled); await refresh(); } }
    catch (err) { status.className='status-line is-unavailable'; status.textContent=`Ошибка: ${err.message || 'unknown'}`; }
  });
  refresh().catch(e => { status.className='status-line is-unavailable'; status.textContent=`Ошибка: ${e.message || 'unknown'}`; });
  return screen;
}