import { auth } from '../api.js';
import { icons } from '../icons.js';

export function renderLogin(container, isSetup, onLogin) {
  container.innerHTML = `
    <div class="login-page">
      <div class="login-card animate-slide-in">
        <div class="login-brand">
          <div class="login-brand-icon">${icons.rocket(28)}</div>
          <h1>AutoDeployer</h1>
          <p>${isSetup ? 'Configura il tuo account admin' : 'Accedi alla dashboard'}</p>
        </div>
        <div id="login-error" class="login-error hidden"></div>
        <form id="login-form">
          <div class="form-group">
            <label class="form-label">Username</label>
            <input id="login-username" type="text" class="form-input" placeholder="admin" required autofocus autocomplete="username">
          </div>
          <div class="form-group">
            <label class="form-label">Password</label>
            <input id="login-password" type="password" class="form-input" placeholder="${isSetup ? 'Minimo 12 caratteri' : '••••••••••••'}" required autocomplete="${isSetup ? 'new-password' : 'current-password'}">
            ${isSetup ? '<div class="form-hint">Utilizza una password forte con almeno 12 caratteri</div>' : ''}
          </div>
          ${isSetup ? `
          <div class="form-group">
            <label class="form-label">Conferma Password</label>
            <input id="login-confirm" type="password" class="form-input" placeholder="Ripeti la password" required autocomplete="new-password">
          </div>` : ''}
          <button type="submit" class="btn btn-primary w-full" style="justify-content:center;margin-top:8px" id="login-submit">
            ${isSetup ? 'Crea Account' : 'Accedi'}
          </button>
        </form>
      </div>
    </div>`;

  const form = document.getElementById('login-form');
  const errorEl = document.getElementById('login-error');

  form.onsubmit = async (e) => {
    e.preventDefault();
    errorEl.classList.add('hidden');
    const btn = document.getElementById('login-submit');
    btn.disabled = true;
    btn.textContent = '...';

    const username = document.getElementById('login-username').value;
    const password = document.getElementById('login-password').value;

    try {
      if (isSetup) {
        const confirm = document.getElementById('login-confirm').value;
        if (password !== confirm) throw new Error('Le password non coincidono');
        if (password.length < 12) throw new Error('La password deve avere almeno 12 caratteri');
        const data = await auth.setup(username, password);
        onLogin(data.user);
      } else {
        const data = await auth.login(username, password);
        onLogin(data.user);
      }
    } catch (err) {
      errorEl.textContent = err.message || 'Errore di autenticazione';
      errorEl.classList.remove('hidden');
      btn.disabled = false;
      btn.textContent = isSetup ? 'Crea Account' : 'Accedi';
    }
  };
}