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

{# What an option card says about its feature: the name with its released
   version, what it does, and its package. The package is two boxes, the org
   and the name, so a narrow card wraps after the slash rather than at the
   hyphen in "splent-io"; the org is the same everywhere, so a phone hides it
   (skin_store). The description and version come from the marketplace index
   and are simply left out for a feature it does not publish. #}
{% macro option_body(feature, auto=true) -%}
<span class="cfg-option__body">
    <span class="cfg-option__name">{{ feature.short }}{% if feature.version %} <span class="store-pill cfg-option__version">v{{ feature.version }}</span>{% endif %}{% if feature.external %} <span class="cfg-option__ext">{{ _("external") }}</span>{% endif %}</span>
    {% if feature.description %}<span class="cfg-option__desc">{{ feature.description }}</span>{% endif %}
    <span class="cfg-option__pkg">{% if feature.org %}<span class="cfg-option__org">{{ feature.org }}/</span>{% endif %}<span class="cfg-option__package">{{ feature.package }}</span></span>
    {% if auto %}<span class="cfg-option__auto">{{ _("required by your selection") }}</span>{% endif %}
</span>
{%- endmacro %}

{# The feature's marketplace page, in a new tab so the selection stays put.
   A link inside a label follows the link and leaves the checkbox alone. #}
{% macro option_link(feature) -%}
{% if feature.url %}<a class="cfg-option__link" href="{{ feature.url }}" target="_blank" rel="noopener"
   aria-label="{{ _('%(name)s in the marketplace, in a new tab', name=feature.short) }}"
   title="{{ _('%(name)s in the marketplace, in a new tab', name=feature.short) }}">{{ ck.icon("external-link", 15) }}</a>{% endif %}
{%- endmacro %}

{% block title %}{{ _("Configure %(name)s", name=spl.name) }}{% endblock %}

{% block head %}
<style>
    /* What this page draws on top of the storefront skin. A feature that
       was added because the selection requires it keeps its note inside its
       own card, and the product name field says which name the commands use
       when it is not the one typed. Amber, like the "Added automatically"
       block beside them. */
    .cfg-option--required .cfg-option__input + .cfg-option__box { border-color: #e9d489; background: #fffdf4; }
    .cfg-option__auto { display: none; margin-top: .25rem; color: #8a6a00; font-size: .72rem; font-weight: 600; }
    .cfg-option--required .cfg-option__auto { display: block; }
    .cfg-field__notice { margin: .5rem 0 0; padding: .5rem .75rem; border: 1px solid #f3dfa0; border-radius: 8px;
                         background: #fff7e0; color: #6b5310; font-size: .82rem; font-weight: 500; overflow-wrap: break-word; }
    .cfg-field__notice[hidden] { display: none; }
    /* One line per command even where the skin does not style .store-cmd. */
    #cfg-commands .store-cmd { display: block; }
</style>
{% 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 cfg-product-name-notice">
                <p id="cfg-product-name-help" class="cfg-field__help">
                    {{ _("Lowercase letters, digits and underscores.") }}
                </p>
                <p id="cfg-product-name-notice" class="cfg-field__notice" role="status" aria-live="polite" hidden></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>
                            {{ option_body(feature, auto=false) }}
                            {{ option_link(feature) }}
                        </span>
                    </label>
                    {% endfor %}
                </div>
            </section>
            {% endif %}

            {% for group in tree.groups %}
            {# An "or" group takes any number of its members, so its options
               are checkboxes; an alternative takes one, so they are radios. #}
            {% set multiple = group.kind == "or" %}
            <section class="cfg-section">
                <h2 class="cfg-section__title">{{ ck.icon("git-branch") }}{{ group.owner }}</h2>
                <p class="cfg-section__hint">
                    {% if multiple and group.required %}
                    {{ _("Pick at least one.") }}
                    {% elif multiple %}
                    {{ _("Pick any number, or none.") }}
                    {% elif 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{% if not multiple %} cfg-option--radio{% endif %}" for="cfg-f-{{ member.short }}">
                        <input class="cfg-option__input" type="{{ 'checkbox' if multiple else '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>
                            {{ option_body(member) }}
                            {{ option_link(member) }}
                        </span>
                    </label>
                    {% endfor %}
                    {% if not group.required and not multiple %}
                    <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 class="cfg-option__body">
                                <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 }}">
                        <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>
                            {{ option_body(feature) }}
                            {{ option_link(feature) }}
                        </span>
                    </label>
                    {% endfor %}
                </div>
            </section>
            {% endif %}

            {# A phone shows the panel below every option, so checking one
               gave no feedback in sight. This bar keeps the verdict at the
               bottom of the screen while the options scroll, and rests at
               the end of them, right above the panel it points to, so it
               never covers anything there. A wide screen has the panel
               beside the options and never shows it (skin_store). Not a
               live region: the panel already announces the verdict. #}
            <div class="cfg-bar" id="cfg-bar" data-state="checking"
                 data-label-checking="{{ _('Checking the selection') }}"
                 data-label-valid="{{ _('Valid selection') }}"
                 data-label-invalid="{{ _('Invalid selection') }}"
                 data-label-error="{{ _('Could not validate') }}"
                 data-count-one="{{ _('1 feature') }}"
                 data-count-many="{{ _('%(count)s features', count='{n}') }}"
                 data-link-valid="{{ _('See commands') }}"
                 data-link-other="{{ _('See why') }}">
                <span class="cfg-bar__state">
                    <span class="cfg-bar__icon cfg-bar__icon--checking">{{ ck.icon("loader", 18) }}</span>
                    <span class="cfg-bar__icon cfg-bar__icon--valid">{{ ck.icon("check-circle", 18) }}</span>
                    <span class="cfg-bar__icon cfg-bar__icon--invalid">{{ ck.icon("x-circle", 18) }}</span>
                    <span class="cfg-bar__icon cfg-bar__icon--error">{{ ck.icon("alert-triangle", 18) }}</span>
                    <span class="cfg-bar__words">
                        <span class="cfg-bar__text" id="cfg-bar-text">{{ _("Checking the selection") }}</span>
                        <span class="cfg-bar__count" id="cfg-bar-count"></span>
                    </span>
                </span>
                <a class="cfg-bar__link" id="cfg-bar-link" href="#cfg-panel">
                    <span id="cfg-bar-link-label">{{ _("See commands") }}</span>{{ ck.icon("arrow-down", 14) }}
                </a>
            </div>
        </div>

        {# ── Step 3: live validation + commands (sticky) ────────────────── #}
        <aside class="cfg-panel" id="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 nameNotice = document.getElementById("cfg-product-name-notice");
    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");
    var bar = document.getElementById("cfg-bar");
    var barText = document.getElementById("cfg-bar-text");
    var barCount = document.getElementById("cfg-bar-count");
    var barLink = document.getElementById("cfg-bar-link");
    var barLinkLabel = document.getElementById("cfg-bar-link-label");

    function setBar(state, count) {
        // The compact verdict a phone keeps in sight (see the markup above).
        if (!bar) { return; }
        bar.dataset.state = state;
        barText.textContent = bar.dataset["label" + state.charAt(0).toUpperCase() + state.slice(1)] || "";
        if (typeof count === "number") {
            barCount.textContent = count === 1
                ? bar.dataset.countOne
                : bar.dataset.countMany.replace("{n}", String(count));
        } else {
            barCount.textContent = "";
        }
        var valid = state === "valid";
        barLinkLabel.textContent = valid ? bar.dataset.linkValid : bar.dataset.linkOther;
        barLink.setAttribute("href", valid ? "#cfg-commands-section" : "#cfg-panel");
    }

    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--required"); }
            } else if (!isAuto && input.dataset.auto === "1") {
                input.checked = false;
                delete input.dataset.auto;
                input.disabled = false;
                if (card) { card.classList.remove("cfg-option--required"); }
            }
        });
    }

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

    function renderNameNotice(message) {
        // The server answers with the name the commands use. When that is not
        // what was typed, say so beside the field rather than rewriting it
        // silently in the commands.
        if (!nameNotice) { return; }
        nameNotice.textContent = message || "";
        nameNotice.hidden = !message;
    }

    // What the copy button puts on the clipboard: the commands themselves,
    // one per line, never the text of the markup drawn below.
    var commandsText = "";

    function commandParts(word) {
        // An argument with a slash is two boxes, up to and after the last
        // slash, so "splent-io/splent_feature_session_filesystem" breaks after
        // the slash on a phone instead of at its hyphen or mid word. The same
        // split as the marketplace's command macro.
        var cut = word.lastIndexOf("/");
        if (cut === -1 || cut === word.length - 1) { return [word]; }
        return [word.slice(0, cut + 1), word.slice(cut + 1)];
    }

    function renderCommands(commands) {
        // One element per command and one per argument, so a narrow terminal
        // wraps between arguments and never inside one ("--pin" / "ned").
        commandsText = commands.join("\n");
        commandsPre.textContent = "";
        commands.forEach(function (command) {
            var line = document.createElement("span");
            line.className = "store-cmd";
            command.split(" ").forEach(function (word, index) {
                if (index) { line.appendChild(document.createTextNode(" ")); }
                var arg = document.createElement("span");
                arg.className = "store-cmd__arg";
                var parts = commandParts(word);
                if (parts.length === 1) {
                    arg.textContent = word;
                } else {
                    parts.forEach(function (text) {
                        var part = document.createElement("span");
                        part.className = "store-cmd__part";
                        part.textContent = text;
                        arg.appendChild(part);
                    });
                }
                line.appendChild(arg);
            });
            commandsPre.appendChild(line);
        });
    }

    function render(data) {
        hide(statusError);
        renderNameNotice(data.product_name_message);

        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);
            renderCommands(data.commands || []);
            show(commandsSection);
        } else {
            hide(statusValid);
            show(statusInvalid);
            hide(commandsSection);
        }
        setBar(data.selection_valid ? "valid" : "invalid", (data.selection || []).length);
    }

    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);
                    setBar("error");
                }
            });
    }

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

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

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

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