import { renderHeader } from '../components/header.js';

export const pageMeta = { id: 'login-view', title: 'Войти', showAppChrome: false };

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

  const loginButton = document.createElement('button');
  loginButton.className = 'ghost-btn';
  loginButton.type = 'button';
  loginButton.textContent = 'Войти по паролю';
  loginButton.addEventListener('click', () => navigate('login-password-view'));

  const otherDeviceButton = document.createElement('button');
  otherDeviceButton.className = 'ghost-btn';
  otherDeviceButton.type = 'button';
  otherDeviceButton.textContent = 'Войти через другое устройство';
  otherDeviceButton.addEventListener('click', () => navigate('login-other-device-view'));

  const actions = document.createElement('div');
  actions.className = 'auth-actions login-actions-wide';
  actions.append(loginButton, otherDeviceButton);

  const backButton = document.createElement('button');
  backButton.className = 'ghost-btn';
  backButton.type = 'button';
  backButton.textContent = 'Назад';
  backButton.addEventListener('click', () => navigate('start-view'));

  const panel = document.createElement('section');
  panel.className = 'login-panel stack';
  panel.innerHTML = '<h1 class="login-panel-title">Войти</h1>';
  panel.append(actions, backButton);

  screen.append(
    renderHeader({
      title: 'Войти',
      leftAction: { label: '←', onClick: () => navigate('start-view') },
    }),
    panel,
  );

  return screen;
}