{% extends "public_base.html" %}
{% import "configurator/_macros.html" as ck %}

{% block title %}{{ _("Configurator") }} · {{ spl.name }}{% endblock %}

{% block hero %}
<section class="store-hero store-hero--slim">
    <div class="container">
        <h1 class="store-hero__title">{{ spl.name }}</h1>
        {% if spl.description %}<p class="store-hero__subtitle">{{ spl.description }}</p>{% endif %}
    </div>
</section>
{% endblock %}

{% block content %}
<div class="container"
     id="configurator"
     data-validate-url="{{ url_for('configurator.validate_selection', spl_name=spl.name) }}">

    <nav class="store-crumbs">
        <a class="store-backlink" href="{{ url_for('configurator.index') }}">
            {{ ck.icon("arrow-left", 14) }}{{ _("All product lines") }}
        </a>
    </nav>

    <div class="cfg-cols">

        {# ── Step 2: feature selection ──────────────────────────────────── #}
        <div>
            <div class="cfg-field">
                <label for="cfg-product-name" class="cfg-field__label">{{ _("Product name") }}</label>
                <input type="text" class="cfg-field__input" id="cfg-product-name"
                       value="my_app" autocomplete="off" spellcheck="false"
                       aria-describedby="cfg-product-name-help">
                <p id="cfg-product-name-help" class="cfg-field__help">
                    {{ _("Lowercase letters, digits and underscores.") }}
                </p>
            </div>

            {% if tree.mandatory %}
            <section class="cfg-section">
                <h2 class="cfg-section__title">{{ ck.icon("lock") }}{{ _("Core features") }}</h2>
                <p class="cfg-section__hint">{{ _("Always included in every product of this line.") }}</p>
                <div class="cfg-options">
                    {% for feature in tree.mandatory %}
                    <label class="cfg-option cfg-option--locked" for="cfg-f-{{ feature.short }}">
                        <input class="cfg-option__input" type="checkbox" checked disabled
                               id="cfg-f-{{ feature.short }}" data-feature="{{ feature.short }}">
                        <span class="cfg-option__box">
                            <span class="cfg-option__mark">{{ ck.icon("check", 12) }}</span>
                            <span>
                                <span class="cfg-option__name">{{ feature.short }}{% if feature.external %} <span class="cfg-option__ext">{{ _("external") }}</span>{% endif %}</span>
                                <span class="cfg-option__pkg">{{ feature.org }}/{{ feature.package }}</span>
                            </span>
                        </span>
                    </label>
                    {% endfor %}
                </div>
            </section>
            {% endif %}

            {% for group in tree.groups %}
            <section class="cfg-section">
                <h2 class="cfg-section__title">{{ ck.icon("git-branch") }}{{ group.owner }}</h2>
                <p class="cfg-section__hint">
                    {% if group.required %}
                    {{ _("Exclusive group. Pick exactly one.") }}
                    {% else %}
                    {{ _("Exclusive group. Pick one at most.") }}
                    {% endif %}
                </p>
                <div class="cfg-options">
                    {% for member in group.members %}
                    <label class="cfg-option cfg-option--radio" for="cfg-f-{{ member.short }}">
                        <input class="cfg-option__input" type="radio"
                               name="cfg-group-{{ group.owner }}" value="{{ member.short }}"
                               id="cfg-f-{{ member.short }}" data-feature="{{ member.short }}"
                               {% if group.required and loop.first %}checked{% endif %}>
                        <span class="cfg-option__box">
                            <span class="cfg-option__mark">{{ ck.icon("check", 12) }}</span>
                            <span>
                                <span class="cfg-option__name">{{ member.short }}{% if member.external %} <span class="cfg-option__ext">{{ _("external") }}</span>{% endif %}</span>
                                <span class="cfg-option__pkg">{{ member.org }}/{{ member.package }}</span>
                            </span>
                        </span>
                    </label>
                    {% endfor %}
                    {% if not group.required %}
                    <label class="cfg-option cfg-option--radio" for="cfg-g-{{ group.owner }}-none">
                        <input class="cfg-option__input" type="radio"
                               name="cfg-group-{{ group.owner }}" value=""
                               id="cfg-g-{{ group.owner }}-none" checked>
                        <span class="cfg-option__box">
                            <span class="cfg-option__mark">{{ ck.icon("check", 12) }}</span>
                            <span>
                                <span class="cfg-option__name">{{ _("None") }}</span>
                                <span class="cfg-option__pkg">{{ _("skip this group") }}</span>
                            </span>
                        </span>
                    </label>
                    {% endif %}
                </div>
            </section>
            {% endfor %}

            {% if tree.optional %}
            <section class="cfg-section">
                <h2 class="cfg-section__title">{{ ck.icon("plus") }}{{ _("Optional features") }}</h2>
                <p class="cfg-section__hint">{{ _("Dependencies are added automatically as you select.") }}</p>
                <div class="cfg-options">
                    {% for feature in tree.optional %}
                    <label class="cfg-option" for="cfg-f-{{ feature.short }}" data-auto-label="{{ _('required by your selection') }}">
                        <input class="cfg-option__input" type="checkbox"
                               id="cfg-f-{{ feature.short }}" data-feature="{{ feature.short }}">
                        <span class="cfg-option__box">
                            <span class="cfg-option__mark">{{ ck.icon("check", 12) }}</span>
                            <span>
                                <span class="cfg-option__name">{{ feature.short }}{% if feature.external %} <span class="cfg-option__ext">{{ _("external") }}</span>{% endif %}</span>
                                <span class="cfg-option__pkg">{{ feature.org }}/{{ feature.package }}</span>
                            </span>
                        </span>
                    </label>
                    {% endfor %}
                </div>
            </section>
            {% endif %}
        </div>

        {# ── Step 3: live validation + commands (sticky) ────────────────── #}
        <aside class="cfg-panel">

            <div id="cfg-status-valid" class="cfg-status cfg-status--valid is-hidden" role="status">
                <span class="cfg-status__head">{{ ck.icon("check-circle", 18) }}{{ _("Valid selection") }}</span>
            </div>

            <div id="cfg-status-invalid" class="cfg-status cfg-status--invalid is-hidden" role="alert">
                <span class="cfg-status__head">{{ ck.icon("x-circle", 18) }}{{ _("Invalid selection") }}</span>
                <ul id="cfg-violations"></ul>
            </div>

            <div id="cfg-status-error" class="cfg-status cfg-status--error is-hidden" role="alert">
                <span class="cfg-status__head">{{ ck.icon("alert-triangle", 18) }}{{ _("Could not validate the selection. Check your connection and try again.") }}</span>
            </div>

            <section id="cfg-auto-section" class="cfg-aside-block cfg-aside-block--auto is-hidden">
                <h3 class="cfg-aside-block__title">{{ ck.icon("zap") }}{{ _("Added automatically") }}</h3>
                <p class="cfg-aside-block__hint">{{ _("Required by your selection or by the product line.") }}</p>
                <div id="cfg-auto" class="store-chipset"></div>
            </section>

            <section id="cfg-commands-section" class="cfg-aside-block is-hidden">
                <h3 class="cfg-aside-block__title">{{ ck.icon("terminal") }}{{ _("Build commands") }}</h3>
                <p class="cfg-aside-block__hint">{{ _("Run these in your SPLENT workspace.") }}</p>
                <div class="store-terminal store-terminal--lines">
                    <pre id="cfg-commands"></pre>
                </div>
                <div class="cfg-terminal-actions">
                    <button type="button" id="cfg-copy" class="store-copy"
                            data-label="{{ _('Copy commands') }}" data-label-copied="{{ _('Copied') }}">
                        {{ ck.icon("copy") }}<span id="cfg-copy-label">{{ _("Copy commands") }}</span>
                    </button>
                </div>
            </section>

        </aside>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
(function () {
    "use strict";

    var root = document.getElementById("configurator");
    if (!root) { return; }

    var validateUrl = root.dataset.validateUrl;
    var nameInput = document.getElementById("cfg-product-name");
    var statusValid = document.getElementById("cfg-status-valid");
    var statusInvalid = document.getElementById("cfg-status-invalid");
    var statusError = document.getElementById("cfg-status-error");
    var violationsList = document.getElementById("cfg-violations");
    var autoSection = document.getElementById("cfg-auto-section");
    var autoBox = document.getElementById("cfg-auto");
    var commandsSection = document.getElementById("cfg-commands-section");
    var commandsPre = document.getElementById("cfg-commands");
    var copyButton = document.getElementById("cfg-copy");
    var copyLabel = document.getElementById("cfg-copy-label");

    function collectSelected() {
        var selected = [];
        root.querySelectorAll("input[data-feature]").forEach(function (input) {
            if (input.checked && input.dataset.auto !== "1") {
                selected.push(input.dataset.feature);
            }
        });
        return selected;
    }

    function paintAutoAdded(autoAdded) {
        // Auto-required features show as checked + locked in the tree itself,
        // so "comments pulls in post" is visible where the user is looking.
        root.querySelectorAll("input[data-feature]").forEach(function (input) {
            var card = input.closest("label") || input.parentElement;
            var isAuto = autoAdded.indexOf(input.dataset.feature) !== -1;
            if (isAuto && !input.checked) {
                input.checked = true;
                input.dataset.auto = "1";
                input.disabled = true;
                if (card) { card.classList.add("cfg-option--auto"); }
            } else if (!isAuto && input.dataset.auto === "1") {
                input.checked = false;
                delete input.dataset.auto;
                input.disabled = false;
                if (card) { card.classList.remove("cfg-option--auto"); }
            }
        });
    }

    function show(el) { el.classList.remove("is-hidden"); }
    function hide(el) { el.classList.add("is-hidden"); }

    function render(data) {
        hide(statusError);

        violationsList.textContent = "";
        (data.violations || []).forEach(function (violation) {
            var item = document.createElement("li");
            item.textContent = violation.message || violation.code;
            violationsList.appendChild(item);
        });

        paintAutoAdded(data.auto_added || []);

        autoBox.textContent = "";
        (data.auto_added || []).forEach(function (short) {
            var badge = document.createElement("span");
            badge.className = "store-chip store-chip--amber";
            badge.textContent = short;
            autoBox.appendChild(badge);
        });
        if ((data.auto_added || []).length) { show(autoSection); } else { hide(autoSection); }

        if (data.selection_valid) {
            show(statusValid);
            hide(statusInvalid);
            commandsPre.textContent = (data.commands || []).join("\n");
            show(commandsSection);
        } else {
            hide(statusValid);
            show(statusInvalid);
            hide(commandsSection);
        }
    }

    var timer = null;
    var requestSeq = 0;

    function validate() {
        var seq = ++requestSeq;
        fetch(validateUrl, {
            method: "POST",
            headers: { "Content-Type": "application/json" },
            body: JSON.stringify({
                selected: collectSelected(),
                product_name: nameInput ? nameInput.value : ""
            })
        })
            .then(function (response) {
                if (!response.ok) { throw new Error("HTTP " + response.status); }
                return response.json();
            })
            .then(function (data) {
                if (seq === requestSeq) { render(data); }
            })
            .catch(function () {
                if (seq === requestSeq) {
                    hide(statusValid);
                    hide(statusInvalid);
                    hide(commandsSection);
                    hide(autoSection);
                    show(statusError);
                }
            });
    }

    function scheduleValidate() {
        clearTimeout(timer);
        timer = setTimeout(validate, 200);
    }

    root.addEventListener("change", scheduleValidate);
    if (nameInput) { nameInput.addEventListener("input", scheduleValidate); }

    if (copyButton) {
        copyButton.addEventListener("click", function () {
            var text = commandsPre.textContent;
            if (!navigator.clipboard) { return; }
            navigator.clipboard.writeText(text).then(function () {
                copyLabel.textContent = copyButton.dataset.labelCopied;
                setTimeout(function () {
                    copyLabel.textContent = copyButton.dataset.label;
                }, 1500);
            });
        });
    }

    validate();
})();
</script>
{% endblock %}