{% extends 'generic/_base.html' %}
{% load i18n static %}

{% block title %}IP Analysis{% endblock %}

{% block content %}
<link rel="stylesheet" href="{% static 'netbox_nsm/css/nsm_lazy_picker.css' %}>
<style>
.nsm-ipa-col {
  border: 1px solid var(--bs-border-color);
  border-radius: .5rem;
  overflow: visible;
}
.nsm-ipa-multi-input {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}
.nsm-ipa-multi-input-box {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.35rem;
  padding: 0.35rem 0.55rem;
  border: 1px solid var(--tblr-border-color, var(--bs-border-color));
  border-radius: var(--tblr-border-radius, 0.375rem);
  background: var(--tblr-bg-surface-secondary, var(--tblr-secondary-bg, #eef2f7));
  cursor: text;
}
[data-bs-theme="dark"] .nsm-ipa-multi-input-box {
  background: #1e2736;
  border-color: #5b6776;
}
.nsm-ipa-multi-input-box:focus-within {
  border-color: var(--tblr-primary, var(--bs-primary));
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--tblr-primary, #206bc4) 22%, transparent);
}
.nsm-ipa-col--b .nsm-ipa-multi-input-box:focus-within {
  border-color: var(--tblr-success, var(--bs-success));
  box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--tblr-success, #2fb344) 22%, transparent);
}
.nsm-ipa-multi-input-field {
  flex: 1 1 9rem;
  min-width: 9rem;
  margin: 0;
  padding: 0.15rem 0.25rem;
  border: 0;
  background: transparent;
  outline: none;
  color: var(--tblr-body-color, var(--bs-body-color));
  font-size: 0.8125rem;
  line-height: 1.35;
  box-shadow: none;
}
.nsm-ipa-multi-input-field::placeholder {
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
  opacity: 0.95;
}
.nsm-ipa-drop {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 2px);
  background: var(--tblr-bg-surface, var(--bs-body-bg));
  border: 1px solid var(--tblr-border-color, var(--bs-border-color));
  border-radius: var(--tblr-border-radius, 0.375rem);
  max-height: 16rem;
  overflow-y: auto;
  z-index: 200;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}
.nsm-ipa-drop-item {
  padding: 0.45rem 0.75rem;
  cursor: pointer;
  font-size: 0.8125rem;
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.nsm-ipa-drop-item:hover,
.nsm-ipa-drop-item.active {
  background: color-mix(in srgb, var(--tblr-primary, #206bc4) 10%, transparent);
}
.nsm-ipa-drop-item .nsm-ipa-drop-type {
  font-size: 0.7rem;
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
}
.nsm-ipa-drop-msg {
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
}

.nsm-ipa-objects-scroll {
  max-height: 28rem;
  overflow: auto;
  font-size: .82rem;
}
.nsm-ipa-objects-table {
  table-layout: fixed;
  width: 100%;
  margin-bottom: 0;
}
.nsm-ipa-objects-table th,
.nsm-ipa-objects-table td {
  vertical-align: top;
  min-width: 12rem;
}
.nsm-ipa-object-head {
  background: var(--tblr-bg-surface-secondary, var(--bs-tertiary-bg));
  font-size: .8125rem;
}
.nsm-ipa-object-cell {
  font-size: .82rem;
}
.nsm-ipa-object-remove {
  flex-shrink: 0;
}
.nsm-ipa-selected-preview .nsm-ipa-object-cell {
  color: var(--tblr-secondary-color, var(--bs-secondary-color));
  font-size: .78rem;
}
.nsm-ipa-clear-all {
  font-size: .75rem;
  padding: 0 .25rem;
}
</style>

{% include "netbox_nsm/inc/addr_analysis_assets.html" %}
{{ ip_api_types|json_script:"nsm-ip-api-types" }}

<div class="container-fluid">
<div class="card">
  <div class="card-header d-flex align-items-center gap-2">
    <i class="mdi mdi-ip-network-outline text-primary"></i>
    <strong>IP Analysis</strong>
    <span class="text-muted ms-1 small">{% trans "Add one or more objects per column to compare IP resolution" %}</span>
  </div>
  <div class="card-body p-3">
    <div class="row g-3">

      {# ══ LINKE SPALTE ══ #}
      <div class="col-md-6">
        <div class="nsm-ipa-col h-100">
          <div class="p-3">
            <form method="get" id="nsm-ipa-form-left" class="mb-3">
              {% for sel in ip2_selections %}
              <input type="hidden" name="ip2_ct" value="{{ sel.ct }}">
              <input type="hidden" name="ip2_pk" value="{{ sel.pk }}">
              <input type="hidden" name="ip2_name" value="{{ sel.name }}">
              {% endfor %}
              <div id="nsm-left-hiddens">
                {% for sel in ip_selections %}
                <input type="hidden" name="ip_ct" value="{{ sel.ct }}" data-ct="{{ sel.ct }}" data-pk="{{ sel.pk }}">
                <input type="hidden" name="ip_pk" value="{{ sel.pk }}">
                <input type="hidden" name="ip_name" value="{{ sel.name }}">
                {% endfor %}
              </div>
              <div class="d-flex gap-2 align-items-start mb-2">
                <div class="nsm-ipa-multi-input nsm-lazy-picker flex-grow-1" id="nsm-multi-left">
                  <div class="nsm-ipa-multi-input-box" tabindex="-1">
                    <input type="text" class="nsm-ipa-multi-input-field" id="nsm-search-left"
                           placeholder="{% trans 'Search and add objects…' %}"
                           autocomplete="off" value=""
                           aria-label="{% trans 'Search and add objects' %}">
                  </div>
                  <div class="nsm-ipa-drop" id="nsm-drop-left" hidden></div>
                </div>
                <button type="submit" class="btn btn-sm btn-primary flex-shrink-0">{% trans "Analyze" %}</button>
              </div>
              {% if ip_selections %}
              <button type="button" class="btn btn-sm btn-link text-muted p-0 nsm-ipa-clear-all" data-side="left">
                {% trans "Clear all" %}
              </button>
              {% endif %}
            </form>

            <div id="nsm-left-objects-wrap">
              {% if ip_addr_columns %}
                {% include "netbox_nsm/inc/ipa_object_analysis_table.html" with columns=ip_addr_columns %}
              {% elif ip_selections %}
                <p class="text-muted small mb-0">{% trans "Click Analyze to resolve IP addresses." %}</p>
              {% else %}
                <div class="text-center text-muted py-4">
                  <i class="mdi mdi-cursor-default-click mdi-36px"></i>
                  <p class="mt-1 small">{% trans "Search and add objects…" %}</p>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>

      {# ══ RECHTE SPALTE ══ #}
      <div class="col-md-6">
        <div class="nsm-ipa-col h-100 nsm-ipa-col--b">
          <div class="p-3">
            <form method="get" id="nsm-ipa-form-right" class="mb-3">
              {% for sel in ip_selections %}
              <input type="hidden" name="ip_ct" value="{{ sel.ct }}">
              <input type="hidden" name="ip_pk" value="{{ sel.pk }}">
              <input type="hidden" name="ip_name" value="{{ sel.name }}">
              {% endfor %}
              <div id="nsm-right-hiddens">
                {% for sel in ip2_selections %}
                <input type="hidden" name="ip2_ct" value="{{ sel.ct }}" data-ct="{{ sel.ct }}" data-pk="{{ sel.pk }}">
                <input type="hidden" name="ip2_pk" value="{{ sel.pk }}">
                <input type="hidden" name="ip2_name" value="{{ sel.name }}">
                {% endfor %}
              </div>
              <div class="d-flex gap-2 align-items-start mb-2">
                <div class="nsm-ipa-multi-input nsm-lazy-picker flex-grow-1" id="nsm-multi-right">
                  <div class="nsm-ipa-multi-input-box" tabindex="-1">
                    <input type="text" class="nsm-ipa-multi-input-field" id="nsm-search-right"
                           placeholder="{% trans 'Search and add objects…' %}"
                           autocomplete="off" value=""
                           aria-label="{% trans 'Search and add objects' %}">
                  </div>
                  <div class="nsm-ipa-drop" id="nsm-drop-right" hidden></div>
                </div>
                <button type="submit" class="btn btn-sm btn-success flex-shrink-0">{% trans "Analyze" %}</button>
              </div>
              {% if ip2_selections %}
              <button type="button" class="btn btn-sm btn-link text-muted p-0 nsm-ipa-clear-all" data-side="right">
                {% trans "Clear all" %}
              </button>
              {% endif %}
            </form>

            <div id="nsm-right-objects-wrap">
              {% if ip2_addr_columns %}
                {% include "netbox_nsm/inc/ipa_object_analysis_table.html" with columns=ip2_addr_columns %}
              {% elif ip2_selections %}
                <p class="text-muted small mb-0">{% trans "Click Analyze to resolve IP addresses." %}</p>
              {% else %}
                <div class="text-center text-muted py-4">
                  <i class="mdi mdi-cursor-default-click mdi-36px"></i>
                  <p class="mt-1 small">{% trans "Search and add objects…" %}</p>
                </div>
              {% endif %}
            </div>
          </div>
        </div>
      </div>

    </div>{# /row #}
  </div>
</div>
</div>{# /container-fluid #}

<script src="{% url 'plugins:netbox_nsm:plugin_asset' asset_path='js/nsm_branch_api.js' %}?v=1"></script>
<script>
(function () {
  "use strict";

  function apiHeaders(extra) {
    if (window.NSM_BRANCH_API && window.NSM_BRANCH_API.mergeBranchHeaders) {
      return window.NSM_BRANCH_API.mergeBranchHeaders(extra);
    }
    return extra || {};
  }
  function apiFetch(url, options) {
    if (window.NSM_BRANCH_API && window.NSM_BRANCH_API.fetch) {
      return window.NSM_BRANCH_API.fetch(url, options);
    }
    return fetch(url, options);
  }

  var apiTypes = [];
  try {
    var el = document.getElementById("nsm-ip-api-types");
    if (el) apiTypes = JSON.parse(el.textContent) || [];
  } catch (_) {}

  function esc(s) {
    return String(s).replace(/&/g,"&amp;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/"/g,"&quot;");
  }
  function getCsrf() {
    var m = document.cookie.match(/csrftoken=([^;]+)/);
    return m ? m[1] : "";
  }
  function debounce(fn, ms) {
    var t; return function() { clearTimeout(t); var a=arguments,ctx=this; t=setTimeout(function(){fn.apply(ctx,a);},ms); };
  }

  function initCol(side) {
    var param = side === "left" ? "ip" : "ip2";
    var multiEl = document.getElementById("nsm-multi-" + side);
    var boxEl = multiEl && multiEl.querySelector(".nsm-ipa-multi-input-box");
    var searchEl = document.getElementById("nsm-search-" + side);
    var dropEl   = document.getElementById("nsm-drop-" + side);
    var objectsWrap = document.getElementById("nsm-" + side + "-objects-wrap");
    var hiddensEl = document.getElementById("nsm-" + side + "-hiddens");
    var formEl   = document.getElementById("nsm-ipa-form-" + side);
    if (!multiEl || !boxEl || !searchEl || !dropEl || !objectsWrap || !hiddensEl || !formEl) return;

    var selections = [];
    objectsWrap.querySelectorAll(".nsm-ipa-object-head").forEach(function (head) {
      selections.push({
        ct: head.dataset.ct,
        pk: head.dataset.pk,
        name: head.dataset.name || head.querySelector(".fw-semibold")?.textContent?.trim() || ""
      });
    });

    var _ctrl = null;

    function closeDrop() { dropEl.innerHTML = ""; dropEl.hidden = true; }

    function hasSelection(ct, pk) {
      return selections.some(function (s) { return s.ct === String(ct) && s.pk === String(pk); });
    }

    function renderPreviewTable() {
      if (!selections.length) {
        objectsWrap.innerHTML = '<div class="text-center text-muted py-4">'
          + '<i class="mdi mdi-cursor-default-click mdi-36px"></i>'
          + '<p class="mt-1 small">{% trans "Search and add objects…" %}</p></div>';
        return;
      }
      var html = '<div class="table-responsive nsm-ipa-objects-scroll nsm-ipa-selected-preview">'
        + '<table class="table table-sm table-bordered align-top mb-0 nsm-ipa-objects-table"><thead><tr>';
      selections.forEach(function (sel) {
        html += '<th class="nsm-ipa-object-head" data-ct="' + esc(sel.ct) + '" data-pk="' + esc(sel.pk) + '" data-name="' + esc(sel.name) + '">'
          + '<div class="d-flex align-items-center gap-2">'
          + '<span class="fw-semibold text-truncate" title="' + esc(sel.name) + '">' + esc(sel.name) + '</span>'
          + '<span class="badge bg-secondary-subtle text-secondary nsm-addr-count">—</span>'
          + '<button type="button" class="btn btn-sm btn-ghost-secondary py-0 px-1 ms-auto nsm-ipa-object-remove" title="{% trans "Remove" %}" aria-label="{% trans "Remove" %}">'
          + '<i class="mdi mdi-close"></i></button></div></th>';
      });
      html += '</tr></thead><tbody><tr>';
      selections.forEach(function () {
        html += '<td class="nsm-ipa-object-cell text-muted small">{% trans "Click Analyze to resolve IP addresses." %}</td>';
      });
      html += '</tr></tbody></table></div>';
      objectsWrap.innerHTML = html;
      bindObjectRemove(objectsWrap);
    }

    function syncDom() {
      hiddensEl.innerHTML = "";
      selections.forEach(function (sel) {
        ["ct", "pk", "name"].forEach(function (key) {
          var inp = document.createElement("input");
          inp.type = "hidden";
          inp.name = param + "_" + key;
          inp.value = sel[key];
          if (key === "ct") {
            inp.dataset.ct = sel.ct;
            inp.dataset.pk = sel.pk;
          }
          hiddensEl.appendChild(inp);
        });
      });
      renderPreviewTable();
    }

    function bindObjectRemove(root) {
      (root || objectsWrap).querySelectorAll(".nsm-ipa-object-remove").forEach(function (btn) {
        btn.addEventListener("click", function (e) {
          e.preventDefault();
          var head = btn.closest(".nsm-ipa-object-head");
          if (!head) return;
          selections = selections.filter(function (s) {
            return !(s.ct === head.dataset.ct && s.pk === head.dataset.pk);
          });
          syncDom();
        });
      });
    }
    bindObjectRemove(objectsWrap);

    function addPick(ctId, pk, name) {
      if (hasSelection(ctId, pk)) {
        closeDrop();
        searchEl.value = "";
        return;
      }
      selections.push({ ct: String(ctId), pk: String(pk), name: String(name) });
      syncDom();
      searchEl.value = "";
      closeDrop();
      searchEl.focus();
    }

    var doSearch = debounce(function(q) {
      if (!q.trim()) { closeDrop(); return; }
      if (_ctrl) _ctrl.abort();
      _ctrl = new AbortController();
      dropEl.innerHTML = "<div class='nsm-ipa-drop-msg'>{% trans 'Searching…' %}</div>";
      dropEl.hidden = false;

      var fetches = apiTypes.map(function(t) {
        var url = t.api_url + "?q=" + encodeURIComponent(q) + "&limit=20&brief=1";
        return apiFetch(url, { signal: _ctrl.signal, headers: apiHeaders({ "Accept":"application/json","X-CSRFToken":getCsrf() })})
          .then(function(r){ return r.json(); })
          .then(function(d){ return (d.results||[]).map(function(o){ return {ct:t.ct_id,pk:o.id,name:o.display||o.name||String(o.id),type:t.name}; }); })
          .catch(function(e){ if(e.name!=="AbortError") console.warn(e); return []; });
      });

      Promise.all(fetches).then(function(all) {
        if (_ctrl && _ctrl.signal.aborted) return;
        var items = [].concat.apply([], all);
        if (!items.length) {
          dropEl.innerHTML = "<div class='nsm-ipa-drop-msg'>{% trans 'No results' %}</div>";
          dropEl.hidden = false;
          return;
        }
        var html = "";
        items.forEach(function(item) {
          var picked = hasSelection(item.ct, item.pk) ? " opacity-50" : "";
          html += "<div class='nsm-ipa-drop-item" + picked + "' data-ct='" + esc(item.ct) + "' data-pk='" + esc(item.pk) + "' data-name='" + esc(item.name) + "'>"
                + esc(item.name) + " <span class='nsm-ipa-drop-type'>" + esc(item.type) + "</span></div>";
        });
        dropEl.innerHTML = html;
        dropEl.hidden = false;
        dropEl.querySelectorAll(".nsm-ipa-drop-item").forEach(function(el) {
          el.addEventListener("click", function() {
            addPick(el.dataset.ct, el.dataset.pk, el.dataset.name);
          });
        });
      });
    }, 250);

    searchEl.addEventListener("input", function() {
      doSearch(searchEl.value);
    });
    searchEl.addEventListener("focus", function() {
      if (searchEl.value.trim()) doSearch(searchEl.value);
    });
    boxEl.addEventListener("click", function (e) {
      if (e.target.closest(".nsm-ipa-object-remove")) return;
      searchEl.focus();
    });
    document.addEventListener("click", function(e) {
      if (!multiEl.contains(e.target)) closeDrop();
    });
    searchEl.addEventListener("keydown", function(e) {
      if (e.key === "Escape") closeDrop();
      if (e.key === "Enter") {
        e.preventDefault();
        var first = dropEl.querySelector(".nsm-ipa-drop-item:not(.opacity-50)");
        if (first) first.click();
      }
    });

  }

  document.querySelectorAll(".nsm-ipa-clear-all").forEach(function (btn) {
    btn.addEventListener("click", function () {
      var form = document.getElementById("nsm-ipa-form-" + btn.dataset.side);
      if (!form) return;
      var hiddens = form.querySelector("[id$='-hiddens']");
      if (hiddens) hiddens.innerHTML = "";
      form.submit();
    });
  });

  initCol("left");
  initCol("right");
})();
</script>
{% endblock %}