/* global api */

const hostEl = document.getElementById('host');
const userEl = document.getElementById('username');
const passEl = document.getElementById('password');
const saveEl = document.getElementById('saveCredentials');
const btnEl  = document.getElementById('loginBtn');
const errEl  = document.getElementById('error');

// Restore saved credentials on load
(async () => {
  const saved = await api.credentials.load();
  if (saved) {
    hostEl.value = saved.host || '';
    userEl.value = saved.username || '';
    passEl.value = saved.password || '';
    saveEl.checked = true;
  }
  // Focus first empty required field
  if (!hostEl.value)      hostEl.focus();
  else if (!userEl.value) userEl.focus();
  else                    passEl.focus();
})();

document.getElementById('loginForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  clearError();

  const host     = hostEl.value.trim();
  const username = userEl.value.trim();
  const password = passEl.value;

  if (!host || !username || !password) {
    showError('Bitte alle Felder ausfüllen.');
    return;
  }

  setLoading(true);

  const result = await api.proxmox.login({ host, username, password });

  if (!result.success) {
    setLoading(false);
    showError(result.error || 'Anmeldung fehlgeschlagen.');
    return;
  }

  if (saveEl.checked) {
    await api.credentials.save({ host, username, password });
  } else {
    await api.credentials.clear();
  }

  // Main process will switch window to vms.html
});

function setLoading(on) {
  btnEl.disabled = on;
  btnEl.textContent = on ? 'Anmelden…' : 'Anmelden';
}

function showError(msg) {
  errEl.textContent = msg;
  errEl.classList.remove('hidden');
}

function clearError() {
  errEl.classList.add('hidden');
}