{% extends "test/base.html" %}
{% set active_test_page = "run" %}
{% block title %}Test — Run | SPIKEE{% endblock %}

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

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

    <form method="post" action="/test/run" id="testForm">

        {# ================================================================
           TARGET + DATASET
        ================================================================ #}
        <div class="card spikee-card mb-3">
            <div class="card-header py-2 px-3 small fw-semibold">Target &amp; Dataset</div>
            <div class="card-body py-3 px-3">
                <div class="row g-3">

                    {# Target #}
                    <div class="col-12 col-md-6">
                        <label class="form-label small fw-semibold" for="target">
                            Target <span class="text-danger">*</span>
                        </label>
                        <select class="form-select form-select-sm" id="target" name="target" required
                                hx-get="/test/partials/targets-options"
                                hx-trigger="load"
                                hx-swap="innerHTML">
                            <option value="" disabled selected>Loading targets…</option>
                        </select>
                        <div class="form-text">Built-in or workspace target module.</div>
                    </div>

                    {# Target options #}
                    <div class="col-12 col-md-6">
                        <label class="form-label small fw-semibold" for="target_options">Target Options</label>
                        <input type="text" class="form-control form-control-sm font-monospace"
                               id="target_options" name="target_options"
                               value="{{ saved.get('target_options', '') }}"
                               placeholder="model=openai/gpt-4o">
                        <div class="form-text">e.g. <code>model=openai/gpt-4o</code>, <code>temperature=0</code></div>
                    </div>

                    {# Datasets (multi-select) #}
                    <div class="col-12 col-md-12">
                        <label class="form-label small fw-semibold">
                            Datasets <span class="text-danger">*</span>
                        </label>
                        <div class="border rounded px-2 pt-2 pb-1" style="max-height:180px;overflow-y:auto">
                            {% if datasets %}
                                {% for ds in datasets %}
                                <div class="form-check mb-1">
                                    <input class="form-check-input dataset-cb" type="checkbox"
                                           name="datasets" value="{{ ds }}" id="ds_{{ loop.index }}"
                                           {% if ds in saved.get('datasets', []) %}checked{% endif %}>
                                    <label class="form-check-label small font-monospace" for="ds_{{ loop.index }}">
                                        {{ ds }}
                                    </label>
                                </div>
                                {% endfor %}
                            {% else %}
                                <span class="text-muted small">No datasets found in <code>datasets/</code>.</span>
                            {% endif %}
                        </div>
                        <div class="form-text mt-1">
                            <a href="#" onclick="toggleAllDatasets(true);return false">Select all</a> &middot;
                            <a href="#" onclick="toggleAllDatasets(false);return false">None</a>
                        </div>
                    </div>

                    {# Judge options — own row #}
                    <div class="col-12 col-md-12">
                        <label class="form-label small fw-semibold" for="judge_options">Judge Options</label>
                        <input type="text" class="form-control form-control-sm font-monospace"
                               id="judge_options" name="judge_options"
                               value="{{ saved.get('judge_options', '') }}"
                               placeholder="offline">
                        <div class="form-text">e.g. <code>offline</code>, <code>model=bedrock/claude45-haiku</code></div>
                    </div>
                </div>
            </div>
        </div>

        {# ================================================================
           OPTIONS
        ================================================================ #}
        <div class="card spikee-card mb-3">
            <div class="card-header py-2 px-3 small fw-semibold">Options</div>
            <div class="card-body py-3 px-3">
                <div class="row g-3 align-items-end">
                    <div class="col-12 col-sm-6 col-lg-3">
                        <label class="form-label small fw-semibold" for="sample">Sample</label>
                        <div class="input-group input-group-sm">
                            <input type="number" class="form-control font-monospace"
                                   id="sample" name="sample" min="0.01" max="0.99"
                                   step="0.01" value="{{ saved.get('sample', '') }}" placeholder="1.0 (all)">
                            <span class="input-group-text">0–1</span>
                        </div>
                        <div class="form-text">Fraction of dataset to test.</div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <label class="form-label small fw-semibold" for="sample_seed">Sample Seed</label>
                        <input type="text" class="form-control form-control-sm font-monospace"
                               id="sample_seed" name="sample_seed"
                               value="{{ saved.get('sample_seed', '42') }}" placeholder="42 or random">
                        <div class="form-text">Reproducibility seed.</div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-3">
                        <label class="form-label small fw-semibold">Resume Behaviour</label>
                        <select class="form-select form-select-sm" id="resume" name="resume">
                            <option value="no" {% if saved.get('resume','no')=='no' %}selected{% endif %}>Start fresh</option>
                            <option value="auto" {% if saved.get('resume')=='auto' %}selected{% endif %}>Auto-resume latest</option>
                        </select>
                        <div class="form-text">How to handle existing results files.</div>
                    </div>
                    <div class="col-12 col-sm-6 col-lg-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. run-1">
                        <div class="form-text">Appended to results filename.</div>
                    </div>
                </div>
            </div>
        </div>

        {# ================================================================
           EXECUTION
        ================================================================ #}
        <div class="card spikee-card mb-3">
            <div class="card-header py-2 px-3 small fw-semibold">Execution</div>
            <div class="card-body py-3 px-3">
                <div class="row g-3">
                    <div class="col-6 col-sm-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="64" value="{{ saved.get('threads', '4') }}">
                        <div class="form-text">Parallel workers.</div>
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label small fw-semibold" for="attempts">Attempts</label>
                        <input type="number" class="form-control form-control-sm"
                               id="attempts" name="attempts" min="1" max="100" value="{{ saved.get('attempts', '1') }}">
                        <div class="form-text">Per-entry attempts.</div>
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label small fw-semibold" for="max_retries">Max Retries</label>
                        <input type="number" class="form-control form-control-sm"
                               id="max_retries" name="max_retries" min="0" max="20" value="{{ saved.get('max_retries', '3') }}">
                        <div class="form-text">On API errors.</div>
                    </div>
                    <div class="col-6 col-sm-3">
                        <label class="form-label small fw-semibold" for="throttle">Throttle (s)</label>
                        <input type="number" class="form-control form-control-sm"
                               id="throttle" name="throttle" min="0" step="0.1" value="{{ saved.get('throttle', '0') }}">
                        <div class="form-text">Delay between requests.</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="card spikee-card mb-3">
            <div class="card-header py-2 px-3 small fw-semibold">
                Attack <span class="fw-normal text-muted">(optional — runs if standard attempts fail)</span>
            </div>
            <div class="card-body py-3 px-3">
                <div class="row g-3">
                    {# Left col: module picker #}
                    <div class="col-12 col-md-6">
                        <label class="form-label small fw-semibold">Attack Module</label>
                        <input type="hidden" id="attack" name="attack" value="">
                        <div class="border rounded px-2 pt-2 pb-1" id="attack-list"
                             style="max-height:320px;overflow-y:auto"
                             hx-get="/test/partials/attacks-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 attacks…
                            </div>
                        </div>
                        <div class="form-text mt-1">Runs if standard attempts fail.</div>
                    </div>
                    {# Right col: iterations + options + attack only, stacked #}
                    <div class="col-12 col-md-6 d-flex flex-column gap-3" id="af-fields" style="display:none!important">
                        <div>
                            <label class="form-label small fw-semibold" for="attack_iterations">Iterations</label>
                            <input type="number" class="form-control form-control-sm"
                                   id="attack_iterations" name="attack_iterations" min="1"
                                   value="{{ saved.get('attack_iterations', '10') }}">
                            <div class="form-text">Number of attack iterations.</div>
                        </div>
                        <div>
                            <label class="form-label small fw-semibold" for="attack_options">Attack Options</label>
                            <input type="text" class="form-control form-control-sm font-monospace"
                                   id="attack_options" name="attack_options"
                                   value="{{ saved.get('attack_options', '') }}" placeholder="mode=aggressive">
                            <div class="form-text">Key=value options passed to the attack module.</div>
                        </div>
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox"
                                   id="attack_only" name="attack_only"
                                   {% if saved.get('attack_only') %}checked{% endif %}>
                            <label class="form-check-label small" for="attack_only">Attack only — skip standard attempts, run attack directly</label>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        {# ================================================================
           SUBMIT
        ================================================================ #}
        <div class="d-flex gap-2">
            <button type="submit" class="btn btn-spikee px-4">Run Test</button>
            <button type="reset" class="btn btn-outline-secondary"
                    onclick="document.querySelectorAll('.dataset-cb').forEach(cb=>cb.checked=false)">
                Clear
            </button>
            <button type="button" class="btn btn-outline-secondary ms-2" onclick="resetFormDefaults('test')">Reset Defaults</button>
        </div>

    </form>
</div>

<script>
const _savedTarget = {{ saved.get('target', '') | tojson }};
const _savedAttack = {{ saved.get('attack', '') | tojson }};

function toggleAttackFields(val) {
    const el = document.getElementById('af-fields');
    el.style.display = val ? '' : 'none';
}

// Attack picker — event delegation so it works after HTMX swap
document.getElementById('attack-list').addEventListener('click', e => {
    const btn = e.target.closest('.attack-picker-btn');
    if (!btn) return;
    const isActive = btn.classList.contains('btn-secondary');
    document.querySelectorAll('.attack-picker-btn').forEach(b => {
        b.classList.remove('btn-secondary');
        b.classList.add('btn-outline-secondary');
    });
    if (!isActive) {
        btn.classList.remove('btn-outline-secondary');
        btn.classList.add('btn-secondary');
        document.getElementById('attack').value = btn.dataset.attack;
        toggleAttackFields(btn.dataset.attack);
    } else {
        document.getElementById('attack').value = '';
        toggleAttackFields('');
    }
});

// Restore saved target after HTMX loads the targets <select>.
if (_savedTarget) {
    document.getElementById('target').addEventListener('htmx:afterSwap', function _restoreTarget() {
        document.getElementById('target').value = _savedTarget;
        this.removeEventListener('htmx:afterSwap', _restoreTarget);
    });
}

// Restore saved attack module after HTMX loads the attack list.
if (_savedAttack) {
    document.getElementById('attack-list').addEventListener('htmx:afterSwap', function _restoreAttack() {
        const btn = document.querySelector(`.attack-picker-btn[data-attack="${_savedAttack}"]`);
        if (btn) {
            btn.classList.remove('btn-outline-secondary');
            btn.classList.add('btn-secondary');
            document.getElementById('attack').value = _savedAttack;
            toggleAttackFields(_savedAttack);
        }
        this.removeEventListener('htmx:afterSwap', _restoreAttack);
    });
}

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

function toggleAllDatasets(state) {
    document.querySelectorAll('.dataset-cb').forEach(cb => cb.checked = state);
}
</script>
{% endblock %}