(() => {
  const form = document.querySelector('[data-host-form]');
  if (!form) return;

  const idInput = form.querySelector('input[name="id"]');
  const nameInput = form.querySelector('input[name="name"]');
  const hostInput = form.querySelector('input[name="host"]');
  const portInput = form.querySelector('input[name="port"]');
  const userInput = form.querySelector('input[name="username"]');
  const authSelect = form.querySelector('select[name="auth_type"]');
  const keyInput = form.querySelector('input[name="key_path"]');
  const passInput = form.querySelector('input[name="password"]');
  const imageInput = form.querySelector('input[name="image_url"]');
  const submitBtn = form.querySelector('[data-host-submit]');
  const cancelBtn = form.querySelector('[data-host-cancel]');

  const resetForm = () => {
    if (idInput) idInput.value = '';
    if (nameInput) nameInput.value = '';
    if (hostInput) hostInput.value = '';
    if (portInput) portInput.value = '22';
    if (userInput) userInput.value = '';
    if (authSelect) authSelect.value = 'key';
    if (keyInput) keyInput.value = '';
    if (passInput) passInput.value = '';
    if (imageInput) imageInput.value = '';
    if (submitBtn) submitBtn.textContent = 'Speichern';
  };

  document.querySelectorAll('[data-host-edit]').forEach((btn) => {
    btn.addEventListener('click', () => {
      const card = btn.closest('.host-card');
      if (!card) return;
      if (idInput) idInput.value = card.dataset.hostId || '';
      if (nameInput) nameInput.value = card.dataset.name || '';
      if (hostInput) hostInput.value = card.dataset.host || '';
      if (portInput) portInput.value = card.dataset.port || '22';
      if (userInput) userInput.value = card.dataset.username || '';
      if (authSelect) authSelect.value = card.dataset.auth || 'key';
      if (keyInput) keyInput.value = card.dataset.keyPath || '';
      if (passInput) passInput.value = '';
      if (imageInput) imageInput.value = card.dataset.imageUrl || '';
      if (submitBtn) submitBtn.textContent = 'Aktualisieren';
      const details = btn.closest('details');
      if (details) details.removeAttribute('open');
      form.scrollIntoView({ behavior: 'smooth', block: 'start' });
    });
  });

  if (cancelBtn) {
    cancelBtn.addEventListener('click', (e) => {
      e.preventDefault();
      resetForm();
    });
  }

  const updateStatus = (card, status) => {
    const dot = card.querySelector('[data-host-status]');
    if (!dot) return;
    dot.classList.remove('status-ok', 'status-auth', 'status-down');
    if (status === 'ok') dot.classList.add('status-ok');
    else if (status === 'down') dot.classList.add('status-down');
    else dot.classList.add('status-auth');
  };

  const fetchStatus = (card) => {
    const id = card.dataset.hostId;
    if (!id) return;
    fetch(`${window.location.pathname}?status_json=1&id=${encodeURIComponent(id)}`, { cache: 'no-store' })
      .then((res) => res.json())
      .then((data) => {
        if (data && data.ok) {
          updateStatus(card, data.status);
        }
      })
      .catch(() => {});
  };

  document.querySelectorAll('.host-card').forEach((card) => {
    fetchStatus(card);
  });
})();