import { createTopBar } from '../components/topbar.js';
import { saveEntryLanguage, state } from '../state.js';

export const pageMeta = { id: 'language-view', title: 'Язык' };

function resolveReturnPage() {
  const stored = String(sessionStorage.getItem('shine-language-return-page') || '').trim();
  return stored === 'start-view' ? 'start-view' : 'settings-view';
}

export function render({navigate, chrome}) {
  const screen = document.createElement('section');
  screen.className = 'stack language-screen';
  const returnPage = resolveReturnPage();
  let pendingLanguage = state.entrySettings.language === 'en' ? 'en' : 'ru';

  const topbar = createTopBar({
      title: 'Язык / Language',
      back: { label: '←', onClick: () => {
        sessionStorage.removeItem('shine-language-return-page');
        navigate(returnPage);
      } },
    });
  const embedTopbar = !state.session.isAuthorized;
  if (!embedTopbar) chrome?.setTopbar(topbar);

  const card = document.createElement('div');
  card.className = 'nav-list language-list';
  card.setAttribute('role', 'radiogroup');
  card.setAttribute('aria-label', 'Язык интерфейса / Interface language');
  [['ru', 'Русский'], ['en', 'English']].forEach(([code, label]) => {
    const row = document.createElement('button');
    row.type = 'button';
    row.className = 'nav-row language-row';
    row.setAttribute('role', 'radio');
    row.setAttribute('aria-checked', String(pendingLanguage === code));
    row.innerHTML = `<span class="nav-row__label"></span>`;
    row.querySelector('.nav-row__label').textContent = label;
    row.addEventListener('click', () => {
      pendingLanguage = code;
      saveEntryLanguage(code);
      sessionStorage.removeItem('shine-language-return-page');
      navigate(returnPage);
    });
    card.append(row);
  });

  if (embedTopbar) screen.append(topbar);
  screen.append(card);
  return screen;
}