{# SPDX-License-Identifier: Apache-2.0 #}
{# Copyright (C) 2025 Marcin Zieba <marcinpsk@gmail.com> #}
{% extends 'generic/_base.html' %}

{% block title %}Build Rule — Live Tester{% endblock %}

{% block content %}

{% if loaded_rule %}
<div class="alert alert-info d-flex align-items-center mb-3">
  <i class="mdi mdi-pencil-circle me-2"></i>
  <span>
    Testing existing rule <strong>#{{ loaded_rule.pk }}</strong>
    (<a href="{{ loaded_rule.get_absolute_url }}">view</a> /
    <a href="{% url 'plugins:netbox_interface_name_rules:interfacenamerule_edit' loaded_rule.pk %}">edit</a>).
    Modify the fields below and click <strong>Check</strong> to preview, or
    <strong>Save as Rule</strong> to update or create a rule.
  </span>
</div>
{% endif %}
<div class="row">
  <div class="col-md-12 mb-2">
    <p class="text-muted">
      Fill in the rule fields and variable values below, then click <strong>Check</strong> to preview
      the resulting interface name(s). If a module type is specified, the database is also queried for
      any matching installed interfaces and their computed names are shown.<br>
      <strong>Scope fields</strong> (Parent Module Type, Device Type, Platform) are optional filters —
      leave them blank to test the rule without scoping.
    </p>
  </div>
</div>

<form method="post" action="" novalidate>
  {% csrf_token %}
  {{ form.non_field_errors }}
  <div class="row g-3">

    {# ── Left column: rule definition ─────────────────────────────────────────── #}
    <div class="col-md-6">
      <div class="card">
        <div class="card-header"><h5 class="card-title mb-0"><i class="mdi mdi-book-outline me-2"></i>Rule Definition</h5></div>
        <div class="card-body">
          <div class="mb-3">
            <label class="form-label fw-semibold" for="{{ form.name_template.id_for_label }}">{{ form.name_template.label }}</label>
            {{ form.name_template }}
            <div class="form-text">{{ form.name_template.help_text }}</div>
            {% if form.name_template.errors %}<div class="invalid-feedback d-block">{{ form.name_template.errors }}</div>{% endif %}
          </div>
          <div class="mb-3 form-check">
            {{ form.applies_to_device_interfaces }}
            <label class="form-check-label" for="{{ form.applies_to_device_interfaces.id_for_label }}">{{ form.applies_to_device_interfaces.label }}</label>
          </div>
          <div class="mb-3 form-check" data-module-only {% if form.applies_to_device_interfaces.value %}hidden{% endif %}>
            {{ form.module_type_is_regex }}
            <label class="form-check-label" for="{{ form.module_type_is_regex.id_for_label }}">{{ form.module_type_is_regex.label }}</label>
          </div>
          <div class="mb-3" id="exact-mt-row" {% if form.applies_to_device_interfaces.value or form.module_type_is_regex.value %}hidden{% endif %}>
            <label class="form-label" for="{{ form.module_type.id_for_label }}">{{ form.module_type.label }}</label>
            {{ form.module_type }}
            <div class="form-text">{{ form.module_type.help_text }}</div>
            {% if form.module_type.errors %}<div class="invalid-feedback d-block">{{ form.module_type.errors }}</div>{% endif %}
          </div>
          {% with module_label=form.module_type_pattern.label module_help=form.module_type_pattern.help_text device_label=form.device_pattern_label device_help=form.device_pattern_help_text %}
          <div class="mb-3" id="regex-mt-row" data-module-label="{{ module_label }}" data-module-help="{{ module_help }}" data-device-label="{{ device_label }}" data-device-help="{{ device_help }}" {% if not form.applies_to_device_interfaces.value and not form.module_type_is_regex.value %}hidden{% endif %}>
            <label class="form-label" for="{{ form.module_type_pattern.id_for_label }}">{% if form.applies_to_device_interfaces.value %}{{ device_label }}{% else %}{{ module_label }}{% endif %}</label>
            {{ form.module_type_pattern }}
            <div class="form-text">{% if form.applies_to_device_interfaces.value %}{{ device_help }}{% else %}{{ module_help }}{% endif %}</div>
            {% if form.module_type_pattern.errors %}<div class="invalid-feedback d-block">{{ form.module_type_pattern.errors }}</div>{% endif %}
          </div>
          {% endwith %}
          <hr class="my-2">
          <p class="text-muted small mb-2">Optional scoping — leave blank to match any:</p>
          <div class="mb-3" data-module-only {% if form.applies_to_device_interfaces.value %}hidden{% endif %}>
            <label class="form-label" for="{{ form.parent_module_type.id_for_label }}">{{ form.parent_module_type.label }}</label>
            {{ form.parent_module_type }}
            <div class="form-text">{{ form.parent_module_type.help_text }}</div>
            {% if form.parent_module_type.errors %}<div class="invalid-feedback d-block">{{ form.parent_module_type.errors }}</div>{% endif %}
          </div>
          <div class="mb-3">
            <label class="form-label" for="{{ form.device_type.id_for_label }}">{{ form.device_type.label }}</label>
            {{ form.device_type }}
            <div class="form-text">{{ form.device_type.help_text }}</div>
            {% if form.device_type.errors %}<div class="invalid-feedback d-block">{{ form.device_type.errors }}</div>{% endif %}
          </div>
          <div class="mb-3">
            <label class="form-label" for="{{ form.platform.id_for_label }}">{{ form.platform.label }}</label>
            {{ form.platform }}
            <div class="form-text">{{ form.platform.help_text }}</div>
            {% if form.platform.errors %}<div class="invalid-feedback d-block">{{ form.platform.errors }}</div>{% endif %}
          </div>
          <hr class="my-2" data-module-only {% if form.applies_to_device_interfaces.value %}hidden{% endif %}>
          <div class="mb-3" data-module-only {% if form.applies_to_device_interfaces.value %}hidden{% endif %}>
            <label class="form-label" for="{{ form.breakout_mode.id_for_label }}">{{ form.breakout_mode.label }}</label>
            {{ form.breakout_mode }}
            <div class="form-text">{{ form.breakout_mode.help_text }}</div>
            {% if form.breakout_mode.errors %}<div class="invalid-feedback d-block">{{ form.breakout_mode.errors }}</div>{% endif %}
          </div>
          <div class="mb-3" data-module-only {% if form.applies_to_device_interfaces.value %}hidden{% endif %}>
            <label class="form-label" for="{{ form.parent_name_template.id_for_label }}">{{ form.parent_name_template.label }}</label>
            {{ form.parent_name_template }}
            <div class="form-text">{{ form.parent_name_template.help_text }}</div>
            {% if form.parent_name_template.errors %}<div class="invalid-feedback d-block">{{ form.parent_name_template.errors }}</div>{% endif %}
          </div>
          <div class="row g-2" data-module-only {% if form.applies_to_device_interfaces.value %}hidden{% endif %}>
            <div class="col-6">
              <label class="form-label" for="{{ form.channel_count.id_for_label }}">{{ form.channel_count.label }}</label>
              {{ form.channel_count }}
              <div class="form-text">{{ form.channel_count.help_text }}</div>
              {% if form.channel_count.errors %}<div class="invalid-feedback d-block">{{ form.channel_count.errors }}</div>{% endif %}
            </div>
            <div class="col-6">
              <label class="form-label" for="{{ form.channel_start.id_for_label }}">{{ form.channel_start.label }}</label>
              {{ form.channel_start }}
              <div class="form-text">{{ form.channel_start.help_text }}</div>
              {% if form.channel_start.errors %}<div class="invalid-feedback d-block">{{ form.channel_start.errors }}</div>{% endif %}
            </div>
          </div>
        </div>
      </div>
    </div>

    {# ── Right column: variable values ────────────────────────────────────────── #}
    <div class="col-md-6">
      <div class="card">
        <div class="card-header"><h5 class="card-title mb-0"><i class="mdi mdi-code-braces me-2"></i>Variable Values</h5></div>
        <div class="card-body">
          <p class="text-muted small">Set the template variable values used for the manual preview.
             These supply the naming context for the selected rule kind.</p>
          {% for field in form %}
            {% if field.name|slice:":4" == "var_" %}
              <div class="mb-2 row" {% if field.name in module_only_variable_fields %}data-module-only {% if form.applies_to_device_interfaces.value %}hidden{% endif %}{% endif %}>
                <label class="col-sm-5 col-form-label" for="{{ field.id_for_label }}"><code>{{ field.label }}</code></label>
                <div class="col-sm-7">{{ field }}{% if field.errors %}<div class="invalid-feedback d-block">{{ field.errors }}</div>{% endif %}<div class="form-text">{{ field.help_text }}</div></div>
              </div>
            {% endif %}
          {% endfor %}

          <details class="mt-3">
            <summary class="text-muted small" style="cursor:pointer">Variable reference <i class="mdi mdi-information-outline"></i></summary>
            <table id="rule-tester-module-variable-reference" data-variable-table="module" {% if form.applies_to_device_interfaces.value %}hidden{% endif %} class="table table-sm table-bordered mt-2 small">
              <thead class="table-light"><tr><th>Variable</th><th>Description</th><th>Example</th></tr></thead>
              <tbody>
                {% for row in module_variable_rows %}
                <tr data-naming-contexts="{{ row.context_values }}" data-template-variable="{{ row.name }}">
                  <td><code>{{ row.token }}</code></td><td>{{ row.description }}</td><td><code>{{ row.example }}</code></td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            <table id="rule-tester-device-variable-reference" data-variable-table="device" {% if not form.applies_to_device_interfaces.value %}hidden{% endif %} class="table table-sm table-bordered mt-2 small">
              <thead class="table-light"><tr><th>Variable</th><th>Description</th><th>Example</th></tr></thead>
              <tbody>
                {% for row in device_variable_rows %}
                <tr data-naming-contexts="{{ row.context_values }}" data-template-variable="{{ row.name }}">
                  <td><code>{{ row.token }}</code></td><td>{{ row.description }}</td><td><code>{{ row.example }}</code></td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            <p class="text-muted small mt-1 mb-0">
              <strong>Arithmetic:</strong> expressions inside <code>{}</code> are evaluated safely,
              e.g. <code>{8 + ({parent_bay_position_num} - 1) * 2 + {sfp_slot}}</code>.
              Use the <code>_num</code> variables in arithmetic: a bay position may be a
              path such as <code>TenGigabitEthernet3/2/1</code>.
            </p>
          </details>
        </div>
      </div>
    </div>

  </div>{# /row #}

  <div class="mt-3 d-flex gap-2">
    <button type="submit" name="action" value="check" class="btn btn-primary">
      <i class="mdi mdi-play me-1"></i>Check
    </button>
    <button type="submit" name="action" value="save_rule" class="btn btn-success">
      <i class="mdi mdi-content-save me-1"></i>Save as Rule
    </button>
  </div>
</form>

{# ── Results ─────────────────────────────────────────────────────────────────── #}

{% if error %}
  <div class="alert alert-danger mt-4">
    <i class="mdi mdi-alert-circle me-1"></i><strong>Template error:</strong> {{ error }}
  </div>
{% endif %}

{% if form.applies_to_device_interfaces.value %}
<p class="text-muted mt-3">The database preview covers module rules only.</p>
{% endif %}
{% if preview_results and not error %}
  <div class="card mt-4">
    <div class="card-header"><h5 class="card-title mb-0"><i class="mdi mdi-eye me-2"></i>Manual Variable Preview</h5></div>
    <div class="card-body p-0">
      <table class="table table-sm table-hover mb-0">
        <thead>
          <tr>
            <th>#</th>
            {% if preview_results.0.channel is not None or preview_results.0.role == "parent" %}<th>Channel</th>{% endif %}
            <th>Source (base name)</th>
            {% if form.applies_to_device_interfaces.value %}<th>Derived port</th>{% endif %}
            <th></th>
            <th>Result</th>
          </tr>
        </thead>
        <tbody>
          {% for entry in preview_results %}
            <tr>
              <td class="text-muted">{{ forloop.counter }}</td>
              {% if entry.channel is not None %}<td><code>{{ entry.channel }}</code></td>
              {% elif entry.role == "parent" %}<td><span class="badge text-bg-secondary">parent</span></td>{% endif %}
              <td><code class="text-muted">{{ entry.source }}</code></td>
              {% if form.applies_to_device_interfaces.value %}<td><code>{{ entry.port }}</code></td>{% endif %}
              <td><i class="mdi mdi-arrow-right text-muted"></i></td>
              <td><code class="text-success">{{ entry.result }}</code></td>
            </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
{% endif %}

{% if db_preview is not None and not error %}
  <div class="card mt-4">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5 class="card-title mb-0"><i class="mdi mdi-database-search me-2"></i>Matching Installed Interfaces</h5>
      <span class="badge text-bg-info">
        {% if db_total > db_preview|length %}
          Showing {{ db_preview|length }} of {{ db_total }} affected
        {% else %}
          {{ db_preview|length }} affected
        {% endif %}
      </span>
    </div>
    {% if db_preview %}
      <div class="card-body p-0">
        <table class="table table-sm table-hover mb-0">
          <thead>
            <tr>
              <th>Device</th>
              <th>Module Type</th>
              <th>Current Name</th>
              <th></th>
              <th>New Name(s)</th>
            </tr>
          </thead>
          <tbody>
            {% for entry in db_preview %}
              <tr>
                <td>
                  {% if entry.module.device %}
                    <a href="{{ entry.module.device.get_absolute_url }}">{{ entry.module.device }}</a>
                  {% else %}<span class="text-muted">—</span>{% endif %}
                </td>
                <td>
                  {% if entry.module.module_type %}
                    <code>{{ entry.module.module_type.model }}</code>
                  {% else %}
                    <span class="text-muted">—</span>
                  {% endif %}
                </td>
                <td><code class="text-muted">{{ entry.current_name }}</code></td>
                <td><i class="mdi mdi-arrow-right text-muted"></i></td>
                <td>
                  {% for detail in entry.name_details %}
                    <code class="text-success">{{ detail.name }}</code>{% if detail.channel_id %}<span
                      class="badge text-bg-secondary ms-1"
                      title="Channel {{ detail.channel_id }} of this interface">ch {{ detail.channel_id }}</span>{% endif %}{% if not forloop.last %}, {% endif %}
                  {% endfor %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    {% else %}
      <div class="card-body text-muted">No installed interfaces would be affected.</div>
    {% endif %}
  </div>
{% endif %}

<script>
  (function () {
    const regexCheck = document.getElementById('id_module_type_is_regex');
    const kindCheck = document.getElementById('id_applies_to_device_interfaces');
    const exactRow = document.getElementById('exact-mt-row');
    const regexRow = document.getElementById('regex-mt-row');

    function toggle() {
      const deviceRule = kindCheck.checked;
      const useRegex = regexCheck.checked;
      document.querySelectorAll('[data-module-only]').forEach(row => {
        row.hidden = deviceRule;
        row.querySelectorAll('input, select').forEach(input => { input.disabled = deviceRule; });
      });
      exactRow.hidden = deviceRule || useRegex;
      exactRow.querySelector('select').disabled = exactRow.hidden;
      regexRow.hidden = !deviceRule && !useRegex;
      regexRow.querySelector('input').disabled = regexRow.hidden;
      regexRow.querySelector('label').textContent = deviceRule ? regexRow.dataset.deviceLabel : regexRow.dataset.moduleLabel;
      regexRow.querySelector('.form-text').textContent = deviceRule
        ? regexRow.dataset.deviceHelp
        : regexRow.dataset.moduleHelp;
      document.querySelectorAll('[data-variable-table]').forEach(table => {
        table.hidden = (table.dataset.variableTable === 'device') !== deviceRule;
      });
    }
    regexCheck.addEventListener('change', toggle);
    kindCheck.addEventListener('change', toggle);
    toggle();
  })();
</script>
{% endblock %}