(function () {
  'use strict';

  window.initPiholeInstancesModule = function initPiholeInstancesModule(rootNode) {
    const scope = rootNode instanceof Element ? rootNode : document;
    const modal = scope.querySelector('[data-instance-modal]');
    const form = scope.querySelector('[data-instance-form]');

    scope.querySelectorAll('[data-instance-test]').forEach((button) => {
      if (button.dataset.piholeBound === '1') return;
      button.dataset.piholeBound = '1';
      button.addEventListener('click', async (event) => {
        event.preventDefault();
        const card = button.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 fetch(`/api/pihole/index.php?action=test`, {
            method: 'POST',
            credentials: 'same-origin',
            headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
            body: JSON.stringify({ instance: instanceId }),
          });
          const data = await res.json().catch(() => ({}));
          if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
          if (resultEl) {
            resultEl.classList.add(data.status ? `is-${data.status}` : 'is-ok');
            resultEl.textContent = data.message || 'Verbindung OK.';
          }
        } catch (err) {
          if (resultEl) {
            resultEl.classList.add('is-error');
            resultEl.textContent = `Test fehlgeschlagen: ${err.message || 'Fehler'}`;
          }
        }
      });
    });

    if (!modal || !form || modal.dataset.piholeBound === '1') return;
    modal.dataset.piholeBound = '1';

    const title = scope.querySelector('[data-instance-modal-title]');
    const closeBtn = scope.querySelector('[data-instance-close]');
    const newBtn = scope.querySelector('[data-instance-new]');
    const cancelBtn = scope.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 passwordInput = form.querySelector('input[name="password"]');
    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 (passwordInput) passwordInput.value = '';
      if (primaryInput) primaryInput.checked = false;
    };

    const openModal = () => {
      modal.classList.add('is-open');
      modal.setAttribute('aria-hidden', 'false');
      if (idInput) window.setTimeout(() => idInput.focus(), 20);
    };

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

    scope.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 (passwordInput) passwordInput.value = '';
        if (primaryInput) primaryInput.checked = card.dataset.primary === '1';
        if (title) title.textContent = 'Instanz bearbeiten';
        openModal();
      });
    });

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

    closeBtn?.addEventListener('click', closeModal);
    cancelBtn?.addEventListener('click', () => {
      resetForm();
      closeModal();
    });

    modal.addEventListener('click', (event) => {
      if (event.target === modal) closeModal();
    });

    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape' && modal.classList.contains('is-open')) {
        closeModal();
      }
    });
  };

  if (document.querySelector('[data-instance-modal]')) {
    window.initPiholeInstancesModule(document);
  }
})();