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

  const idInput = form.querySelector('input[name="id"]');
  const labelInput = form.querySelector('input[name="label"]');
  const commandInput = form.querySelector('textarea[name="command"]');
  const timeoutInput = form.querySelector('input[name="timeout_sec"]');
  const adminInput = form.querySelector('input[name="admin_only"]');
  const submitBtn = form.querySelector('[data-command-submit]');
  const cancelBtn = form.querySelector('[data-command-cancel]');

  const resetForm = () => {
    if (idInput) idInput.value = '';
    if (labelInput) labelInput.value = '';
    if (commandInput) commandInput.value = '';
    if (timeoutInput) timeoutInput.value = '';
    if (adminInput) adminInput.checked = false;
    if (submitBtn) submitBtn.textContent = 'Speichern';
  };

  document.querySelectorAll('[data-command-edit]').forEach((btn) => {
    btn.addEventListener('click', () => {
      const item = btn.closest('.command-item');
      if (!item) return;
      if (idInput) idInput.value = item.dataset.commandId || '';
      if (labelInput) labelInput.value = item.dataset.label || '';
      if (commandInput) commandInput.value = item.dataset.command || '';
      if (timeoutInput) timeoutInput.value = item.dataset.timeout || '';
      if (adminInput) adminInput.checked = item.dataset.admin === '1';
      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();
    });
  }

  if (!list) return;

  let dragging = null;

  list.querySelectorAll('.command-item').forEach((item) => {
    item.addEventListener('dragstart', () => {
      dragging = item;
      item.classList.add('is-dragging');
    });
    item.addEventListener('dragend', () => {
      item.classList.remove('is-dragging');
      dragging = null;
      saveOrder();
    });
  });

  list.addEventListener('dragover', (e) => {
    e.preventDefault();
    if (!dragging) return;
    const after = getDragAfterElement(list, e.clientY);
    if (after == null) {
      list.appendChild(dragging);
    } else if (after !== dragging) {
      list.insertBefore(dragging, after);
    }
  });

  const getDragAfterElement = (container, y) => {
    const elements = [...container.querySelectorAll('.command-item:not(.is-dragging)')];
    return elements.reduce(
      (closest, child) => {
        const box = child.getBoundingClientRect();
        const offset = y - box.top - box.height / 2;
        if (offset < 0 && offset > closest.offset) {
          return { offset, element: child };
        }
        return closest;
      },
      { offset: Number.NEGATIVE_INFINITY, element: null }
    ).element;
  };

  const saveOrder = () => {
    const order = [...list.querySelectorAll('.command-item')].map((el) => el.dataset.commandId);
    fetch(window.location.pathname + '?reorder_json=1', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ order }),
      cache: 'no-store',
    }).catch(() => {});
  };
})();