{% extends 'admin/model/list.html' %}

{% block body %}
<div class="mb-2">
    <a href="{{ url_for('checkmk_rule_optimization.index') }}"
       class="btn btn-sm btn-outline-secondary">
        <i class="fa fa-compress"></i> Rule Optimization
    </a>
    <small class="text-muted ml-2">
        Find rules whose export lists hundreds of hostnames in one condition,
        and the host label that could replace it.
    </small>
</div>
{{ super() }}

{# Hard cap the rendered-card column so a long ruleset can no longer
   stretch the table off-screen. The cards inside already wrap. #}
<style>
  .table td .cmk-rule-card,
  .table .cmk-rule-card {
    max-width: 720px;
  }
  /* Flask-Admin renders one cell per column; constrain the cell too,
     so the column itself stops growing past 720px even when the row
     is otherwise narrow. */
  .table th[class*="column-render_cmk_rule_mngmt"],
  .table td[class*="column-render_cmk_rule_mngmt"] {
    max-width: 720px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  /* Group-header rows injected by JS so the listing visibly clusters
     by primary_ruleset. Click toggles collapse of the group's rows.
     Colours come from CSS variables so per-user themes can recolour
     the bar (default falls back to the original Checkmk blue). */
  tr.cmk-ruleset-group-header > td {
    background: var(--cmk-group-bg, linear-gradient(90deg, #2c6da8 0%, #3498db 100%));
    color: var(--cmk-group-fg, #fff);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 6px 12px;
    border-top: 2px solid var(--cmk-group-border, #1d4669);
    cursor: pointer;
    user-select: none;
  }
  tr.cmk-ruleset-group-header > td:hover {
    background: var(--cmk-group-bg-hover, linear-gradient(90deg, #244f7a 0%, #2980b9 100%));
  }
  tr.cmk-ruleset-group-header .cmk-ruleset-group-caret {
    display: inline-block;
    width: 14px;
    margin-right: 4px;
    transition: transform 0.15s ease;
    text-align: center;
  }
  tr.cmk-ruleset-group-header.collapsed .cmk-ruleset-group-caret {
    transform: rotate(-90deg);
  }
  tr.cmk-ruleset-group-header .cmk-ruleset-group-count {
    background: rgba(255,255,255,0.2);
    border-radius: 10px;
    padding: 1px 8px;
    margin-left: 8px;
    font-weight: 500;
    font-size: 0.8rem;
  }
</style>
{% endblock %}

{% block tail %}
{{ super() }}
<script>
(function() {
  // Auto-suggest existing rulesets in the "Ruleset contains" filter.
  // The filter input is a plain <input> rendered by Flask-Admin; we
  // attach a <datalist> populated from the JSON endpoint defined on
  // the view (.ruleset_choices).
  var listId = 'cmk-rule-mngmt-rulesets';
  var datalist = document.getElementById(listId);
  if (!datalist) {
    datalist = document.createElement('datalist');
    datalist.id = listId;
    document.body.appendChild(datalist);
  }

  fetch('{{ url_for(".ruleset_choices") }}', {credentials: 'same-origin'})
    .then(function(r) { return r.json(); })
    .then(function(data) {
      datalist.innerHTML = '';
      (data.rulesets || []).forEach(function(rs) {
        var opt = document.createElement('option');
        opt.value = rs;
        datalist.appendChild(opt);
      });
    })
    .catch(function() { /* fail open — input still works without autocomplete */ });

  // Wire the datalist onto every "Ruleset" filter input. Flask-Admin
  // renders multiple filter rows when the user adds the same filter
  // more than once; cover them all.
  function attachDatalist() {
    document.querySelectorAll('input[name^="flt"]').forEach(function(input) {
      var label = input.previousElementSibling;
      // Be liberal — match the parent .field-filters wrapper too.
      var labelText = (label && label.textContent || '').trim().toLowerCase();
      var nearest = input.closest('.field-filters, .filter, td, .form-group');
      var nearestText = (nearest && nearest.textContent || '').toLowerCase();
      if (labelText.indexOf('ruleset') !== -1 || nearestText.indexOf('ruleset contains') !== -1) {
        input.setAttribute('list', listId);
      }
    });
  }
  attachDatalist();
  // Filter inputs can be added dynamically — observe the document.
  var observer = new MutationObserver(attachDatalist);
  observer.observe(document.body, {childList: true, subtree: true});

  // Inject group-header rows before each cluster of rules sharing the
  // same primary ruleset. Reads the ruleset name from the rendered
  // card title (.cmk-rule-card .card-title) so the script doesn't need
  // a separate column injected server-side. Header rows are clickable
  // — click toggles collapse of the rules belonging to that group;
  // open/closed state is remembered per-ruleset in localStorage.
  var COLLAPSED_KEY = 'cmk-rule-mngmt-collapsed-rulesets';

  function loadCollapsedSet() {
    try {
      var raw = window.localStorage.getItem(COLLAPSED_KEY);
      if (!raw) { return new Set(); }
      var arr = JSON.parse(raw);
      return new Set(Array.isArray(arr) ? arr : []);
    } catch (e) { return new Set(); }
  }

  function saveCollapsedSet(set) {
    try {
      window.localStorage.setItem(
        COLLAPSED_KEY, JSON.stringify(Array.from(set))
      );
    } catch (e) { /* quota / disabled — silently skip */ }
  }

  function applyCollapsed(header, collapsed) {
    var members = header._cmkGroupMembers || [];
    members.forEach(function(r) { r.style.display = collapsed ? 'none' : ''; });
    header.classList.toggle('collapsed', collapsed);
  }

  function injectGroupHeaders() {
    var table = document.querySelector('table.model-list, .table.model-list, .admin-table table, .table');
    if (!table) { return; }
    var tbody = table.tBodies[0];
    if (!tbody) { return; }
    // Clear stale headers from a previous pass (e.g. ajax sort).
    tbody.querySelectorAll('tr.cmk-ruleset-group-header').forEach(function(r) {
      r.parentNode.removeChild(r);
    });
    var rows = Array.prototype.slice.call(tbody.rows);
    if (!rows.length) { return; }
    var colCount = (table.tHead && table.tHead.rows[0])
      ? table.tHead.rows[0].cells.length
      : (rows[0].cells.length || 1);

    var collapsedSet = loadCollapsedSet();
    var lastRuleset = null;
    var groupHeader = null;
    var groupMembers = [];
    var countInGroup = 0;

    function finishGroup() {
      if (!groupHeader) { return; }
      var badge = groupHeader.querySelector('.cmk-ruleset-group-count');
      if (badge) { badge.textContent = countInGroup + ' rule' + (countInGroup === 1 ? '' : 's'); }
      groupHeader._cmkGroupMembers = groupMembers;
      if (collapsedSet.has(groupHeader.dataset.ruleset)) {
        applyCollapsed(groupHeader, true);
      }
    }

    rows.forEach(function(row) {
      var titleEl = row.querySelector('.cmk-rule-card .card-title');
      var ruleset = (titleEl && titleEl.textContent || '').trim() || '(no ruleset)';
      if (ruleset !== lastRuleset) {
        finishGroup();
        var header = document.createElement('tr');
        header.className = 'cmk-ruleset-group-header';
        var cell = document.createElement('td');
        cell.colSpan = colCount;
        cell.innerHTML =
          '<span class="cmk-ruleset-group-caret">&#x25BC;</span>'
          + '<i class="fa fa-folder-open" style="margin-right:6px;"></i>'
          + escapeHtml(ruleset)
          + '<span class="cmk-ruleset-group-count">0 rules</span>';
        header.appendChild(cell);
        header.dataset.ruleset = ruleset;
        row.parentNode.insertBefore(header, row);
        cell.addEventListener('click', function() {
          var nowCollapsed = !header.classList.contains('collapsed');
          applyCollapsed(header, nowCollapsed);
          if (nowCollapsed) {
            collapsedSet.add(ruleset);
          } else {
            collapsedSet.delete(ruleset);
          }
          saveCollapsedSet(collapsedSet);
        });
        groupHeader = header;
        groupMembers = [];
        countInGroup = 0;
        lastRuleset = ruleset;
      }
      groupMembers.push(row);
      countInGroup += 1;
    });
    finishGroup();
  }

  function escapeHtml(s) {
    return String(s).replace(/[&<>"']/g, function(c) {
      return ({'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;','\'':'&#39;'})[c];
    });
  }

  if (document.readyState !== 'loading') {
    injectGroupHeaders();
  } else {
    document.addEventListener('DOMContentLoaded', injectGroupHeaders);
  }
})();
</script>
{% endblock %}