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';

  const cameraButton = document.createElement('button');
  cameraButton.className = 'primary-btn';
  cameraButton.type = 'button';
  cameraButton.textContent = 'Отсканировать QR-код';
  cameraButton.addEventListener('click', () => navigate('login-camera-view'));

  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 = 'text-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(cameraButton, loginButton, otherDeviceButton);

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

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

  return screen;
}