import { login } from '../embyApi.js';
import { navigate } from '../router.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>Adresse du serveur Emby
          <input id="serverUrl" placeholder="https://theater.media.kyuno.fr" required />
        </label>
        <label>Nom d'utilisateur
          <input id="username" autocomplete="username" required />
        </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');
  const serverUrlInput = form.querySelector('#serverUrl');
  serverUrlInput.value = localStorage.getItem('wp_lastServerUrl') || '';

  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const errorEl = form.querySelector('#error');
    errorEl.textContent = '';
    const serverUrl = serverUrlInput.value.trim();
    const username = form.querySelector('#username').value;
    const password = form.querySelector('#password').value;
    localStorage.setItem('wp_lastServerUrl', serverUrl);

    try {
      await login(serverUrl, username, password);
      navigate('/browse');
    } catch (err) {
      errorEl.textContent =
        "Connexion impossible - vérifie l'adresse du serveur, le nom d'utilisateur et le mot de passe. " +
        "(Si ça persiste, ouvre la console du navigateur : une erreur CORS s'affiche différemment d'un simple refus d'identifiants.)";
    }
  });
}