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

  const title = document.querySelector('[data-instance-modal-title]');
  const closeBtn = document.querySelector('[data-instance-close]');
  const newBtn = document.querySelector('[data-instance-new]');
  const cancelBtn = document.querySelector('[data-instance-cancel]');

  const currentIdInput = form.querySelector('input[name="current_id"]');
  const idInput = form.querySelector('input[name="instance_id"]');
  const nameInput = form.querySelector('input[name="name"]');
  const urlInput = form.querySelector('input[name="url"]');
  const tokenInput = form.querySelector('input[name="token"]');
  const primaryInput = form.querySelector('input[name="is_primary"]');

  const resetForm = () => {
    if (currentIdInput) currentIdInput.value = '';
    if (idInput) idInput.value = '';
    if (nameInput) nameInput.value = '';
    if (urlInput) urlInput.value = '';
    if (tokenInput) tokenInput.value = '';
    if (primaryInput) primaryInput.checked = false;
  };

  const openModal = () => {
    modal.classList.add('is-open');
    modal.setAttribute('aria-hidden', 'false');
  };

  const closeModal = () => {
    modal.classList.remove('is-open');
    modal.setAttribute('aria-hidden', 'true');
  };

  document.querySelectorAll('[data-instance-edit]').forEach((btn) => {
    btn.addEventListener('click', () => {
      const card = btn.closest('[data-instance-id]');
      if (!card) return;
      if (currentIdInput) currentIdInput.value = card.dataset.instanceId || '';
      if (idInput) idInput.value = card.dataset.instanceId || '';
      if (nameInput) nameInput.value = card.dataset.name || '';
      if (urlInput) urlInput.value = card.dataset.url || '';
      if (tokenInput) tokenInput.value = '';
      if (primaryInput) primaryInput.checked = card.dataset.primary === '1';
      if (title) title.textContent = 'Instanz bearbeiten';
      openModal();
    });
  });

  const apiCall = async (action, payload = {}) => {
    const res = await fetch(`/module/pihole/api?action=${encodeURIComponent(action)}`, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload),
    });
    const data = await res.json().catch(() => ({}));
    if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
    return data;
  };

  document.querySelectorAll('[data-instance-test]').forEach((btn) => {
    btn.addEventListener('click', async () => {
      const card = btn.closest('[data-instance-id]');
      if (!card) return;
      const instanceId = card.dataset.instanceId || '';
      const resultEl = card.querySelector('[data-instance-result]');
      if (resultEl) {
        resultEl.classList.remove('is-ok', 'is-auth', 'is-unreachable', 'is-invalid', 'is-error');
        resultEl.textContent = 'Teste Verbindung...';
      }
      try {
        const res = await apiCall('test', { instance: instanceId });
        if (resultEl) {
          const statusClass = res.status ? `is-${res.status}` : 'is-ok';
          resultEl.classList.add(statusClass);
          resultEl.textContent = res.message || 'Verbindung OK.';
        }
      } catch (err) {
        if (resultEl) {
          const msg = err.message || 'Fehler';
          resultEl.classList.add('is-error');
          resultEl.textContent = `Test fehlgeschlagen: ${msg}`;
        }
      }
    });
  });

  if (newBtn) {
    newBtn.addEventListener('click', () => {
      resetForm();
      if (title) title.textContent = 'Neue Instanz';
      openModal();
    });
  }

  if (closeBtn) {
    closeBtn.addEventListener('click', () => closeModal());
  }

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