{% extends "base.html" %}
{% block title %}q-ai — Launcher{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto px-6 py-12 launcher-centered">
    <div class="text-center mb-10">
        <h1 class="text-3xl font-bold mb-2">What do you want to test?</h1>
        <p class="text-base-content/50">
            Select a workflow to begin. Each combines multiple modules into a guided assessment.
        </p>
    </div>

    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for wf in workflows %}
        <div class="card workflow-card cursor-pointer"
             onclick="openWorkflowModal('{{ wf.id }}')">
            <div class="card-body p-6">
                <h3 class="card-title text-base">{{ wf.name }}</h3>
                <p class="text-sm text-base-content/60 mb-3">{{ wf.description }}</p>
                <div class="flex flex-wrap gap-1.5">
                    {% for mod in wf.modules %}
                    <span class="badge badge-sm badge-outline badge-secondary font-semibold uppercase tracking-wider text-[0.65rem] module-pill">
                        {{ mod }}
                    </span>
                    {% endfor %}
                </div>
            </div>
        </div>

        <dialog id="modal-{{ wf.id }}" class="modal">
            <div class="modal-box">
                {% if wf.implemented %}
                <h3 class="text-lg font-bold mb-4">{{ wf.name }}</h3>
                {% if wf.requires_provider and providers|length == 0 %}
                <div class="alert alert-warning mb-4">
                    <svg xmlns="http://www.w3.org/2000/svg" class="stroke-current shrink-0 h-5 w-5" fill="none" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-2.5L13.732 4c-.77-.833-1.964-.833-2.732 0L4.082 16.5c-.77.833.192 2.5 1.732 2.5z" />
                    </svg>
                    <div>
                        <p class="text-sm">This workflow requires an LLM provider.</p>
                        <a href="/settings#providers" class="link link-primary text-sm">Configure one now</a>
                    </div>
                </div>
                {% elif not wf.requires_provider or providers|length > 0 %}
                <form id="form-{{ wf.id }}" class="space-y-4" onsubmit="return launchWorkflow(event, '{{ wf.id }}')">
                    <input type="hidden" name="workflow_id" value="{{ wf.id }}" />

                    {% if wf.id == 'assess' %}
                    {# ---- ASSESS FORM ---- #}
                    <div class="form-control">
                        <label class="label"><span class="label-text">Target name</span></label>
                        <input type="text" name="target_name" required
                               placeholder="my-mcp-server"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Transport</span></label>
                        <div class="flex gap-4">
                            <label class="label cursor-pointer gap-2">
                                <input type="radio" name="transport" value="stdio"
                                       class="radio radio-sm radio-primary"
                                       checked onchange="toggleTransport('{{ wf.id }}')" />
                                <span class="label-text">stdio</span>
                            </label>
                            <label class="label cursor-pointer gap-2">
                                <input type="radio" name="transport" value="sse"
                                       class="radio radio-sm radio-primary"
                                       onchange="toggleTransport('{{ wf.id }}')" />
                                <span class="label-text">sse</span>
                            </label>
                            <label class="label cursor-pointer gap-2">
                                <input type="radio" name="transport" value="streamable-http"
                                       class="radio radio-sm radio-primary"
                                       onchange="toggleTransport('{{ wf.id }}')" />
                                <span class="label-text">streamable-http</span>
                            </label>
                        </div>
                    </div>

                    <div id="cmd-{{ wf.id }}" class="form-control">
                        <label class="label"><span class="label-text">Command</span></label>
                        <input type="text" name="command"
                               placeholder="npx @modelcontextprotocol/server-everything"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div id="url-{{ wf.id }}" class="form-control hidden">
                        <label class="label"><span class="label-text">URL</span></label>
                        <input type="text" name="url"
                               placeholder="http://localhost:3000/sse"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Model</span></label>
                        <select name="model" class="select select-bordered select-sm w-full">
                            {% for p in providers %}
                            <option value="{{ p.name }}/default">{{ p.name }}/default</option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Rounds</span></label>
                        <input type="number" name="rounds" value="1" min="1" max="10"
                               class="input input-bordered input-sm w-24" />
                    </div>

                    {% elif wf.id == 'test_docs' %}
                    {# ---- TEST DOCS FORM ---- #}
                    <div class="form-control">
                        <label class="label"><span class="label-text">Target name</span></label>
                        <input type="text" name="target_name" required
                               placeholder="doc-pipeline"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Callback URL</span></label>
                        <input type="text" name="callback_url" required
                               value="{{ defaults.ipi_callback_url }}"
                               placeholder="https://your-listener.example.com/callback"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Format</span></label>
                        <select name="format" class="select select-bordered select-sm w-full">
                            <option value="pdf">pdf</option>
                            <option value="markdown">markdown</option>
                            <option value="html">html</option>
                            <option value="docx">docx</option>
                            <option value="ics">ics</option>
                            <option value="eml">eml</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Payload style</span></label>
                        <select name="payload_style" class="select select-bordered select-sm w-full">
                            <option value="obvious">obvious</option>
                            <option value="subtle">subtle</option>
                            <option value="invisible">invisible</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Payload type</span></label>
                        <select name="payload_type" class="select select-bordered select-sm w-full">
                            <option value="callback">callback</option>
                            <option value="exfil">exfil</option>
                        </select>
                    </div>

                    {% if not rxp_available %}
                    <div class="alert alert-warning text-sm mb-4">
                        <span>RXP pre-validation requires additional dependencies.</span>
                        <code class="ml-2">pip install "q-uestionable-ai[rxp]"</code>
                    </div>
                    {% endif %}
                    <div class="form-control">
                        <label class="label cursor-pointer">
                            <span class="label-text">Pre-validate retrieval rank with RXP</span>
                            <input type="checkbox" name="rxp_enabled" value="true"
                                   class="toggle toggle-sm"
                                   onchange="toggleRxpSection('{{ wf.id }}')"
                                   {% if not rxp_available %}disabled{% endif %} />
                        </label>
                    </div>

                    <div id="rxp-section-{{ wf.id }}" class="space-y-4 hidden">
                        <div class="form-control">
                            <label class="label"><span class="label-text">Embedding model</span></label>
                            <input type="text" name="rxp_model_id"
                                   placeholder="all-MiniLM-L6-v2"
                                   class="input input-bordered input-sm w-full" />
                        </div>
                        <div class="form-control">
                            <label class="label"><span class="label-text">Profile</span></label>
                            <input type="text" name="rxp_profile_id"
                                   placeholder="leave blank for custom"
                                   class="input input-bordered input-sm w-full" />
                        </div>
                    </div>

                    {% elif wf.id == 'test_assistant' %}
                    {# ---- TEST ASSISTANT FORM ---- #}
                    <div class="form-control">
                        <label class="label"><span class="label-text">Target name</span></label>
                        <input type="text" name="target_name" required
                               placeholder="coding-assistant"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Format</span></label>
                        <select name="format_id" class="select select-bordered select-sm w-full">
                            <option value="python">python</option>
                            <option value="javascript">javascript</option>
                            <option value="typescript">typescript</option>
                            <option value="go">go</option>
                            <option value="rust">rust</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Repo name (optional)</span></label>
                        <input type="text" name="repo_name"
                               placeholder="cxp-python"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    {% elif wf.id == 'trace_path' %}
                    {# ---- TRACE PATH FORM ---- #}
                    <div class="form-control">
                        <label class="label"><span class="label-text">Target name</span></label>
                        <input type="text" name="target_name" required
                               placeholder="target-server"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Chain template</span></label>
                        <select name="chain_template_id" class="select select-bordered select-sm w-full">
                            <option value="">Select a template...</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Transport</span></label>
                        <div class="flex gap-4">
                            <label class="label cursor-pointer gap-2">
                                <input type="radio" name="transport" value="stdio"
                                       class="radio radio-sm radio-primary"
                                       checked onchange="toggleTransport('{{ wf.id }}')" />
                                <span class="label-text">stdio</span>
                            </label>
                            <label class="label cursor-pointer gap-2">
                                <input type="radio" name="transport" value="sse"
                                       class="radio radio-sm radio-primary"
                                       onchange="toggleTransport('{{ wf.id }}')" />
                                <span class="label-text">sse</span>
                            </label>
                            <label class="label cursor-pointer gap-2">
                                <input type="radio" name="transport" value="streamable-http"
                                       class="radio radio-sm radio-primary"
                                       onchange="toggleTransport('{{ wf.id }}')" />
                                <span class="label-text">streamable-http</span>
                            </label>
                        </div>
                    </div>

                    <div id="cmd-{{ wf.id }}" class="form-control">
                        <label class="label"><span class="label-text">Command</span></label>
                        <input type="text" name="command"
                               placeholder="npx @modelcontextprotocol/server-everything"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div id="url-{{ wf.id }}" class="form-control hidden">
                        <label class="label"><span class="label-text">URL</span></label>
                        <input type="text" name="url"
                               placeholder="http://localhost:3000/sse"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">Model</span></label>
                        <select name="model" class="select select-bordered select-sm w-full">
                            {% for p in providers %}
                            <option value="{{ p.name }}/default">{{ p.name }}/default</option>
                            {% endfor %}
                        </select>
                    </div>

                    {% elif wf.id == 'blast_radius' %}
                    {# ---- BLAST RADIUS FORM ---- #}
                    <div class="form-control">
                        <label class="label"><span class="label-text">Chain execution</span></label>
                        <select name="chain_execution_id" class="select select-bordered select-sm w-full">
                            <option value="">Select an execution...</option>
                        </select>
                    </div>
                    <div id="blast-radius-gate-{{ wf.id }}" class="alert alert-warning text-sm hidden">
                        <span>No successful chain executions found. Run Trace an Attack Path first.</span>
                    </div>

                    {% endif %}

                    <div id="error-{{ wf.id }}" class="text-error text-sm hidden"></div>

                    <div class="modal-action">
                        <button type="submit" class="btn btn-primary btn-sm">Launch</button>
                        <button type="button" class="btn btn-sm"
                                onclick="document.getElementById('modal-{{ wf.id }}').close()">Cancel</button>
                    </div>
                </form>
                {% endif %}
                {% else %}
                <h3 class="text-lg font-bold">Coming Soon</h3>
                <p class="py-4 text-base-content/70">
                    This workflow is not yet implemented.
                </p>
                <div class="modal-action">
                    <form method="dialog">
                        <button class="btn btn-primary btn-sm">Close</button>
                    </form>
                </div>
                {% endif %}
            </div>
            <form method="dialog" class="modal-backdrop">
                <button>close</button>
            </form>
        </dialog>
        {% endfor %}
    </div>
</div>

<script>
function toggleTransport(wfId) {
    const form = document.getElementById('form-' + wfId);
    const val = form.querySelector('input[name="transport"]:checked').value;
    const cmd = document.getElementById('cmd-' + wfId);
    const url = document.getElementById('url-' + wfId);
    cmd.classList.toggle('hidden', val !== 'stdio');
    url.classList.toggle('hidden', val === 'stdio');
}

function toggleRxpSection(wfId) {
    const form = document.getElementById('form-' + wfId);
    const cb = form.querySelector('input[name="rxp_enabled"]');
    const section = document.getElementById('rxp-section-' + wfId);
    section.classList.toggle('hidden', !cb.checked);
}

async function loadChainTemplates(wfId) {
    const sel = document.querySelector('#modal-' + wfId + ' select[name="chain_template_id"]');
    if (!sel || sel.options.length > 1) return;
    try {
        const resp = await fetch('/api/chain/templates');
        const data = await resp.json();
        data.templates.forEach(function(t) {
            const opt = document.createElement('option');
            opt.value = t.id;
            opt.textContent = t.name + ' (' + t.category + ')';
            sel.appendChild(opt);
        });
    } catch (err) { /* silently fail */ }
}

async function loadChainExecutions(wfId) {
    const sel = document.querySelector('#modal-' + wfId + ' select[name="chain_execution_id"]');
    if (!sel || sel.options.length > 1) return;
    try {
        const resp = await fetch('/api/chain/executions/recent');
        const data = await resp.json();
        data.executions.forEach(function(e) {
            const opt = document.createElement('option');
            opt.value = e.id;
            opt.textContent = e.chain_name + ' \u2014 ' + e.created_at;
            sel.appendChild(opt);
        });
        if (data.executions.length === 0) {
            const gate = document.getElementById('blast-radius-gate-' + wfId);
            if (gate) gate.classList.remove('hidden');
        }
    } catch (err) { /* silently fail */ }
}

function openWorkflowModal(wfId) {
    if (wfId === 'trace_path') loadChainTemplates(wfId);
    if (wfId === 'blast_radius') loadChainExecutions(wfId);
    document.getElementById('modal-' + wfId).showModal();
}

async function launchWorkflow(e, wfId) {
    e.preventDefault();
    const form = document.getElementById('form-' + wfId);
    const errEl = document.getElementById('error-' + wfId);
    errEl.classList.add('hidden');
    const data = Object.fromEntries(new FormData(form));
    if (data.rounds) data.rounds = parseInt(data.rounds, 10);
    try {
        const resp = await fetch('/api/workflows/launch', {
            method: 'POST',
            headers: {'Content-Type': 'application/json'},
            body: JSON.stringify(data),
        });
        const result = await resp.json();
        if (resp.ok) { window.location.href = result.redirect; }
        else { errEl.textContent = result.detail || 'Launch failed'; errEl.classList.remove('hidden'); }
    } catch (err) { errEl.textContent = err.message; errEl.classList.remove('hidden'); }
    return false;
}
</script>
{% endblock %}