{% load i18n %}
{% include "netbox_nsm/inc/nsm_ip_analyzer_applet_assets.html" %}
<style>
  .nsm-tree-hdr {
    display: flex; align-items: center; gap: 6px;
    padding: 4px 12px; cursor: pointer;
    font-size: 13px; font-weight: 500;
    border: none; background: none; width: 100%; text-align: left;
    color: inherit;
  }
  .nsm-tree-hdr:hover { background: var(--bs-tertiary-bg); }
  .nsm-tree-hdr .nsm-chev {
    font-size: 10px; transition: transform .15s;
    color: var(--bs-secondary-color); flex-shrink: 0;
  }
  .nsm-tree-hdr[aria-expanded="true"] .nsm-chev { transform: rotate(90deg); }
  .nsm-tree-hdr[aria-expanded="false"] .nsm-chev { transform: rotate(0deg); }
  .nsm-tree-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: none;
    background: none;
    padding: 0;
    color: inherit;
    line-height: 1;
  }
  .nsm-rb-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 2rem;
    font-size: 12px;
    font-weight: 500;
    width: 100%;
    text-align: left;
    color: inherit;
  }
  .nsm-rb-hdr .nsm-tree-toggle .nsm-chev {
    font-size: 9px;
    transition: transform .15s;
    color: var(--bs-secondary-color);
  }
  .nsm-rb-hdr .nsm-tree-toggle[aria-expanded="true"] .nsm-chev { transform: rotate(90deg); }
  .nsm-rb-hdr .nsm-tree-toggle[aria-expanded="false"] .nsm-chev { transform: rotate(0deg); }
  .nsm-rb-title-link {
    color: inherit;
    text-decoration: none;
    min-width: 0;
  }
  .nsm-rb-title-link:hover {
    color: inherit;
    text-decoration: underline;
  }
  .nsm-rb-field-hdr {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 12px 3px 3.25rem;
    font-size: 12px;
    width: 100%;
    text-align: left;
    color: inherit;
  }
  .nsm-rb-field-hdr .nsm-tree-toggle .nsm-chev {
    font-size: 9px;
    transition: transform .15s;
    color: var(--bs-secondary-color);
  }
  .nsm-rb-field-hdr .nsm-tree-toggle[aria-expanded="true"] .nsm-chev { transform: rotate(90deg); }
  .nsm-rb-field-hdr .nsm-tree-toggle[aria-expanded="false"] .nsm-chev { transform: rotate(0deg); }
  .nsm-rb-rule-list {
    list-style: none;
    margin: 0;
    padding: 0 0 0.35rem 4.5rem;
  }
  .nsm-rb-rule-list > li {
    font-size: 12px;
    line-height: 1.45;
    padding: 0.08rem 0;
  }
  .nsm-link-table .col-actions .nsm-link-actions.btn-group-sm > .btn {
    line-height: 1;
    padding: 0.12rem 0.28rem;
  }
  .nsm-link-table .col-actions .nsm-link-actions.btn-group-sm > .btn .mdi {
    font-size: 0.8rem;
    line-height: 1;
  }
  .nsm-link-table {
    table-layout: fixed;
    width: 100%;
  }
  .nsm-link-table .col-object {
    width: auto;
    padding-left: 3rem;
    font-size: 12px;
    vertical-align: middle;
  }
  .nsm-link-table .col-comment {
    font-size: 11px;
    color: var(--bs-secondary-color);
    vertical-align: middle;
  }
  .nsm-link-table .col-actions {
    width: 7.25rem;
    vertical-align: middle;
  }
</style>

<div class="card">
  <h5 class="card-header d-flex justify-content-between align-items-center flex-wrap gap-2">
    <span class="text-nowrap">{{ nsm_panel_label }}{% if nsm_security_badge %} <span class="badge text-bg-secondary ms-1">{{ nsm_security_badge }}</span>{% endif %}</span>
    <span class="d-flex gap-1 align-items-center nsm-security-header-actions">
      <span class="d-inline-flex align-items-center gap-1">
        <a href="{{ nsm_analyzer_url }}" class="btn btn-ghost-primary btn-sm"
           title="{% trans 'Object Analyzer' %}"
           aria-label="{% trans 'Object Analyzer' %}">
          <i class="mdi mdi-graph-outline" aria-hidden="true"></i>
        </a>
        {% if nsm_page_addr_analyzable %}
        <button type="button" class="btn btn-ghost-primary btn-sm nsm-ipa-loupe"
                data-ct="{{ nsm_page_object_ct }}"
                data-pk="{{ nsm_page_object_pk }}"
                data-name="{{ nsm_page_object_name|escape }}"
                title="{% trans 'Objekt analysieren' %}"
                aria-label="{% trans 'Objekt analysieren' %}">
          <i class="mdi mdi-magnify" aria-hidden="true"></i>
        </button>
        {% endif %}
      </span>
      <a href="{{ nsm_assign_url }}" class="btn btn-ghost-primary btn-sm">
        <i class="mdi mdi-plus-thick"></i> {% trans "Assign" %}
      </a>
    </span>
  </h5>
  <div class="card-body p-0">

    {% if not nsm_rulebook_groups and not nsm_link_type_groups %}
    <div class="ps-3 py-2 text-muted">{% trans "None" %}</div>
    {% endif %}

    {# ── Rulebooks → Rulebook → Field → Rule ────────────────────────────── #}
    {% if nsm_rulebook_groups %}
    <div class="border-bottom">
      <div class="nsm-tree-hdr">
        <button type="button"
                class="nsm-tree-toggle"
                data-bs-toggle="collapse"
                data-bs-target="#nsm-cat-rulebook"
                aria-expanded="true"
                aria-label="{% trans 'Toggle Rulebooks' %}">
          <i class="mdi mdi-chevron-right nsm-chev"></i>
        </button>
        <span>{% trans "Rulebooks" %}</span>
        <span class="badge text-bg-secondary ms-1">{{ nsm_unique_rules_total }}</span>
      </div>
      <div id="nsm-cat-rulebook" class="collapse show">
        <div class="nsm-rulebook-accordion"
             id="nsm-accordion"
             data-api-url="{{ nsm_api_url }}"
             data-next-offset="{{ nsm_next_offset }}"
             data-has-more="{% if nsm_has_more %}1{% else %}0{% endif %}">

          {% for group in nsm_rulebook_groups %}
          {% with rb=group.rulebook %}
          <div class="border-top" data-rb-pk="{{ rb.pk }}">
            <div class="nsm-rb-hdr">
              <button type="button"
                      class="nsm-tree-toggle"
                      data-bs-toggle="collapse"
                      data-bs-target="#nsm-rb-{{ rb.pk }}"
                      aria-expanded="true"
                      aria-label="{% blocktrans with rb=rb.name %}Toggle {{ rb }}{% endblocktrans %}">
                <i class="mdi mdi-chevron-right nsm-chev"></i>
              </button>
              {% if group.rules_tab_url %}
              <a href="{{ group.rules_tab_url }}" class="nsm-rb-title-link">{{ rb.name }}</a>
              {% else %}
              <span>{{ rb.name }}</span>
              {% endif %}
              <span class="badge text-bg-secondary ms-1 nsm-rb-count">{{ group.unique_count }}</span>
            </div>
            <div id="nsm-rb-{{ rb.pk }}" class="collapse show">
              {% for fg in group.field_groups %}
              <div class="nsm-rb-field" data-field-pk="{{ fg.field.pk }}">
                <div class="nsm-rb-field-hdr">
                  <button type="button"
                          class="nsm-tree-toggle"
                          data-bs-toggle="collapse"
                          data-bs-target="#nsm-rb-{{ rb.pk }}-f-{{ fg.field.pk }}"
                          aria-expanded="true"
                          aria-label="{% blocktrans with field=fg.field.name %}Toggle {{ field }}{% endblocktrans %}">
                    <i class="mdi mdi-chevron-right nsm-chev"></i>
                  </button>
                  <span>{{ fg.field.name }}</span>
                  <span class="badge text-bg-secondary ms-1 nsm-rb-field-count">{{ fg.rule_count }}</span>
                </div>
                <div id="nsm-rb-{{ rb.pk }}-f-{{ fg.field.pk }}" class="collapse show">
                  <ul class="nsm-rb-rule-list nsm-rb-field-rules">
                    {% for rule in fg.rules %}
                    <li>
                      <a href="{{ rule.nsm_panel_filter_url }}"
                         class="nsm-security-rule-link"
                         data-detail-url="{{ rule.get_absolute_url }}"
                         title="{% trans 'Filter rules by name (Ctrl+click: open rule detail)' %}">{{ rule.name }}</a>
                    </li>
                    {% endfor %}
                  </ul>
                </div>
              </div>
              {% endfor %}
            </div>
          </div>
          {% endwith %}
          {% endfor %}

          <div class="nsm-sentinel" style="height:1px;"></div>
        </div>
      </div>
    </div>
    {% endif %}

    {# ── ObjectLink type groups ──────────────────────────────────────── #}
    {% for group in nsm_link_type_groups %}
    <div class="border-bottom">
      <button class="nsm-tree-hdr"
              data-bs-toggle="collapse"
              data-bs-target="#nsm-cat-{{ group.type_key }}"
              aria-expanded="true">
        <i class="mdi mdi-chevron-right nsm-chev"></i>
        <span>{{ group.type_label }}</span>
        <span class="badge text-bg-secondary ms-1">{{ group.count }}</span>
      </button>
      <div id="nsm-cat-{{ group.type_key }}" class="collapse show">
        <div {% if group.count > 15 %}style="max-height:420px;overflow-y:auto;"{% endif %}>
        <table class="table table-hover table-sm mb-0 nsm-link-table">
          <tbody>
            {% for linked in group.objects %}
            <tr class="nsm-link-row">
              <td class="col-object">
                <a href="{{ linked.url }}"{% if linked.inherited_from_name %} class="text-muted fst-italic"{% endif %}>{{ linked.name }}</a>
                {% if linked.inherited_from_name %}
                <span class="text-muted" style="font-size:11px;">
                  ({% trans "from" %} <a href="{{ linked.inherited_from_url }}" class="text-muted">{{ linked.inherited_from_name }}</a>)
                </span>
                {% endif %}
              </td>
              {% if group.show_comment %}<td class="col-comment">{{ linked.comment|default:"" }}</td>{% endif %}
              {% if group.show_actions %}<td class="col-actions pe-2 text-end" style="white-space:nowrap;">
                {% if linked.supports_addr_analysis or linked.edit_url or linked.delete_url %}
                <span class="btn-group btn-group-sm nsm-link-actions" role="group">
                  {% if linked.supports_addr_analysis %}
                  <button type="button" class="btn btn-light btn-sm nsm-ipa-loupe"
                          data-ct="{{ linked.ct_id }}"
                          data-pk="{{ linked.obj_id }}"
                          data-name="{{ linked.name|escape }}"
                          title="{% trans 'Objekt analysieren' %}"
                          aria-label="{% trans 'Objekt analysieren' %}">
                    <i class="mdi mdi-magnify text-dark" aria-hidden="true"></i>
                  </button>
                  {% endif %}
                  {% if linked.edit_url %}
                  <a href="{{ linked.edit_url }}" class="btn btn-warning btn-sm"
                     title="{% trans 'Edit assignment' %}" aria-label="{% trans 'Edit assignment' %}">
                    <i class="mdi mdi-pencil" aria-hidden="true"></i>
                  </a>
                  {% endif %}
                  {% if linked.delete_url %}
                  <a href="{{ linked.delete_url }}" class="btn btn-danger btn-sm"
                     title="{% trans 'Remove assignment' %}" aria-label="{% trans 'Remove assignment' %}">
                    <i class="mdi mdi-trash-can-outline" aria-hidden="true"></i>
                  </a>
                  {% endif %}
                </span>
                {% endif %}
              </td>{% endif %}
            </tr>
            {% endfor %}
          </tbody>
        </table>
        </div>
      </div>
    </div>
    {% endfor %}

    {# ── Rulebooks assigned to this object (Device / VM / VDC only) ────── #}
    {% if nsm_enforcer_assignments %}
    <div class="border-bottom">
      <button class="nsm-tree-hdr"
              data-bs-toggle="collapse"
              data-bs-target="#nsm-cat-enforced"
              aria-expanded="true">
        <i class="mdi mdi-chevron-right nsm-chev"></i>
        <span>{% trans "Rulebooks" %}</span>
        <span class="badge text-bg-secondary ms-1">{{ nsm_enforcer_assignments|length }}</span>
        {% if nsm_enforcer_add_url %}
        <a href="{{ nsm_enforcer_add_url }}"
           class="btn btn-sm btn-ghost-primary ms-auto py-0"
           onclick="event.stopPropagation();"
           title="{% trans 'Assign rulebook' %}"
           aria-label="{% trans 'Assign rulebook' %}">
          <i class="mdi mdi-plus-thick" aria-hidden="true"></i>
        </a>
        {% endif %}
      </button>
      <div id="nsm-cat-enforced" class="collapse show">
        <table class="table table-hover table-sm mb-0 nsm-link-table">
          <tbody>
            {% for assignment in nsm_enforcer_assignments %}
            <tr>
              <td class="col-object">
                <a href="{{ assignment.rulebook.get_absolute_url }}">{{ assignment.rulebook.name }}</a>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
    {% endif %}

  </div>
</div>

<script src="{% url 'plugins:netbox_nsm:plugin_asset' asset_path='js/nsm_branch_api.js' %}?v=1"></script>
<script>
(function () {
  document.addEventListener("click", function (e) {
    var link = e.target.closest("a.nsm-security-rule-link");
    if (!link || !(e.ctrlKey || e.metaKey)) {
      return;
    }
    var detailUrl = link.getAttribute("data-detail-url");
    if (detailUrl) {
      e.preventDefault();
      window.location.href = detailUrl;
    }
  });
})();
</script>

<script>
(function () {
  var accordion = document.querySelector('.nsm-rulebook-accordion');
  if (!accordion || accordion.dataset.hasMore !== '1') return;

  var loading = false;
  var sentinel = accordion.querySelector('.nsm-sentinel');

  function escHtml(s) {
    return String(s).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
  }

  function appendItems(results) {
    results.forEach(function (item) {
      var rbPk = String(item.rulebook_pk || 0);
      var rbColId = 'nsm-rb-' + rbPk;
      var existing = accordion.querySelector('[data-rb-pk="' + rbPk + '"]');
      var collapseDiv;

      if (existing) {
        collapseDiv = document.getElementById(rbColId);
      } else {
        var rbLink = item.rulebook_url
          ? '<a href="' + escHtml(item.rulebook_url) + '" class="nsm-rb-title-link">' + escHtml(item.rulebook_name) + '</a>'
          : '<span>' + escHtml(item.rulebook_name) + '</span>';

        var div = document.createElement('div');
        div.className = 'border-top';
        div.dataset.rbPk = rbPk;
        div.innerHTML =
          '<div class="nsm-rb-hdr">' +
            '<button type="button" class="nsm-tree-toggle" data-bs-toggle="collapse" data-bs-target="#' + rbColId + '" aria-expanded="true">' +
              '<i class="mdi mdi-chevron-right nsm-chev"></i>' +
            '</button>' +
            rbLink +
            '<span class="badge text-bg-secondary ms-1 nsm-rb-count">0</span>' +
          '</div>' +
          '<div id="' + rbColId + '" class="collapse show"></div>';
        accordion.insertBefore(div, sentinel);
        collapseDiv = div.querySelector('.collapse');
      }

      var fieldPk = String(item.field_pk || 0);
      var fieldColId = rbColId + '-f-' + fieldPk;
      var fieldDiv = collapseDiv.querySelector('[data-field-pk="' + fieldPk + '"]');
      if (!fieldDiv) {
        fieldDiv = document.createElement('div');
        fieldDiv.className = 'nsm-rb-field';
        fieldDiv.dataset.fieldPk = fieldPk;
        fieldDiv.innerHTML =
          '<div class="nsm-rb-field-hdr">' +
            '<button type="button" class="nsm-tree-toggle" data-bs-toggle="collapse" data-bs-target="#' + fieldColId + '" aria-expanded="true">' +
              '<i class="mdi mdi-chevron-right nsm-chev"></i>' +
            '</button>' +
            '<span>' + escHtml(item.field_name) + '</span>' +
            '<span class="badge text-bg-secondary ms-1 nsm-rb-field-count">0</span>' +
          '</div>' +
          '<div id="' + fieldColId + '" class="collapse show">' +
            '<ul class="nsm-rb-rule-list nsm-rb-field-rules"></ul>' +
          '</div>';
        collapseDiv.appendChild(fieldDiv);
      }

      var ruleList = fieldDiv.querySelector('.nsm-rb-field-rules');
      var li = document.createElement('li');
      if (item.rule_id) {
        li.dataset.ruleId = String(item.rule_id);
      }
      li.innerHTML =
        '<a href="' + escHtml(item.rule_url) + '" class="nsm-security-rule-link" ' +
        'data-detail-url="' + escHtml(item.rule_detail_url || '') + '" ' +
        'title="Filter rules by name (Ctrl+click: open rule detail)">' +
        escHtml(item.rule_name) + '</a>';
      ruleList.appendChild(li);

      var fieldCount = fieldDiv.querySelector('.nsm-rb-field-count');
      if (fieldCount) {
        fieldCount.textContent = String(ruleList.querySelectorAll('li').length);
      }
      var rbWrapper = accordion.querySelector('[data-rb-pk="' + rbPk + '"]');
      var rbCountEl = rbWrapper && rbWrapper.querySelector('.nsm-rb-count');
      if (rbCountEl) {
        var seenRules = {};
        rbWrapper.querySelectorAll('[data-rule-id]').forEach(function (el) {
          if (el.dataset.ruleId) {
            seenRules[el.dataset.ruleId] = true;
          }
        });
        rbCountEl.textContent = String(Object.keys(seenRules).length);
      }
    });
  }

  var observer = new IntersectionObserver(function (entries) {
    if (!entries[0].isIntersecting || loading) return;
    if (accordion.dataset.hasMore !== '1') { observer.disconnect(); return; }

    loading = true;
    var url = accordion.dataset.apiUrl + '&offset=' + accordion.dataset.nextOffset;
    fetch(url, {headers: (window.NSM_BRANCH_API && NSM_BRANCH_API.mergeBranchHeaders({'X-Requested-With': 'XMLHttpRequest'})) || {'X-Requested-With': 'XMLHttpRequest'}})
      .then(function (r) { return r.json(); })
      .then(function (data) {
        appendItems(data.results);
        accordion.dataset.nextOffset = data.offset;
        accordion.dataset.hasMore = data.has_more ? '1' : '0';
        if (!data.has_more) observer.disconnect();
        loading = false;
      })
      .catch(function () { loading = false; });
  }, {root: null, threshold: 0});

  observer.observe(sentinel);
})();
</script>