import { login } from '../embyApi.js';
import { boot } from '../app.js';

export function renderLogin(root) {
  root.innerHTML = `
    <main class="wrap">
      <h1>Watch Party</h1>
      <form id="loginForm" class="panel">
        <p class="hint">Utilise ton compte Emby habituel.</p>
        <label>Nom d'utilisateur
          <input id="username" autocomplete="username" required autofocus />
        </label>
        <label>Mot de passe
          <input id="password" type="password" autocomplete="current-password" required />
        </label>
        <button type="submit">Se connecter</button>
        <p id="error" class="error"></p>
      </form>
    </main>`;

  const form = root.querySelector('#loginForm');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const errorEl = form.querySelector('#error');
    errorEl.textContent = '';
    try {
      await login(form.querySelector('#username').value, form.querySelector('#password').value);
      await boot(); // no shell/router running yet at the login screen - (re)boot into it now
    } catch (err) {
      errorEl.textContent = "Connexion impossible - vérifie ton nom d'utilisateur et ton mot de passe.";
    }
  });
}