import { renderHeader } from '../components/header.js';
import { beginAddAccountFlow, state, switchToAccount } from '../state.js';
import { toUserMessage } from '../services/ui-error-texts.js';

export const pageMeta = { id: 'account-switcher-view', title: 'Сменить профиль' };

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

  screen.append(
    renderHeader({
      title: 'Сменить профиль',
      leftAction: { label: '<', onClick: () => navigate('profile-view') },
    }),
  );

  const list = document.createElement('div');
  list.className = 'stack';
  const status = document.createElement('div');
  status.className = 'meta-muted';

  const accounts = Array.isArray(state.accounts) ? state.accounts : [];
  const activeLogin = String(state.session.login || '').trim().toLowerCase();

  if (!accounts.length) {
    const empty = document.createElement('div');
    empty.className = 'card meta-muted';
    empty.textContent = 'Сохранённых аккаунтов пока нет.';
    list.append(empty);
  } else {
    accounts.forEach((account) => {
      const login = String(account?.login || '').trim();
      if (!login) return;
      const card = document.createElement('button');
      card.type = 'button';
      card.className = 'card row';
      card.style.justifyContent = 'space-between';
      card.style.alignItems = 'center';
      card.innerHTML = `
        <strong>${login}</strong>
        <span class="meta-muted">${login.toLowerCase() === activeLogin ? 'Активный' : 'Переключить'}</span>
      `;
      card.addEventListener('click', async () => {
        if (login.toLowerCase() === activeLogin) return;
        status.textContent = 'Переключаем аккаунт...';
        try {
          await switchToAccount(login);
          status.textContent = '';
          navigate('profile-view');
        } catch (error) {
          status.textContent = toUserMessage(error, 'Не удалось переключить аккаунт.');
        }
      });
      list.append(card);
    });
  }

  const actions = document.createElement('div');
  actions.className = 'form-actions-grid';
  actions.innerHTML = `
    <button class="secondary-btn" id="account-switcher-add-login" type="button">Добавить аккаунт (Войти)</button>
    <button class="secondary-btn" id="account-switcher-add-register" type="button">Добавить аккаунт (Регистрация)</button>
  `;
  actions.querySelector('#account-switcher-add-login')?.addEventListener('click', () => {
    beginAddAccountFlow();
    navigate('login-view');
  });
  actions.querySelector('#account-switcher-add-register')?.addEventListener('click', () => {
    beginAddAccountFlow();
    navigate('register-view');
  });

  screen.append(list, actions, status);
  return screen;
}