export function renderLogin(onLogin) {
  const loginContainer = document.createElement('div');
  loginContainer.className = 'login-container';

  loginContainer.innerHTML = `
    <div class="login-card">
      <div class="login-logo">
        <div class="login-logo-icon">
          <svg width="40" height="40" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><line x1="10" y1="9" x2="8" y2="9"/></svg>
        </div>
        <h1 class="login-brand">Doli App</h1>
        <p class="login-subtitle">Panel de facturación · Dolibarr</p>
      </div>
      <form id="login-form">
        <div class="form-group">
          <label for="identifier">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: -2px; margin-right: 4px;"><path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>
            Usuario o email
          </label>
          <input type="text" id="identifier" name="identifier" required autocomplete="username" placeholder="Introduce tu usuario">
        </div>
        <div class="form-group">
          <label for="password">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: -2px; margin-right: 4px;"><rect x="3" y="11" width="18" height="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
            Contraseña
          </label>
          <input type="password" id="password" name="password" required autocomplete="current-password" placeholder="Introduce tu contraseña">
        </div>
        <button type="submit" class="login-button" id="login-btn">
          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" style="vertical-align: -3px; margin-right: 6px;" class="login-icon"><path d="M15 3h4a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2h-4"/><polyline points="10 17 15 12 10 7"/><line x1="15" y1="12" x2="3" y2="12"/></svg>
          <span class="login-btn-text">Iniciar Sesión</span>
        </button>
      </form>
      <p id="login-error" class="login-error"></p>
    </div>
  `;

  const form = loginContainer.querySelector('#login-form');
  const loginBtn = loginContainer.querySelector('#login-btn');
  const loginIcon = loginBtn.querySelector('.login-icon');
  const loginBtnText = loginBtn.querySelector('.login-btn-text');

  form.addEventListener('submit', async (e) => {
    e.preventDefault();

    // Disable form while loading
    const inputs = form.querySelectorAll('input');
    loginBtn.disabled = true;
    inputs.forEach(i => i.disabled = true);
    loginIcon.style.display = 'none';
    loginBtnText.textContent = 'Iniciando sesión...';

    // Add spinner
    const spinner = document.createElement('span');
    spinner.className = 'spinner';
    loginBtn.insertBefore(spinner, loginBtnText);

    const email = loginContainer.querySelector('#identifier').value;
    const password = loginContainer.querySelector('#password').value;

    try {
      await onLogin(email, password);
    } finally {
      // Re-enable form
      loginBtn.disabled = false;
      inputs.forEach(i => i.disabled = false);
      spinner.remove();
      loginIcon.style.display = '';
      loginBtnText.textContent = 'Iniciar Sesión';
    }
  });

  return loginContainer;
}