SHiNE-server/SHiNE-browser-plugin-wallet/popup.js

const els = {
  serverLoginInfo: document.querySelector('#server-login-info'),
  serverAddress: document.querySelector('#server-address'),
  loginInput: document.querySelector('#login-input'),
  usePassword: document.querySelector('#use-password'),
  passwordField: document.querySelector('#password-field'),
  passwordInput: document.querySelector('#password-input'),
  startBtn: document.querySelector('#start-btn'),
  pairingCard: document.querySelector('#pairing-card'),
  shortCode: document.querySelector('#short-code'),
  pairingHint: document.querySelector('#pairing-hint'),
  pairingExpire: document.querySelector('#pairing-expire'),
  cancelBtn: document.querySelector('#cancel-btn'),
  status: document.querySelector('#status'),
  sessionCard: document.querySelector('#session-card'),
  sessionLogin: document.querySelector('#session-login'),
  sessionId: document.querySelector('#session-id'),
  sessionType: document.querySelector('#session-type'),
  deviceKeyShort: document.querySelector('#device-key-short'),
  resumeBtn: document.querySelector('#resume-btn'),
  refreshDevicesBtn: document.querySelector('#refresh-devices-btn'),
  disconnectBtn: document.querySelector('#disconnect-btn'),
  signingCard: document.querySelector('#signing-card'),
  signKeySelect: document.querySelector('#sign-key-select'),
  deviceSelect: document.querySelector('#device-select'),
  homeserverList: document.querySelector('#homeserver-list'),
  prepareSignBtn: document.querySelector('#prepare-sign-btn'),
  connectionPill: document.querySelector('#connection-pill'),
};

let state = {
  settings: {
    serverLogin: 'shineupme',
    serverHttp: 'https://shineup.me',
    serverUrl: 'wss://shineup.me/ws',
    login: '',
  },
  pairing: {
    active: false,
    pairingId: '',
    expiresAtMs: 0,
  },
  session: null,
  connectionOnline: false,
  status: {
    text: '',
    kind: 'info',
  },
};

let refreshTimer = 0;
let saveSettingsTimer = 0;

function setStatus(message, kind = 'info') {
  els.status.textContent = String(message || '');
  els.status.className = `status ${kind === 'error' ? 'error' : 'info'}`;
  els.status.classList.toggle('hidden', !message);
}

function setConnectedPill(connected) {
  els.connectionPill.textContent = connected ? 'online' : 'offline';
  els.connectionPill.className = connected ? 'pill pill-online' : 'pill pill-offline';
}

function formatRemaining(ms) {
  const safe = Math.max(0, Math.floor(Number(ms || 0) / 1000));
  const minutes = Math.floor(safe / 60);
  const seconds = safe % 60;
  return `${minutes} мин ${seconds} сек`;
}

function shortKey(value, size = 10) {
  const raw = String(value || '').trim();
  return raw ? `${raw.slice(0, size)}...` : '—';
}

function renderHomeserverList(items = []) {
  els.homeserverList.innerHTML = '';
  if (!items.length) {
    const empty = document.createElement('p');
    empty.className = 'muted small';
    empty.textContent = 'В PDA пока нет опубликованных homeserver-сессий.';
    els.homeserverList.append(empty);
    return;
  }
  items.forEach((item) => {
    const row = document.createElement('div');
    row.className = 'summary-row device-row';
    const label = document.createElement('span');
    label.textContent = `${item.sessionName} (${shortKey(item.sessionPubKeyBase58, 8)})`;
    const badge = document.createElement('strong');
    const stateValue = String(item.onlineState || 'unknown');
    badge.textContent = stateValue;
    badge.className = `device-state device-state-${stateValue}`;
    row.append(label, badge);
    els.homeserverList.append(row);
  });
}

function applyState(nextState) {
  state = nextState || state;
  const loginValue = String(state?.settings?.login || '');
  const resolvedServerLogin = String(state?.settings?.serverLogin || '').trim();
  const resolvedServerAddress = String(state?.settings?.serverHttp || '').trim();
  if (loginValue && resolvedServerLogin && resolvedServerAddress) {
    els.serverLoginInfo.textContent = `Сервер SHiNE: ${resolvedServerLogin}`;
    els.serverAddress.textContent = `Адрес: ${resolvedServerAddress}`;
  } else {
    els.serverLoginInfo.textContent = 'Сервер SHiNE: —';
    els.serverAddress.textContent = 'Адрес: —';
  }
  if (document.activeElement !== els.loginInput) {
    els.loginInput.value = loginValue;
  }
  setConnectedPill(!!state?.connectionOnline);
  setStatus(state?.status?.text || '', state?.status?.kind || 'info');

  const session = state?.session;
  const walletProfile = state?.walletProfile;
  const signing = state?.signing || {};
  if (session) {
    els.sessionCard.classList.remove('hidden');
    els.sessionLogin.textContent = session.login || '—';
    els.sessionId.textContent = session.sessionId || '—';
    els.sessionType.textContent = String(session.sessionType || 50) === '50' ? 'wallet' : String(session.sessionType || '—');
    els.deviceKeyShort.textContent = shortKey(walletProfile?.publicKeys?.deviceKeyBase58 || '');
    els.signingCard.classList.remove('hidden');
  } else {
    els.sessionCard.classList.add('hidden');
    els.sessionLogin.textContent = '—';
    els.sessionId.textContent = '—';
    els.sessionType.textContent = 'wallet';
    els.deviceKeyShort.textContent = '—';
    els.signingCard.classList.add('hidden');
  }

  const signKeyOptions = Array.isArray(walletProfile?.signingKeyOptions) ? walletProfile.signingKeyOptions : [];
  els.signKeySelect.innerHTML = '';
  signKeyOptions.forEach((item) => {
    const option = document.createElement('option');
    option.value = item.id;
    option.textContent = item.label;
    option.selected = item.id === signing.selectedKeyId;
    els.signKeySelect.append(option);
  });

  const homeservers = Array.isArray(walletProfile?.homeserverSessions) ? walletProfile.homeserverSessions : [];
  els.deviceSelect.innerHTML = '';
  homeservers.forEach((item) => {
    const option = document.createElement('option');
    option.value = item.sessionName;
    option.textContent = `${item.sessionName} [${item.onlineState || 'unknown'}]`;
    option.selected = item.sessionName === signing.selectedDeviceName;
    els.deviceSelect.append(option);
  });
  renderHomeserverList(homeservers);
  els.prepareSignBtn.disabled = !session || !signing.selectedKeyId || !signing.selectedDeviceName;

  const pairing = state?.pairing || {};
  if (pairing.active) {
    els.pairingCard.classList.remove('hidden');
    const shortCode = String(pairing.shortCode || els.shortCode.dataset.shortCode || els.shortCode.textContent || '0000000');
    els.shortCode.dataset.shortCode = shortCode;
    els.shortCode.textContent = shortCode;
    els.pairingHint.textContent = pairing.trustedSessionOnline
      ? 'Покажите код на доверенном устройстве и подтвердите выпуск wallet-session.'
      : 'Сейчас нет онлайн доверенной сессии. Откройте другое устройство и подтвердите заявку.';
    const leftMs = Number(pairing.expiresAtMs || 0) - Date.now();
    els.pairingExpire.textContent = leftMs > 0 ? `Код действителен ещё ${formatRemaining(leftMs)}.` : 'Время ожидания истекло.';
    els.startBtn.disabled = true;
  } else {
    els.pairingCard.classList.add('hidden');
    els.shortCode.textContent = '0000000';
    delete els.shortCode.dataset.shortCode;
    els.pairingExpire.textContent = '';
    els.startBtn.disabled = false;
  }
}

function normalizeError(response, fallback) {
  return response?.error || fallback || 'Unknown error';
}

function sendMessage(type, payload = {}) {
  return new Promise((resolve, reject) => {
    chrome.runtime.sendMessage({ type, payload }, (response) => {
      if (chrome.runtime.lastError) {
        reject(new Error(chrome.runtime.lastError.message || 'Runtime message failed'));
        return;
      }
      if (!response?.ok) {
        reject(new Error(normalizeError(response, 'Wallet operation failed')));
        return;
      }
      if (response?.state) applyState(response.state);
      resolve(response);
    });
  });
}

async function refreshState() {
  const response = await sendMessage('wallet:getState');
  applyState(response.state);
}

async function saveSettings() {
  await sendMessage('wallet:saveSettings', {
    login: String(els.loginInput.value || '').trim(),
  });
}

async function resolveServerInfo() {
  const login = String(els.loginInput.value || '').trim();
  if (!login) {
    await sendMessage('wallet:saveSettings', { login: '' });
    return;
  }
  try {
    await sendMessage('wallet:resolveServerInfo', { login });
  } catch (error) {
    setStatus(error.message || 'Не удалось определить сервер SHiNE по PDA.', 'error');
  }
}

function scheduleSaveSettings() {
  if (saveSettingsTimer) {
    window.clearTimeout(saveSettingsTimer);
  }
  saveSettingsTimer = window.setTimeout(() => {
    saveSettingsTimer = 0;
    void saveSettings();
  }, 250);
}

async function startPairing() {
  const login = String(els.loginInput.value || '').trim();
  if (!login) {
    setStatus('Введите логин.', 'error');
    return;
  }
  setStatus('Создаём wallet-session заявку...', 'info');
  els.startBtn.disabled = true;
  try {
    const response = await sendMessage('wallet:startPairing', {
      login,
      usePassword: !!els.usePassword.checked,
      password: String(els.passwordInput.value || ''),
    });
    applyState(response.state);
  } catch (error) {
    els.startBtn.disabled = false;
    setStatus(error.message || 'Не удалось начать pairing.', 'error');
  }
}

async function cancelPairing() {
  try {
    await sendMessage('wallet:cancelPairing');
  } catch (error) {
    setStatus(error.message || 'Не удалось отменить pairing.', 'error');
  }
}

async function resumeSession() {
  setStatus('Проверяем сохранённую wallet-session...', 'info');
  try {
    await sendMessage('wallet:resumeSession');
  } catch (error) {
    setStatus(error.message || 'Не удалось восстановить session.', 'error');
  }
}

async function disconnectSession() {
  try {
    await sendMessage('wallet:disconnectSession');
  } catch (error) {
    setStatus(error.message || 'Не удалось удалить session.', 'error');
  }
}

async function refreshDevices() {
  setStatus('Обновляем trusted homeserver-устройства...', 'info');
  try {
    await sendMessage('wallet:refreshWalletDevices');
  } catch (error) {
    setStatus(error.message || 'Не удалось обновить список устройств.', 'error');
  }
}

async function updateSigningSelection() {
  try {
    await sendMessage('wallet:updateSigningSelection', {
      selectedKeyId: String(els.signKeySelect.value || '').trim(),
      selectedDeviceName: String(els.deviceSelect.value || '').trim(),
    });
  } catch (error) {
    setStatus(error.message || 'Не удалось обновить выбор для подписи.', 'error');
  }
}

async function prepareSignSignal() {
  setStatus('Готовим каркас запроса подписи...', 'info');
  try {
    await sendMessage('wallet:prepareSignSignal');
  } catch (error) {
    setStatus(error.message || 'Не удалось подготовить запрос подписи.', 'error');
  }
}

function startUiRefreshLoop() {
  stopUiRefreshLoop();
  refreshTimer = window.setInterval(() => {
    void refreshState();
  }, 1000);
}

function stopUiRefreshLoop() {
  if (refreshTimer) {
    window.clearInterval(refreshTimer);
    refreshTimer = 0;
  }
}

function bindUi() {
  els.usePassword.addEventListener('change', () => {
    els.passwordField.classList.toggle('hidden', !els.usePassword.checked);
    if (!els.usePassword.checked) {
      els.passwordInput.value = '';
    }
  });
  els.loginInput.addEventListener('input', () => { scheduleSaveSettings(); });
  els.loginInput.addEventListener('change', () => {
    void saveSettings();
    void resolveServerInfo();
  });
  els.startBtn.addEventListener('click', () => { void startPairing(); });
  els.cancelBtn.addEventListener('click', () => { void cancelPairing(); });
  els.resumeBtn.addEventListener('click', () => { void resumeSession(); });
  els.refreshDevicesBtn.addEventListener('click', () => { void refreshDevices(); });
  els.disconnectBtn.addEventListener('click', () => { void disconnectSession(); });
  els.signKeySelect.addEventListener('change', () => { void updateSigningSelection(); });
  els.deviceSelect.addEventListener('change', () => { void updateSigningSelection(); });
  els.prepareSignBtn.addEventListener('click', () => { void prepareSignSignal(); });
}

async function init() {
  bindUi();
  await refreshState();
  startUiRefreshLoop();
}

window.addEventListener('beforeunload', () => {
  stopUiRefreshLoop();
  if (saveSettingsTimer) {
    window.clearTimeout(saveSettingsTimer);
    saveSettingsTimer = 0;
  }
});

void init();