{% load helpers %}
{# Modal-content fragment for adding a missing ModuleBayTemplate to a Device Type or Module Type. #}
{# Rendered by AddBayTemplateView.get and swapped into #htmx-modal-content. #}
<div class="modal-header">
    <h5 id="htmx-modal-label" class="modal-title">
        <i class="mdi mdi-wrench-outline me-1"></i>{% if mapping_only %}Map Existing Bay{% else %}Add Bay Template{% endif %}
    </h5>
    <button type="button" class="btn-close" onclick="closeHtmxModal()" aria-label="Close"></button>
</div>
<form method="post"
      action="{% url 'plugins:netbox_librenms_plugin:add_bay_template' pk=device_pk %}">
    {% csrf_token %}
    {% if mapping_only %}<input type="hidden" name="mode" value="map_existing">{% endif %}
    <input type="hidden" name="target_kind" value="{{ target_kind }}">
    <input type="hidden" name="target_pk" value="{{ target_pk }}">
    <input type="hidden" name="librenms_name" value="{{ librenms_name }}">
    <input type="hidden" name="librenms_class" value="{{ librenms_class }}">
    {% include "netbox_librenms_plugin/inc/_hidden_server_key.html" %}

    <div class="modal-body">
        {% if mapping_only %}
        {% if mapping_step == "kind" %}
        <p class="mb-2">
            Mapping LibreNMS <code>{{ librenms_name }}</code>{% if librenms_class %}
            (class <code>{{ librenms_class }}</code>){% endif %} to NetBox bay
            <strong>{{ chosen_name }}</strong>.
        </p>
        {# The reviewed bay travels to the POST here, so it cannot drift from what was shown. #}
        <input type="hidden" name="name" value="{{ chosen_name }}">
        <input type="hidden" name="also_create_mapping" value="1">
        <div class="form-text mb-3">
            Bay matching is exact and case-sensitive, so a mapping is needed whenever the NetBox
            bay name differs from the LibreNMS name.
            {% if manufacturer_label %}
            The mapping will be scoped to manufacturer <strong>{{ manufacturer_label }}</strong>.
            {% else %}
            The mapping will be created globally (the device has no manufacturer set).
            {% endif %}
        </div>
        <div class="ps-1">
            {% if mapping_pattern %}
            <div class="form-check mb-2">
                <input class="form-check-input" type="radio" name="mapping_kind"
                       id="add-bay-mapping-kind-regex" value="regex" checked>
                <label class="form-check-label small" for="add-bay-mapping-kind-regex">
                    All bays of this kind <span class="text-muted">(regex)</span>
                    <span class="form-text small d-block">
                        Will store <code>{{ mapping_pattern.librenms_pattern }}</code> &rarr;
                        <code>{{ mapping_pattern.netbox_replacement }}</code>, covering every bay
                        sharing this skeleton.
                    </span>
                </label>
            </div>
            {% endif %}
            <div class="form-check">
                <input class="form-check-input" type="radio" name="mapping_kind"
                       id="add-bay-mapping-kind-exact" value="exact"{% if not mapping_pattern %} checked{% endif %}>
                <label class="form-check-label small" for="add-bay-mapping-kind-exact">
                    This bay only <span class="text-muted">(exact)</span>
                    <span class="form-text small d-block">
                        Will store <code>{{ librenms_name }}</code> &rarr; <code>{{ chosen_name }}</code>.
                    </span>
                </label>
            </div>
        </div>
        {% else %}
        <p>Select an existing bay. The proposed mapping is reviewed on the next step.</p>
        <div class="mb-3">
            <label for="add-bay-name" class="form-label">Existing bay</label>
            <select class="form-select" id="add-bay-name" name="name" required>
                <option value=""{% if not preselected_name %} selected{% endif %}>&mdash; Choose a bay &mdash;</option>
                {% for bay_name in available_bay_names %}
                <option value="{{ bay_name }}"{% if bay_name == preselected_name %} selected{% endif %}>{{ bay_name }}</option>
                {% empty %}<option value="">No visible, empty bays available</option>{% endfor %}
            </select>
        </div>
        <script>
        // Keeps "Next" from opening step two with no bay chosen. Derives nothing: the mapping
        // pattern and its default kind are rendered by the server once the bay is known.
        (function () {
            var select = document.getElementById("add-bay-name");
            var next = document.getElementById("add-bay-next");
            if (!select || !next) return;
            function sync() { next.disabled = !select.value; }
            select.addEventListener("change", sync);
            sync();
        })();
        </script>
        {% endif %}
        {% else %}
        <p class="text-muted small mb-3">
            Add a new bay template to
            {% if target_kind == "device_type" %}device type{% else %}module type{% endif %}
            <strong>{{ target_label }}</strong>. The values below were pre-filled from
            LibreNMS data — review and adjust as needed before saving.
        </p>

        <div class="mb-3">
            <label for="add-bay-name" class="form-label">Name <span class="text-danger">*</span></label>
            <input type="text" class="form-control" id="add-bay-name" name="name"
                   value="{{ suggested_name }}" required>
            <div class="form-text">
                Bay name as it should appear on the
                {% if target_kind == "device_type" %}device type{% else %}module type{% endif %}
                (e.g. <code>Slot 1</code>, <code>Fan Tray 0</code>).
            </div>
        </div>

        <div class="mb-3">
            <label for="add-bay-position" class="form-label">Position</label>
            <input type="text" class="form-control" id="add-bay-position" name="position"
                   value="{{ suggested_position }}">
            <div class="form-text">Optional positional identifier (e.g. <code>1</code>, <code>A</code>).</div>
        </div>

        <div class="mb-3">
            <label for="add-bay-label" class="form-label">Label</label>
            <input type="text" class="form-control" id="add-bay-label" name="label"
                   value="{{ suggested_label }}">
            <div class="form-text">Optional human-readable label.</div>
        </div>

        <div class="mb-2">
            <label for="add-bay-description" class="form-label">Description</label>
            <textarea class="form-control" id="add-bay-description" name="description" rows="2"></textarea>
        </div>

        {% endif %}

        {% if offer_mapping_checkbox and not mapping_only %}
        <hr>
        <div class="form-check mb-2" id="add-bay-mapping-block">
            <input class="form-check-input" type="{% if mapping_only %}hidden{% else %}checkbox{% endif %}" value="1"
                   id="add-bay-also-create-mapping" name="also_create_mapping">
            <label class="form-check-label" for="add-bay-also-create-mapping">
                {% if mapping_only %}Create a ModuleBayMapping{% else %}Also create a ModuleBayMapping{% endif %}
                <span id="add-bay-mapping-summary" class="text-muted small d-block"></span>
            </label>
            <div class="form-text">
                LibreNMS reports this bay as
                <code id="add-bay-libre-name-display">{{ librenms_name }}</code>{% if librenms_class %}
                (class <code>{{ librenms_class }}</code>){% endif %}.
                Bay matching is exact and case-sensitive, so a mapping is needed
                whenever the NetBox bay name differs from the LibreNMS name.
                {% if manufacturer_label %}
                The mapping will be scoped to manufacturer
                <strong>{{ manufacturer_label }}</strong>.
                {% else %}
                The mapping will be created globally (the device has no
                manufacturer set).
                {% endif %}
            </div>
            <div class="mt-2 ps-1" id="add-bay-mapping-kind-block" style="display:none;">
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="mapping_kind"
                           id="add-bay-mapping-kind-regex" value="regex">
                    <label class="form-check-label small" for="add-bay-mapping-kind-regex">
                        All bays of this kind <span class="text-muted">(regex)</span>
                    </label>
                </div>
                <div class="form-check form-check-inline">
                    <input class="form-check-input" type="radio" name="mapping_kind"
                           id="add-bay-mapping-kind-exact" value="exact">
                    <label class="form-check-label small" for="add-bay-mapping-kind-exact">
                        This bay only <span class="text-muted">(exact)</span>
                    </label>
                </div>
                <div class="form-text small" id="add-bay-mapping-preview"></div>
            </div>
        </div>
        <script>
        (function () {
            var libreName = "{{ librenms_name|escapejs }}";
            var nameInput = document.getElementById("add-bay-name");
            var checkbox = document.getElementById("add-bay-also-create-mapping");
            var summary = document.getElementById("add-bay-mapping-summary");
            var kindBlock = document.getElementById("add-bay-mapping-kind-block");
            var radioRegex = document.getElementById("add-bay-mapping-kind-regex");
            var radioExact = document.getElementById("add-bay-mapping-kind-exact");
            var preview = document.getElementById("add-bay-mapping-preview");
            // Seeded from the server default so a bay change before any radio click keeps it.
            var preferredMappingKind = {% if mapping_default_kind == "regex" %}"regex"{% else %}"exact"{% endif %};
            if (!nameInput || !checkbox) return;

            // Mirror of AddBayTemplateView._derive_mapping_pattern. Maps
            // each *distinct* digit value on the LibreNMS side to a numbered
            // capture group (repeats emit back-references), then routes
            // NetBox-side digits to the matching libre group. Returns null
            // when libre has no digits, when a NetBox digit value is absent
            // from libre, or when the pattern fails to round-trip.
            function derivePattern(libre, nb) {
                if (!libre || !nb) return null;
                var tokenRe = /(\d+|\D+)/g;
                var libreTokens = libre.match(tokenRe) || [];
                var nbTokens = nb.match(tokenRe) || [];
                var groups = {};
                var nextGroup = 1;
                var pattern = "^";
                for (var i = 0; i < libreTokens.length; i++) {
                    var t = libreTokens[i];
                    if (/^\d+$/.test(t)) {
                        if (Object.prototype.hasOwnProperty.call(groups, t)) {
                            pattern += "\\" + groups[t];
                        } else {
                            groups[t] = nextGroup++;
                            pattern += "(\\d+)";
                        }
                    } else {
                        pattern += t.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
                    }
                }
                pattern += "$";
                if (nextGroup === 1) return null;
                var replacement = "";
                for (var j = 0; j < nbTokens.length; j++) {
                    var u = nbTokens[j];
                    if (/^\d+$/.test(u)) {
                        if (!Object.prototype.hasOwnProperty.call(groups, u)) return null;
                        replacement += "\\" + groups[u];
                    } else {
                        replacement += u.replace(/\\/g, "\\\\");
                    }
                }
                // Sanity: the pattern applied to libre must reproduce nb.
                var rx;
                try { rx = new RegExp(pattern); } catch (e) { return null; }
                if (!rx.test(libre)) return null;
                // JS replace() interprets $1.. for back-refs; convert.
                var jsReplacement = replacement.replace(/\\(\d+)/g, "$$$1");
                if (libre.replace(rx, jsReplacement) !== nb) return null;
                return { pattern: pattern, replacement: replacement };
            }

            // Build the preview as text + <code> nodes (no innerHTML — the
            // pattern/replacement strings are derived from operator input
            // and must never be parsed as HTML).
            function renderPreview(target, prefix, codeA, sep, codeB, suffix) {
                while (target.firstChild) target.removeChild(target.firstChild);
                target.appendChild(document.createTextNode(prefix));
                var a = document.createElement("code");
                a.textContent = codeA;
                target.appendChild(a);
                target.appendChild(document.createTextNode(sep));
                var b = document.createElement("code");
                b.textContent = codeB;
                target.appendChild(b);
                target.appendChild(document.createTextNode(suffix));
            }

            function refresh() {
                var current = nameInput.value.trim();
                var differs = libreName && current && current !== libreName;
                checkbox.disabled = !differs;
                if (!differs) {
                    checkbox.checked = false;
                    kindBlock.style.display = "none";
                    summary.textContent = "(name matches LibreNMS — no mapping needed)";
                    return;
                }
                checkbox.checked = true;
                summary.textContent = "Will map LibreNMS '" + libreName + "' → NetBox '" + current + "'";
                var pat = derivePattern(libreName, current);
                if (pat) {
                    kindBlock.style.display = "";
                    radioRegex.disabled = false;
                    if (!radioRegex.checked && !radioExact.checked) {
                        radioRegex.checked = true;
                    }
                    if (radioRegex.checked) {
                        renderPreview(preview, "Will store regex: ", pat.pattern, " → ", pat.replacement, " (covers all bays sharing this skeleton).");
                    } else {
                        renderPreview(preview, "Will store exact: ", libreName, " → ", current, ".");
                    }
                } else {
                    // No pattern available → exact-only.
                    kindBlock.style.display = "none";
                    radioExact.checked = true;
                    radioRegex.checked = false;
                }
            }

            nameInput.addEventListener("input", refresh);
            {% if mapping_only %}
            nameInput.addEventListener("change", function () {
                radioRegex.checked = preferredMappingKind !== "exact";
                radioExact.checked = preferredMappingKind === "exact";
                refresh();
            });
            {% endif %}
            function selectMappingKind(event) {
                preferredMappingKind = event.target.value;
                refresh();
            }
            radioRegex.addEventListener("change", selectMappingKind);
            radioExact.addEventListener("change", selectMappingKind);
            // Server-supplied default kind, picked up on first render.
            {% if mapping_default_kind == "regex" %}radioRegex.checked = true;{% else %}radioExact.checked = true;{% endif %}
            refresh();
        })();
        </script>
        {% elif mapping_exists %}
        <hr>
        <div class="alert alert-info py-2 small mb-0">
            <i class="mdi mdi-information-outline"></i>
            A ModuleBayMapping for LibreNMS
            <code>{{ librenms_name }}</code> already exists — no extra mapping
            will be created.
        </div>
        {% endif %}
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-secondary" onclick="closeHtmxModal()">Cancel</button>
        {% if mapping_only %}{% url 'plugins:netbox_librenms_plugin:add_bay_template' pk=device_pk as bay_modal_url %}
        {% endif %}
        {% if mapping_only and mapping_step == "kind" %}
        <button type="button" class="btn btn-outline-secondary"
                hx-get="{{ bay_modal_url }}?mode=map_existing&amp;librenms_name={{ librenms_name|urlencode }}&amp;librenms_class={{ librenms_class|urlencode }}&amp;server_key={{ server_key|urlencode }}"
                hx-target="#htmx-modal-content" hx-swap="innerHTML" hx-disabled-elt="this">
            <i class="mdi mdi-arrow-left me-1"></i>Back
        </button>
        <button type="submit" class="btn btn-primary">
            <i class="mdi mdi-plus me-1"></i>Save Mapping
        </button>
        {% elif mapping_only %}
        <button type="button" class="btn btn-primary" id="add-bay-next" disabled
                hx-get="{{ bay_modal_url }}?mode=map_existing&amp;step=kind&amp;librenms_name={{ librenms_name|urlencode }}&amp;librenms_class={{ librenms_class|urlencode }}&amp;server_key={{ server_key|urlencode }}"
                hx-include="#add-bay-name" hx-target="#htmx-modal-content" hx-swap="innerHTML"
                hx-disabled-elt="this">
            Next<i class="mdi mdi-arrow-right ms-1"></i>
        </button>
        {% else %}
        <button type="submit" class="btn btn-primary">
            <i class="mdi mdi-plus me-1"></i>Add Bay Template
        </button>
        {% endif %}
    </div>
</form>