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

{% block content %}
<style>
    .wf-card {
        background: rgba(255,255,255,0.05);
        border: 1px solid rgba(139, 92, 246, 0.2);
        border-left: 2px solid #06b6d4;
        border-radius: 0.5rem;
        box-shadow: 0 0 16px rgba(139, 92, 246, 0.08);
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
        cursor: pointer;
    }
    .wf-card:hover {
        border-color: rgba(139, 92, 246, 0.4);
        border-left-color: #22d3ee;
        box-shadow: 0 0 24px rgba(139, 92, 246, 0.15), 0 0 40px rgba(6, 182, 212, 0.08);
    }
    .wf-card.wf-disabled {
        opacity: 0.4;
        cursor: default;
    }
    .wf-card.wf-disabled:hover {
        border-color: rgba(139, 92, 246, 0.2);
        border-left-color: #06b6d4;
        box-shadow: 0 0 16px rgba(139, 92, 246, 0.08);
    }
    .wf-modules {
        font-family: 'Fira Code', ui-monospace, monospace;
        font-size: 0.75rem;
        color: #06b6d4;
    }
    .launcher-modal .modal-box {
        background: #0f1219;
        border: 1px solid rgba(139, 92, 246, 0.25);
        box-shadow: 0 0 30px rgba(139, 92, 246, 0.1);
    }
    .launcher-modal .modal-box h3 {
        color: #f1f5f9;
    }
    .launcher-modal label span,
    .launcher-modal .label-text {
        font-family: 'Fira Code', ui-monospace, monospace;
        font-size: 0.75rem;
        color: #94a3b8;
    }
    .launcher-modal select {
        background: #0a0a0f !important;
        color: #f1f5f9 !important;
        border-color: rgba(139, 92, 246, 0.25) !important;
    }
    .launcher-modal select option {
        background: #0a0a0f !important;
        color: #e2e8f0 !important;
    }
    .launcher-modal select:focus {
        border-color: rgba(139, 92, 246, 0.5) !important;
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15) !important;
    }
    .launcher-modal input[type="text"]:focus,
    .launcher-modal input[type="number"]:focus,
    .launcher-modal select:focus {
        border-color: rgba(139, 92, 246, 0.5);
        box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.15);
        outline: none;
    }
    .launcher-modal a:focus {
        outline: none;
    }
    .launcher-modal .btn-launch {
        background: transparent;
        color: #06b6d4;
        border: 1px solid rgba(6, 182, 212, 0.4);
        font-weight: 600;
    }
    .launcher-modal .btn-launch:hover {
        background: rgba(6, 182, 212, 0.1);
        border-color: #22d3ee;
        color: #22d3ee;
    }
    .launcher-modal .btn-cancel {
        background: transparent;
        border: 1px solid rgba(139, 92, 246, 0.3);
        color: #a78bfa;
    }
    .launcher-modal .btn-cancel:hover {
        background: rgba(139, 92, 246, 0.1);
        border-color: #a78bfa;
        color: #c4b5fd;
    }
</style>

<div class="max-w-5xl mx-auto px-6 py-6">

    <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        {% for wf in workflows %}
        <div class="wf-card {% if not wf.implemented %}wf-disabled{% endif %} p-6"
             {% if wf.implemented %}onclick="openWorkflowModal('{{ wf.id }}')"{% endif %}>
            <h3 class="text-base font-semibold mb-1" style="color: #f1f5f9;">{{ wf.name }}</h3>
            <p class="text-sm mb-3" style="color: #94a3b8;">{{ wf.description }}</p>
            <div class="wf-modules">
                {% for mod in wf.modules %}
                <span style="font-family: 'Fira Code', monospace; font-size: 0.7rem; color: #8b5cf6; border: 1px solid rgba(139,92,246,0.4); border-radius: 9999px; padding: 0.1rem 0.55rem; display: inline-block; margin-right: 0.25rem; margin-top: 0.25rem;">{{ mod }}</span>
                {% endfor %}
            </div>
        </div>

        <dialog id="modal-{{ wf.id }}" class="modal launcher-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 style="background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; color: #fbbf24;" class="mb-4">
                    <p class="text-sm">This workflow requires an LLM provider.</p>
                    <a href="/settings#providers" style="color: #06b6d4;" class="text-sm">Configure one now</a>
                </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 style="background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); border-radius: 0.5rem; padding: 0.75rem 1rem; margin-bottom: 1rem; color: #fbbf24;" class="text-sm mb-4">
                        <span>RXP pre-validation requires additional dependencies.</span><br>
                        <code style="color: #06b6d4; margin-top: 0.25rem; display: inline-block;">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 }}" style="background: rgba(245,158,11,0.1); border: 1px solid rgba(245,158,11,0.35); border-radius: 0.5rem; padding: 0.75rem 1rem; color: #fbbf24; display: none;" class="text-sm">
                        <span>No successful chain executions found. Run Trace an Attack Path first.</span>
                    </div>

                    {% elif wf.id == 'generate_report' %}
                    {# ---- GENERATE REPORT FORM ---- #}
                    <div class="form-control">
                        <label class="label"><span class="label-text">Target</span></label>
                        <select name="target_id" class="select select-bordered select-sm w-full">
                            <option value="">Select a target...</option>
                        </select>
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">From date (optional)</span></label>
                        <input type="date" name="from_date"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div class="form-control">
                        <label class="label"><span class="label-text">To date (optional)</span></label>
                        <input type="date" name="to_date"
                               class="input input-bordered input-sm w-full" />
                    </div>

                    <div class="form-control">
                        <label class="label cursor-pointer">
                            <span class="label-text">Include evidence pack</span>
                            <input type="checkbox" name="include_evidence_pack" value="true"
                                   class="toggle toggle-sm" />
                        </label>
                    </div>

                    {% endif %}

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

                    <div class="modal-action">
                        <button type="submit" class="btn btn-sm btn-launch">Launch</button>
                        <button type="button" class="btn btn-sm btn-cancel"
                                onclick="document.getElementById('modal-{{ wf.id }}').close()">Cancel</button>
                    </div>
                </form>
                {% endif %}
                {% else %}
                <h3 class="text-lg font-bold" style="color: #f1f5f9;">Coming Soon</h3>
                <p class="py-4" style="color: #94a3b8;">
                    This workflow is not yet implemented.
                </p>
                <div class="modal-action">
                    <form method="dialog">
                        <button class="btn btn-sm btn-cancel">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.style.display = 'block';
        }
    } catch (err) { /* silently fail */ }
}

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

function openWorkflowModal(wfId) {
    if (wfId === 'trace_path') loadChainTemplates(wfId);
    if (wfId === 'blast_radius') loadChainExecutions(wfId);
    if (wfId === 'generate_report') loadTargets(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);
    if (data.include_evidence_pack) data.include_evidence_pack = true;
    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 %}