{% extends "generate/base.html" %}
{% set active_generate_page = "run" %}
{% block title %}Generate — Run | SPIKEE{% endblock %}

{% block content %}
<div class="container-fluid px-4 py-3">

    <h5 class="fw-semibold mb-3">Generate Dataset</h5>

    <form method="post" action="/generate/run" id="generateForm">

        {# ================================================================
           SEED FOLDER (required)
        ================================================================ #}
        <div class="card spikee-card mb-3">
            <div class="card-header py-2 px-3 small fw-semibold">Seed Folder</div>
            <div class="card-body py-3 px-3">
                <div class="row g-3 align-items-end">
                    <div class="col-12 col-md-6">
                        <label class="form-label small fw-semibold" for="seed_folder">Seed Folder <span class="text-danger">*</span></label>
                        <select class="form-select form-select-sm" id="seed_folder" name="seed_folder" required>
                            {% if seeds %}
                                {% for seed in seeds %}
                                <option value="{{ seed.name }}"
                                    {% if saved.get('seed_folder', request.args.get('seed_folder')) == seed.name %}selected{% endif %}>
                                    {{ seed.name }}
                                </option>
                                {% endfor %}
                            {% else %}
                                <option value="seeds-mini-test">seeds-mini-test</option>
                            {% endif %}
                        </select>
                        <div class="form-text">Built-in or workspace seed folder to generate from.</div>
                    </div>
                    <div class="col-12 col-md-3">
                        <label class="form-label small fw-semibold" for="threads">Threads</label>
                        <input type="number" class="form-control form-control-sm" id="threads"
                               name="threads" min="1" max="32" value="{{ saved.get('threads', '1') }}" placeholder="1">
                        <div class="form-text">Parallel plugin threads.</div>
                    </div>
                    <div class="col-12 col-md-3">
                        <label class="form-label small fw-semibold" for="tag">Tag</label>
                        <input type="text" class="form-control form-control-sm" id="tag"
                               name="tag" placeholder="e.g. experiment-1">
                        <div class="form-text">Appended to output filename.</div>
                    </div>
                </div>
            </div>
        </div>


        {# ================================================================
           PLUGINS
        ================================================================ #}
        <div class="card spikee-card mb-3">
            <div class="card-header py-2 px-3 small fw-semibold">Plugins</div>
            <div class="card-body py-3 px-3">
                <div class="row g-3">
                    {# Left: available plugins #}
                    <div class="col-12 col-md-4">
                        <label class="form-label small fw-semibold">Available Plugins</label>
                        <div class="btn-group btn-group-sm w-100 mb-2" id="add-mode-toggle">
                            <button type="button" class="btn btn-outline-secondary active" data-mode="independent">Independent</button>
                            <button type="button" class="btn btn-outline-secondary" data-mode="chain">Add to group</button>
                        </div>
                        <input type="text" class="form-control form-control-sm mb-2" id="plugin_search"
                               placeholder="Search…" oninput="filterPlugins(this.value)" autocomplete="off">
                        <div class="border rounded px-2 pt-2 pb-1" id="plugin-list"
                             style="max-height:320px;overflow-y:auto"
                             hx-get="/generate/partials/plugins-list"
                             hx-trigger="load"
                             hx-swap="innerHTML">
                            <div class="d-flex align-items-center gap-2 text-muted small p-2">
                                <span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>
                                Loading plugins…
                            </div>
                        </div>
                        <div class="form-text mt-1">Click to add. <strong>Independent</strong>: each plugin gets its own group. <strong>Add to group</strong>: chains into the active group.</div>
                    </div>
                    {# Middle: dynamic groups #}
                    <div class="col-12 col-md-4">
                        <label class="form-label small fw-semibold">Plugin Groups</label>
                        <div class="form-text mb-2">Each group is independent. Chips within a group are piped with <code>|</code>.</div>
                        <div id="groups-container" class="d-flex flex-column gap-2" style="max-height:260px;overflow-y:auto;padding-right:2px"></div>
                        <button type="button" class="btn btn-xs btn-outline-secondary mt-2 w-100" id="add-group-btn">+ New group</button>
                        <textarea id="plugins" name="plugins" class="d-none"></textarea>
                    </div>
                    {# Right: plugin options #}
                    <div class="col-12 col-md-4">
                        <label class="form-label small fw-semibold" for="plugin_options">Plugin Options</label>
                        <textarea class="form-control form-control-sm font-monospace" id="plugin_options"
                                  name="plugin_options" rows="7"
                                  placeholder="caesar:shift=13&#10;tts:voice=alloy">{{ saved.get('plugin_options', '') }}</textarea>
                        <div class="form-text mt-1">
                            Per-plugin config variables.<br>
                            Format: <code>plugin:key=value</code>, one per line or semicolon-separated.
                        </div>
                        <div class="form-check mt-3">
                            <input class="form-check-input" type="checkbox" id="plugin_only" name="plugin_only"
                                   {% if saved.get('plugin_only') %}checked{% endif %}>
                            <label class="form-check-label small" for="plugin_only">Plugin-only output</label>
                        </div>
                        <div class="form-text">Skip base entries; output only plugin-transformed variants.</div>
                    </div>
                </div>
            </div>
        </div>

        {# ================================================================
           FORMAT
        ================================================================ #}
        <div class="card spikee-card mb-3">
            <div class="card-header py-2 px-3 small fw-semibold">Format</div>
            <div class="card-body py-3 px-3">
                <div class="d-flex flex-wrap align-items-end gap-4">
                    <div>
                        <label class="form-label small fw-semibold mb-1" for="format">Output Format</label>
                        <select class="form-select form-select-sm" id="format" name="format" style="width:auto">
                            <option value="user-input" {% if saved.get('format','user-input')=='user-input' %}selected{% endif %}>user-input (default)</option>
                            <option value="full-prompt" {% if saved.get('format')=='full-prompt' %}selected{% endif %}>full-prompt</option>
                            <option value="burp" {% if saved.get('format')=='burp' %}selected{% endif %}>burp</option>
                        </select>
                    </div>
                    <div class="d-flex flex-wrap gap-3 pb-1">
                        <div class="form-check mb-0">
                            <input class="form-check-input" type="checkbox" id="include_system_message" name="include_system_message"
                                   {% if saved.get('include_system_message') %}checked{% endif %}>
                            <label class="form-check-label small" for="include_system_message">Include system message</label>
                        </div>
                        <div class="form-check mb-0">
                            <input class="form-check-input" type="checkbox" id="include_standalone_inputs" name="include_standalone_inputs"
                                   {% if saved.get('include_standalone_inputs') %}checked{% endif %}>
                            <label class="form-check-label small" for="include_standalone_inputs">Include standalone inputs</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# ================================================================
           INJECTION
        ================================================================ #}
        <div class="card spikee-card mb-3">
            <div class="card-header py-2 px-3 small fw-semibold">Injection</div>
            <div class="card-body py-3 px-3">
                <div class="row g-3">
                    <div class="col-12 col-md-4">
                        <label class="form-label small fw-semibold">Positions</label>
                        <div class="d-flex flex-wrap gap-3">
                            {% for pos in ['start', 'middle', 'end'] %}
                            <div class="form-check">
                                <input class="form-check-input" type="checkbox" name="positions"
                                       value="{{ pos }}" id="pos_{{ pos }}"
                                       {% if pos in saved.get('positions', ['end']) %}checked{% endif %}>
                                <label class="form-check-label small" for="pos_{{ pos }}">{{ pos }}</label>
                            </div>
                            {% endfor %}
                        </div>
                        <div class="form-text">Where to inject the payload.</div>
                    </div>
                    <div class="col-12 col-md-4">
                        <label class="form-label small fw-semibold" for="injection_delimiters">Injection Delimiters</label>
                        <input type="text" class="form-control form-control-sm font-monospace"
                               id="injection_delimiters" name="injection_delimiters"
                               value="{{ saved.get('injection_delimiters', '') }}"
                               placeholder="\nINJECTION_PAYLOAD\n">
                        <div class="form-text">Comma-separated delimiter patterns.</div>
                    </div>
                    <div class="col-12 col-md-4">
                        <label class="form-label small fw-semibold" for="spotlighting_data_markers">Spotlighting Data Markers</label>
                        <input type="text" class="form-control form-control-sm font-monospace"
                               id="spotlighting_data_markers" name="spotlighting_data_markers"
                               value="{{ saved.get('spotlighting_data_markers', '') }}"
                               placeholder="\nDOCUMENT\n">
                        <div class="form-text">Comma-separated data markers.</div>
                    </div>
                </div>
            </div>
        </div>

        {# ================================================================
           FILTERING
        ================================================================ #}
        <div class="card spikee-card mb-3">
            <div class="card-header py-2 px-3 small fw-semibold">Filtering</div>
            <div class="card-body py-3 px-3">
                <div class="row g-3">
                    {# Languages + match toggle side by side #}
                    <div class="col-12 col-sm-6 col-xl-3">
                        <label class="form-label small fw-semibold" for="languages">Languages</label>
                        <div class="input-group input-group-sm">
                            <input type="text" class="form-control font-monospace" id="languages"
                                   name="languages" value="{{ saved.get('languages', '') }}" placeholder="en,fr,de">
                            <div class="input-group-text gap-2">
                                <input class="form-check-input mt-0" type="checkbox" id="match_languages"
                                       name="match_languages" {% if saved.get('match_languages', 'on') %}checked{% endif %}>
                                <label class="form-check-label small" for="match_languages">match</label>
                            </div>
                        </div>
                        <div class="form-text">Comma-separated codes. "match" keeps only those; unchecked excludes.</div>
                    </div>
                    {# Instruction filter #}
                    <div class="col-12 col-sm-6 col-xl-3">
                        <label class="form-label small fw-semibold" for="instruction_filter">Instruction Filter</label>
                        <input type="text" class="form-control form-control-sm" id="instruction_filter"
                               name="instruction_filter" value="{{ saved.get('instruction_filter', '') }}" placeholder="type1,type2">
                        <div class="form-text">Comma-separated instruction types.</div>
                    </div>
                    {# Jailbreak filter #}
                    <div class="col-12 col-sm-6 col-xl-3">
                        <label class="form-label small fw-semibold" for="jailbreak_filter">Jailbreak Filter</label>
                        <input type="text" class="form-control form-control-sm" id="jailbreak_filter"
                               name="jailbreak_filter" value="{{ saved.get('jailbreak_filter', '') }}" placeholder="type1,type2">
                        <div class="form-text">Comma-separated jailbreak types.</div>
                    </div>
                    {# Include fixes #}
                    <div class="col-12 col-sm-6 col-xl-3">
                        <label class="form-label small fw-semibold" for="include_fixes">Include Fixes</label>
                        <input type="text" class="form-control form-control-sm font-monospace" id="include_fixes"
                               name="include_fixes" value="{{ saved.get('include_fixes', '') }}" placeholder="adv_prefixes,adv_suffixes">
                        <div class="form-text">e.g. <code>adv_prefixes</code>, <code>adv_suffixes</code>.</div>
                    </div>
                </div>
            </div>
        </div>

        {# ================================================================
           SUBMIT
        ================================================================ #}
        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-spikee px-4">
                Generate Dataset
            </button>
            <button type="reset" class="btn btn-outline-secondary">Clear</button>
            <button type="button" class="btn btn-outline-secondary ms-2" onclick="resetFormDefaults('generate')">Reset Defaults</button>
        </div>

    </form>
</div>
<script>
// ── Plugin multi-group builder ────────────────────────────────────────────────
// Each group = one independent plugin entry (one line in --plugins)
// Chips within a group = piped with | (e.g. base64|rot13)
// Chips can be dragged between groups via SortableJS shared group

const container   = document.getElementById('groups-container');
const pluginField = document.getElementById('plugins');
let   activeGroup = null;
let   groupCount  = 0;
let   addMode     = 'independent'; // 'independent' | 'chain'

document.querySelectorAll('#add-mode-toggle button').forEach(btn => {
    btn.addEventListener('click', () => {
        addMode = btn.dataset.mode;
        document.querySelectorAll('#add-mode-toggle button').forEach(b => b.classList.toggle('active', b === btn));
    });
});

function buildHiddenValue() {
    const lines = [];
    container.querySelectorAll('.pg-chip-zone').forEach(zone => {
        const chips = Array.from(zone.querySelectorAll('.plugin-chip')).map(c => c.dataset.name);
        if (chips.length) lines.push(chips.join('|'));
    });
    pluginField.value = lines.join('\n');
}

function refreshSeparators(zone) {
    zone.querySelectorAll('.pipe-sep').forEach(s => s.remove());
    const chips = zone.querySelectorAll('.plugin-chip');
    chips.forEach((chip, i) => {
        if (i > 0) {
            const sep = document.createElement('span');
            sep.className = 'pipe-sep text-muted small px-1';
            sep.textContent = '|';
            sep.style.pointerEvents = 'none';
            zone.insertBefore(sep, chip);
        }
    });
}

function setActive(groupEl) {
    container.querySelectorAll('.pg-group').forEach(g => {
        g.style.outline = '';
    });
    activeGroup = groupEl;
    if (groupEl) groupEl.style.outline = '2px solid #6f3b8c';
}

function makeChip(name) {
    const chip = document.createElement('span');
    chip.className = 'plugin-chip d-inline-flex align-items-center gap-1 badge rounded-pill border fw-normal font-monospace';
    chip.style.cssText = 'cursor:grab;font-size:0.78rem;padding:4px 8px;background:var(--bs-light);color:var(--bs-dark);user-select:none';
    chip.dataset.name = name;
    chip.innerHTML = `<i class="bi bi-grip-vertical text-muted" style="font-size:.7rem"></i>${name}<span class="pipe-remove" title="Remove" style="cursor:pointer;opacity:.5;font-size:.9rem;line-height:1">×</span>`;
    chip.querySelector('.pipe-remove').onclick = e => {
        e.stopPropagation();
        const zone = chip.closest('.pg-chip-zone');
        chip.remove();
        refreshSeparators(zone);
        buildHiddenValue();
    };
    return chip;
}

function addGroup() {
    groupCount++;
    const wrapper = document.createElement('div');
    wrapper.className = 'pg-group border rounded p-2';
    wrapper.style.cursor = 'pointer';

    const header = document.createElement('div');
    header.className = 'd-flex align-items-center justify-content-between mb-1';
    header.innerHTML = `<span class="text-muted small">Group ${groupCount}</span>
        <button type="button" class="btn-close" style="font-size:.55rem" aria-label="Remove group"></button>`;
    header.querySelector('.btn-close').onclick = e => {
        e.stopPropagation();
        if (activeGroup === wrapper) activeGroup = null;
        wrapper.remove();
        buildHiddenValue();
    };

    const zone = document.createElement('div');
    zone.className = 'pg-chip-zone d-flex flex-wrap align-items-center gap-1';
    zone.style.minHeight = '30px';

    wrapper.appendChild(header);
    wrapper.appendChild(zone);
    wrapper.addEventListener('click', () => setActive(wrapper));
    container.appendChild(wrapper);
    setActive(wrapper);
    container.scrollTop = container.scrollHeight;

    Sortable.create(zone, {
        group: 'plugin-chips',
        animation: 150,
        ghostClass: 'opacity-50',
        handle: '.bi-grip-vertical',
        filter: '.pipe-sep,.pipe-remove',
        onEnd: () => {
            container.querySelectorAll('.pg-chip-zone').forEach(refreshSeparators);
            buildHiddenValue();
        },
    });
    return wrapper;
}

function addPlugin(name) {
    if (addMode === 'independent') {
        // Use the most recent empty group, or create a new one
        const groups = Array.from(container.querySelectorAll('.pg-group'));
        const emptyGroup = groups.reverse().find(g => g.querySelector('.pg-chip-zone').querySelectorAll('.plugin-chip').length === 0);
        const target = emptyGroup || addGroup();
        setActive(target);
        const zone = target.querySelector('.pg-chip-zone');
        zone.appendChild(makeChip(name));
        refreshSeparators(zone);
        buildHiddenValue();
    } else {
        // Chain into the active group (create one if needed)
        if (!activeGroup) addGroup();
        const zone = activeGroup.querySelector('.pg-chip-zone');
        zone.appendChild(makeChip(name));
        refreshSeparators(zone);
        buildHiddenValue();
    }
}

function filterPlugins(q) {
    const term = q.toLowerCase();
    document.querySelectorAll('.plugin-item').forEach(el => {
        el.style.display = el.querySelector('button').textContent.toLowerCase().includes(term) ? '' : 'none';
    });
}

document.getElementById('add-group-btn').addEventListener('click', addGroup);
// Event delegation — works for buttons loaded after HTMX swap
document.getElementById('plugin-list').addEventListener('click', e => {
    const btn = e.target.closest('[data-plugin]');
    if (btn) addPlugin(btn.dataset.plugin);
});

addGroup(); // start with one group ready

// Restore saved plugin groups after the plugin list HTMX swap completes.
const _savedPlugins = {{ saved.get('plugins', '') | tojson }};
function restorePlugins(pluginsStr) {
    if (!pluginsStr) return;
    // Clear the initial empty group added by addGroup() above.
    container.innerHTML = '';
    groupCount = 0;
    activeGroup = null;
    pluginsStr.split('\n').forEach(line => {
        line = line.trim();
        if (!line) return;
        const g = addGroup();
        line.split('|').forEach(name => {
            const zone = g.querySelector('.pg-chip-zone');
            zone.appendChild(makeChip(name.trim()));
        });
        refreshSeparators(g.querySelector('.pg-chip-zone'));
    });
    buildHiddenValue();
    // If nothing was restored, leave one empty group.
    if (!container.querySelector('.pg-group')) addGroup();
}
if (_savedPlugins) {
    // Plugin list loads asynchronously; restore after it swaps in.
    const _pluginList = document.getElementById('plugin-list');
    function _tryRestorePlugins() {
        // Wait until the real plugin buttons are present (not the spinner).
        if (_pluginList.querySelector('[data-plugin]')) {
            restorePlugins(_savedPlugins);
        } else {
            _pluginList.addEventListener('htmx:afterSwap', function _onSwap() {
                restorePlugins(_savedPlugins);
                _pluginList.removeEventListener('htmx:afterSwap', _onSwap);
            });
        }
    }
    _tryRestorePlugins();
}

function resetFormDefaults(formName) {
    fetch('/settings/api/reset-form', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ form: formName })
    }).then(() => location.reload());
}

// Pre-populate plugin from ?plugin= query param (e.g. linked from Plugins page).
// The plugin list loads asynchronously via HTMX, so we wait for the htmx:afterSwap
// event on the plugin-list container before adding the chip.
{% if request.args.get('plugin') %}
(function () {
    var presetPlugin = {{ request.args.get('plugin') | tojson }};
    var pluginList   = document.getElementById('plugin-list');

    function tryAdd() {
        var btn = pluginList.querySelector('[data-plugin="' + presetPlugin + '"]');
        if (btn) {
            addPlugin(presetPlugin);
        }
    }

    // If cache is warm the list may already be present (no HTMX swap needed).
    tryAdd();

    // Otherwise wait for the HTMX swap that replaces the loading spinner.
    pluginList.addEventListener('htmx:afterSwap', function onSwap() {
        tryAdd();
        pluginList.removeEventListener('htmx:afterSwap', onSwap);
    });
})();
{% endif %}
</script>
{% endblock %}