{% extends 'base/layout.html' %}
{% load i18n %}

{% block title %}{% trans "Edit Object Link" %}{% endblock %}

{% block content %}
<div class="row mb-3">
  <div class="col">
    <h1 class="h2">{% trans "Edit Object Link Types" %}</h1>
    <p class="text-muted mb-0">
      {% trans "Add or remove object types for Netbox object and Security object. Changes are applied immediately." %}
    </p>
  </div>
  <div class="col-auto d-print-none">
    <a href="{{ back_url }}" class="btn btn-outline-secondary">{% trans "Back" %}</a>
  </div>
</div>

<div id="object-link-config-feedback" class="mb-3" hidden></div>

<style>
  .object-link-config-add-menu {
    min-width: min(24rem, 90vw);
  }
  .object-link-config-add-items {
    max-height: calc(20 * 2.25rem);
    overflow-y: auto;
  }
</style>

<form method="post" id="object-link-config-form" class="form">
  {% csrf_token %}
  <div id="object-link-config-hidden-host">
    {% for entry in host_types.selected %}
    <input type="hidden" name="host_types" value="{{ entry.ref }}">
    {% endfor %}
  </div>
  <div id="object-link-config-hidden-security">
    {% for entry in security_types.selected %}
    <input type="hidden" name="security_types" value="{{ entry.ref }}">
    {% endfor %}
  </div>

  <div class="row">
    <div class="col-md-6 mb-3">
      {% include "netbox_nsm/inc/object_link_config_type_panel.html" with side="host" field_name="host_types" schema_field=state.host_field selected=host_types.selected available=host_types.available can_change=can_change %}
    </div>
    <div class="col-md-6 mb-3">
      {% include "netbox_nsm/inc/object_link_config_type_panel.html" with side="security" field_name="security_types" schema_field=state.security_field selected=security_types.selected available=security_types.available can_change=can_change %}
    </div>
  </div>
</form>

{% if can_change %}
<div class="modal fade" id="object-link-config-destructive-modal" tabindex="-1" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">{% trans "Confirm destructive change" %}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{% trans 'Close' %}"></button>
      </div>
      <div class="modal-body">
        <p id="object-link-config-destructive-message" class="mb-3"></p>
        <div class="form-check">
          <input type="checkbox" class="form-check-input" id="object-link-config-allow-destructive">
          <label class="form-check-label" for="object-link-config-allow-destructive">
            {% trans "Allow destructive changes" %}
          </label>
        </div>
        <p class="text-muted small mb-0 mt-2">
          {% trans "Required when removing types that are still referenced by existing link rows." %}
        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">
          {% trans "Cancel" %}
        </button>
        <button type="button" class="btn btn-danger" id="object-link-config-destructive-confirm" disabled>
          {% trans "Remove anyway" %}
        </button>
      </div>
    </div>
  </div>
</div>
{% endif %}

<script>
(function () {
  const form = document.getElementById('object-link-config-form');
  const feedback = document.getElementById('object-link-config-feedback');
  if (!form) return;

  const previewUrl = '{{ preview_url|escapejs }}';
  const applyUrl = '{{ apply_url|escapejs }}';
  const canChange = {{ can_change|yesno:"true,false" }};
  if (!canChange) return;

  const hiddenHost = document.getElementById('object-link-config-hidden-host');
  const hiddenSecurity = document.getElementById('object-link-config-hidden-security');
  const destructiveModalEl = document.getElementById('object-link-config-destructive-modal');
  const destructiveMessage = document.getElementById('object-link-config-destructive-message');
  const destructiveConfirm = document.getElementById('object-link-config-destructive-confirm');
  const allowDestructiveCheckbox = document.getElementById('object-link-config-allow-destructive');
  let destructiveModal = null;

  function getDestructiveModal() {
    if (destructiveModal !== null || !destructiveModalEl) {
      return destructiveModal;
    }
    if (typeof Modal === 'undefined') {
      return null;
    }
    try {
      destructiveModal = Modal.getOrCreateInstance(destructiveModalEl);
    } catch (err) {
      destructiveModal = null;
    }
    return destructiveModal;
  }

  let pendingApply = null;
  let revertOnCancel = null;

  const msgUpdated = '{% trans "Object Link schema updated." %}';
  const msgImpactSuffix = '{% trans "existing link row(s) may reference removed types." %}';
  const msgDestructivePrefix = '{% trans "Removing this type would affect" %}';
  const msgDestructiveSuffix = '{% trans "existing link row(s). Confirm to proceed." %}';

  function refsForField(fieldName) {
    const container = fieldName === 'host_types' ? hiddenHost : hiddenSecurity;
    return Array.from(container.querySelectorAll('input[name="' + fieldName + '"]'))
      .map((input) => input.value);
  }

  function setRefsForField(fieldName, refs) {
    const container = fieldName === 'host_types' ? hiddenHost : hiddenSecurity;
    container.innerHTML = '';
    refs.forEach((ref) => {
      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = fieldName;
      input.value = ref;
      container.appendChild(input);
    });
  }

  function buildFormData(allowDestructive) {
    const data = new FormData(form);
    data.delete('allow_destructive');
    if (allowDestructive) {
      data.append('allow_destructive', 'on');
    }
    return data;
  }

  function showFeedback(kind, message) {
    if (!feedback) return;
    feedback.hidden = false;
    feedback.className = 'alert alert-' + kind + ' mb-3';
    feedback.textContent = message;
  }

  function clearFeedback() {
    if (!feedback) return;
    feedback.hidden = true;
    feedback.textContent = '';
  }

  const msgAllSelected = '{% trans "All available types are already selected." %}';
  const msgNoMatch = '{% trans "No matching types." %}';
  const msgQuickSearch = '{% trans "Quick search" %}';

  function filterAddMenu(panel, query) {
    const itemsContainer = panel.querySelector('.object-link-config-add-items');
    const noMatch = panel.querySelector('.object-link-config-add-no-match');
    if (!itemsContainer) return;
    const q = (
      query !== undefined
        ? query
        : panel.querySelector('.object-link-config-add-search')?.value || ''
    ).trim().toLowerCase();
    let visible = 0;
    itemsContainer.querySelectorAll('.object-link-config-add').forEach((btn) => {
      const label = (btn.dataset.label || btn.textContent || '').toLowerCase();
      const show = !q || label.includes(q);
      btn.classList.toggle('d-none', !show);
      if (show) visible += 1;
    });
    if (noMatch) {
      noMatch.classList.toggle('d-none', visible > 0 || !q);
    }
  }

  function resetAddMenuSearch(panel) {
    const input = panel.querySelector('.object-link-config-add-search');
    if (input) {
      input.value = '';
    }
    filterAddMenu(panel, '');
  }

  function initAddMenuSearch(panel) {
    const toggle = panel.querySelector('.object-link-config-add-toggle');
    const searchInput = panel.querySelector('.object-link-config-add-search');
    if (!toggle || !searchInput || toggle.dataset.addSearchInit === '1') {
      return;
    }
    toggle.dataset.addSearchInit = '1';
    toggle.addEventListener('shown.bs.dropdown', function () {
      resetAddMenuSearch(panel);
      searchInput.focus();
    });
    searchInput.addEventListener('input', function () {
      filterAddMenu(panel);
    });
    searchInput.addEventListener('mousedown', function (event) {
      event.stopPropagation();
    });
    searchInput.addEventListener('keydown', function (event) {
      event.stopPropagation();
    });
  }

  document.querySelectorAll('.object-link-config-panel').forEach(initAddMenuSearch);

  function setAddToggleEmpty(panel, empty) {
    const toggle = panel.querySelector('.object-link-config-add-toggle');
    if (!toggle) return;
    toggle.classList.toggle('disabled', empty);
    toggle.setAttribute('aria-disabled', empty ? 'true' : 'false');
    toggle.title = empty ? msgAllSelected : '{% trans "Add type" %}';
  }

  function panelForSide(side) {
    return document.querySelector('.object-link-config-panel[data-side="' + side + '"]');
  }

  function ensureEmptyRow(tbody) {
    if (tbody.querySelector('tr[data-ref]')) {
      const emptyRow = tbody.querySelector('.object-link-config-empty-row');
      if (emptyRow) emptyRow.remove();
      return;
    }
    if (tbody.querySelector('.object-link-config-empty-row')) return;
    const colspan = parseInt(tbody.dataset.colCount || '2', 10);
    const row = document.createElement('tr');
    row.className = 'object-link-config-empty-row';
    const cell = document.createElement('td');
    cell.colSpan = colspan;
    cell.className = 'text-muted';
    cell.textContent = '{% trans "No types selected." %}';
    row.appendChild(cell);
    tbody.appendChild(row);
  }

  function addRow(side, ref, label) {
    const panel = panelForSide(side);
    if (!panel) return;
    const tbody = panel.querySelector('.object-link-config-rows');
    const row = document.createElement('tr');
    row.dataset.ref = ref;
    const labelCell = document.createElement('td');
    labelCell.textContent = label;
    row.appendChild(labelCell);
    const countCell = document.createElement('td');
    countCell.className = 'text-end';
    countCell.textContent = '0';
    row.appendChild(countCell);
    const actionCell = document.createElement('td');
    actionCell.className = 'text-end text-nowrap';
    const removeBtn = document.createElement('button');
    removeBtn.type = 'button';
    removeBtn.className = 'btn btn-sm btn-danger object-link-config-remove';
    removeBtn.title = '{% trans "Remove" %}';
    removeBtn.setAttribute('aria-label', '{% trans "Remove" %}');
    removeBtn.dataset.ref = ref;
    removeBtn.dataset.label = label;
    removeBtn.innerHTML = '<i class="mdi mdi-trash-can-outline" aria-hidden="true"></i>';
    actionCell.appendChild(removeBtn);
    row.appendChild(actionCell);
    tbody.appendChild(row);
    const emptyRow = tbody.querySelector('.object-link-config-empty-row');
    if (emptyRow) emptyRow.remove();

    const itemsContainer = panel.querySelector('.object-link-config-add-items');
    const addItem = itemsContainer?.querySelector('.object-link-config-add[data-ref="' + ref + '"]');
    if (addItem) {
      addItem.remove();
    }
    filterAddMenu(panel);
    if (itemsContainer && !itemsContainer.querySelector('.object-link-config-add')) {
      setAddToggleEmpty(panel, true);
    }
  }

  function removeRow(side, ref) {
    const panel = panelForSide(side);
    if (!panel) return;
    const tbody = panel.querySelector('.object-link-config-rows');
    const row = tbody.querySelector('tr[data-ref="' + ref + '"]');
    if (!row) return;
    const label = row.querySelector('td')?.textContent || ref;
    row.remove();
    ensureEmptyRow(tbody);

    let itemsContainer = panel.querySelector('.object-link-config-add-items');
    const addMenu = panel.querySelector('.object-link-config-add-menu');
    if (!itemsContainer && addMenu) {
      const emptyText = addMenu.querySelector('.dropdown-item-text');
      if (emptyText) {
        emptyText.remove();
      }
      const searchWrap = addMenu.querySelector('.object-link-config-add-search-wrap');
      if (!searchWrap) {
        const wrap = document.createElement('div');
        wrap.className = 'px-2 py-2 border-bottom object-link-config-add-search-wrap';
        wrap.innerHTML =
          '<div class="input-group input-group-flat quicksearch input-group-sm">' +
          '<span class="input-group-text"><i class="mdi mdi-magnify" aria-hidden="true"></i></span>' +
          '<input type="search" class="form-control object-link-config-add-search" ' +
          'placeholder="' + msgQuickSearch + '" autocomplete="off" ' +
          'aria-label="' + msgQuickSearch + '">' +
          '</div>';
        addMenu.prepend(wrap);
      }
      itemsContainer = document.createElement('div');
      itemsContainer.className = 'object-link-config-add-items';
      addMenu.appendChild(itemsContainer);
      if (!addMenu.querySelector('.object-link-config-add-no-match')) {
        const noMatch = document.createElement('div');
        noMatch.className =
          'dropdown-item-text text-muted object-link-config-add-no-match px-3 py-2 d-none';
        noMatch.textContent = msgNoMatch;
        addMenu.appendChild(noMatch);
      }
      initAddMenuSearch(panel);
    }
    if (!itemsContainer) return;

    const addBtn = document.createElement('button');
    addBtn.type = 'button';
    addBtn.className = 'dropdown-item object-link-config-add';
    addBtn.dataset.ref = ref;
    addBtn.dataset.label = label;
    addBtn.textContent = label;
    itemsContainer.appendChild(addBtn);
    filterAddMenu(panel);
    setAddToggleEmpty(panel, false);
  }

  async function fetchJson(url, data) {
    const headers = { 'X-Requested-With': 'XMLHttpRequest' };
    const csrfInput = form.querySelector('[name=csrfmiddlewaretoken]');
    if (csrfInput && csrfInput.value) {
      headers['X-CSRFToken'] = csrfInput.value;
    }
    const resp = await fetch(url, {
      method: 'POST',
      body: data,
      headers: headers,
      credentials: 'same-origin',
    });
    const json = await resp.json().catch(() => ({}));
    if (!resp.ok) {
      const err = json.error || (json.errors && JSON.stringify(json.errors)) || resp.statusText;
      throw new Error(err);
    }
    return json;
  }

  async function applyChanges(allowDestructive) {
    const data = buildFormData(allowDestructive);
    return fetchJson(applyUrl, data);
  }

  async function previewChanges() {
    return fetchJson(previewUrl, buildFormData(false));
  }

  function runPendingApply() {
    if (!pendingApply) return;
    const job = pendingApply;
    pendingApply = null;
    job();
  }

  if (allowDestructiveCheckbox) {
    allowDestructiveCheckbox.addEventListener('change', function () {
      destructiveConfirm.disabled = !allowDestructiveCheckbox.checked;
    });
  }
  if (destructiveConfirm) {
    destructiveConfirm.addEventListener('click', function () {
      revertOnCancel = null;
      getDestructiveModal()?.hide();
      runPendingApply();
    });
  }
  if (destructiveModalEl) {
    destructiveModalEl.addEventListener('hidden.bs.modal', function () {
      if (revertOnCancel) {
        setRefsForField('host_types', revertOnCancel.host);
        setRefsForField('security_types', revertOnCancel.security);
        revertOnCancel = null;
      }
      pendingApply = null;
      if (allowDestructiveCheckbox) {
        allowDestructiveCheckbox.checked = false;
        destructiveConfirm.disabled = true;
      }
    });
  }

  async function commitChange(side, fieldName, nextRefs, ref, label, action) {
    clearFeedback();
    const previousHost = refsForField('host_types');
    const previousSecurity = refsForField('security_types');
    setRefsForField(fieldName, nextRefs);

    try {
      const preview = await previewChanges();
      if (preview.destructive) {
        revertOnCancel = { host: previousHost, security: previousSecurity };
        pendingApply = async () => {
          try {
            await applyChanges(true);
            if (action === 'add') {
              addRow(side, ref, label);
            } else {
              removeRow(side, ref);
            }
            if (preview.impact_count) {
              showFeedback(
                'warning',
                msgUpdated + ' ' + preview.impact_count + ' ' + msgImpactSuffix
              );
            } else {
              showFeedback('success', msgUpdated);
            }
          } catch (err) {
            setRefsForField('host_types', previousHost);
            setRefsForField('security_types', previousSecurity);
            showFeedback('danger', String(err.message || err));
          }
        };
        if (destructiveMessage) {
          destructiveMessage.textContent =
            msgDestructivePrefix + ' ' + preview.impact_count + ' ' + msgDestructiveSuffix;
        }
        const modal = getDestructiveModal();
        if (modal) {
          modal.show();
        } else if (window.confirm(
          msgDestructivePrefix + ' ' + preview.impact_count + ' ' + msgDestructiveSuffix
        )) {
          revertOnCancel = null;
          runPendingApply();
        }
        return;
      }

      await applyChanges(false);
      if (action === 'add') {
        addRow(side, ref, label);
      } else {
        removeRow(side, ref);
      }
      showFeedback('success', msgUpdated);
    } catch (err) {
      setRefsForField('host_types', previousHost);
      setRefsForField('security_types', previousSecurity);
      showFeedback('danger', String(err.message || err));
    }
  }

  function handleAddType(addBtn, event) {
    event.preventDefault();
    event.stopPropagation();
    const panel = addBtn.closest('.object-link-config-panel');
    if (!panel) return;
    const side = panel.dataset.side;
    const fieldName = panel.dataset.fieldName;
    const ref = addBtn.dataset.ref;
    const label = addBtn.dataset.label || ref;
    const currentRefs = refsForField(fieldName);
    if (currentRefs.includes(ref)) return;
    const nextRefs = currentRefs.concat(ref);
    void commitChange(side, fieldName, nextRefs, ref, label, 'add');
  }

  function handleRemoveType(removeBtn, event) {
    if (removeBtn.disabled) {
      event.preventDefault();
      return;
    }
    event.preventDefault();
    const panel = removeBtn.closest('.object-link-config-panel');
    if (!panel) return;
    const side = panel.dataset.side;
    const fieldName = panel.dataset.fieldName;
    const ref = removeBtn.dataset.ref;
    const label = removeBtn.dataset.label || ref;
    const nextRefs = refsForField(fieldName).filter((value) => value !== ref);
    void commitChange(side, fieldName, nextRefs, ref, label, 'remove');
  }

  form.addEventListener('mousedown', function (event) {
    if (event.target.closest('.object-link-config-add-search')) {
      return;
    }
    const addBtn = event.target.closest('.object-link-config-add');
    if (addBtn && form.contains(addBtn)) {
      handleAddType(addBtn, event);
    }
  }, true);

  form.addEventListener('click', function (event) {
    const addToggle = event.target.closest('.object-link-config-add-toggle');
    if (addToggle && addToggle.classList.contains('disabled')) {
      event.preventDefault();
      event.stopPropagation();
      return;
    }

    const removeBtn = event.target.closest('.object-link-config-remove');
    if (removeBtn) {
      handleRemoveType(removeBtn, event);
    }
  });
})();
</script>
{% endblock %}