{% extends "base.html" %}

{% macro stage_header(number, anchor, name, description) %}
<div class="flex items-center gap-3 mb-1 pt-2" id="{{ anchor }}">
    <span class="font-mono text-xs px-2 py-px border border-forge-ember/60 text-forge-ember rounded bg-forge-surface2">{{ number }}</span>
    <h2 class="text-2xl font-semibold tracking-tight">{{ name }}</h2>
</div>
<p class="text-sm text-forge-muted mb-4 max-w-2xl">{{ description }}</p>
{% endmacro %}

{% block content %}
<div class="pb-16">

    <div class="mb-10">
        <h1 class="text-3xl font-medium tracking-tight">The governed agent lifecycle, on one page.</h1>
        <p class="text-sm text-forge-muted mt-2 max-w-2xl">
            Six stages, top to bottom. Every action below is a click — run the demo incident,
            approve it, train the draft candidate, evaluate it, and promote it to active.
            Each panel refreshes itself after every action.
        </p>
    </div>

    <!-- ============================ 01 DEFINE ============================ -->
    {{ stage_header("01", "define", "Define",
       "Agents and the guardrail policies they run under — all versioned YAML.
        The draft version below is the candidate that the rest of this page trains,
        evaluates, and promotes.") }}

    <div id="agents-panel"
         hx-get="/fragments/agents"
         hx-trigger="forja-refresh from:body"
         hx-swap="innerHTML">
        {% include "_agents.html" %}
    </div>

    <!-- ============================ 02 RUN =============================== -->
    <div class="mt-12"></div>
    {{ stage_header("02", "run", "Run",
       "Execute the active agent through the governed pipeline: input guardrails →
        LLM → output guardrails → proposed actions → approval gate. The demo incident
        proposes a risk-5 action, so the run pauses for human approval in stage 03.") }}

    <div class="forge-card border border-forge-iron rounded-2xl p-6">
        <div class="flex flex-wrap items-center gap-3 mb-5 pb-5 border-b border-forge-iron">
            <button
                hx-post="/run"
                hx-vals='{"agent_name": "incident_analyzer", "input": "{{ demo_input }}"}'
                hx-target="#run-result"
                hx-swap="innerHTML"
                hx-on::after-request="htmx.trigger(document.body, 'forja-refresh')"
                class="px-5 py-2.5 bg-forge-ember text-black font-semibold rounded-lg text-sm hover:brightness-105 active:scale-[0.985] transition">
                ▶ Run demo incident
                <span class="htmx-indicator">⋯</span>
            </button>
            <span class="text-xs text-forge-muted">One click — sends a replicated HSS capacity alarm and pauses at the approval gate.</span>
        </div>

        <form hx-post="/run" hx-target="#run-result" hx-swap="innerHTML"
              hx-on::after-request="htmx.trigger(document.body, 'forja-refresh')"
              class="space-y-4">
            <div class="grid grid-cols-1 sm:grid-cols-2 gap-4">
                <div>
                    <label class="block text-xs tracking-widest text-forge-muted mb-1.5 uppercase">Agent</label>
                    <select name="agent_name" id="agent-select"
                            class="w-full bg-black/50 border border-forge-iron rounded-lg px-3 py-2.5 text-sm focus:border-forge-ember outline-none">
                        {% for a in agents %}
                        <option value="{{ a.name }}"
                                data-label="{{ a.input_label or 'Input' }}"
                                data-placeholder="{{ a.input_placeholder or '' }}">
                            {{ a.name }} (v{{ a.version }})
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div>
                    <label id="input-label" class="block text-xs tracking-widest text-forge-muted mb-1.5 uppercase">Input</label>
                    <textarea name="input" id="input-text" rows="3"
                              class="w-full bg-black/50 border border-forge-iron rounded-lg px-3 py-2 font-mono text-sm focus:border-forge-ember outline-none"></textarea>
                </div>
            </div>
            <button type="submit"
                    class="px-5 py-2 bg-forge-surface2 border border-forge-iron hover:border-forge-ember rounded-lg text-sm transition">
                Run with custom input
                <span class="htmx-indicator">⋯</span>
            </button>
        </form>
    </div>

    <div id="run-result" class="mt-4"></div>

    <!-- ============================ 03 APPROVE =========================== -->
    <div class="mt-12"></div>
    {{ stage_header("03", "approve", "Approve",
       "Runs paused by the approval gate (HITL). The state lives in a checkpoint on
        disk, so it survives restarts. Approving resumes the graph exactly where it
        stopped; the completed run lands in stage 06.") }}

    <div id="approvals-panel"
         hx-get="/fragments/approvals"
         hx-trigger="forja-refresh from:body"
         hx-swap="innerHTML">
        {% include "_approvals.html" %}
    </div>

    <!-- ============================ 04 TRAIN ============================= -->
    <div class="mt-12"></div>
    {{ stage_header("04", "train", "Train & evaluate",
       "Submit a fine-tuning job for the draft candidate to the configured MLOps
        backend, then evaluate it over the agent's canonical scenarios through the
        full governed runtime. A passing evaluation unlocks promotion.") }}

    <div class="forge-card border border-forge-iron rounded-2xl p-6 mb-4">
        <form hx-post="/api/training/runs"
              hx-ext="json-enc"
              hx-swap="none"
              hx-on::after-request="htmx.trigger(document.body, 'forja-refresh');
                                    this.querySelector('.form-error').textContent =
                                        event.detail.successful ? '' : 'Request failed: ' + event.detail.xhr.responseText.slice(0, 200)"
              class="grid grid-cols-2 sm:grid-cols-4 gap-4 items-end">
            <div>
                <label class="block text-xs tracking-widest text-forge-muted mb-1.5 uppercase">Dataset</label>
                <select name="dataset_name" class="w-full bg-black/50 border border-forge-iron rounded-lg px-3 py-2 text-sm focus:border-forge-ember outline-none">
                    {% for d in datasets %}
                    <option value="{{ d.name }}">{{ d.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-xs tracking-widest text-forge-muted mb-1.5 uppercase">Base model</label>
                <select name="model_name" class="w-full bg-black/50 border border-forge-iron rounded-lg px-3 py-2 text-sm focus:border-forge-ember outline-none">
                    {% for m in models %}
                    <option value="{{ m.name }}">{{ m.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-xs tracking-widest text-forge-muted mb-1.5 uppercase">Agent</label>
                <select name="agent_name" id="train-agent-select"
                        class="w-full bg-black/50 border border-forge-iron rounded-lg px-3 py-2 text-sm focus:border-forge-ember outline-none">
                    {% for card in agent_cards %}
                    {% set draft = card.versions | selectattr('state', 'equalto', 'draft') | map(attribute='id') | first %}
                    <option value="{{ card.agent.name }}" data-draft="{{ draft or '' }}">{{ card.agent.name }}</option>
                    {% endfor %}
                </select>
            </div>
            <div>
                <label class="block text-xs tracking-widest text-forge-muted mb-1.5 uppercase">Candidate version</label>
                <input name="agent_version" id="candidate-version" type="text"
                       class="w-full bg-black/50 border border-forge-iron rounded-lg px-3 py-2 text-sm font-mono focus:border-forge-ember outline-none">
            </div>
            <div class="col-span-2 sm:col-span-4 flex items-center gap-4">
                <button type="submit"
                        class="px-5 py-2 bg-forge-ember text-black font-semibold rounded-lg text-sm hover:brightness-105 active:scale-[0.985] transition">
                    Submit training run
                </button>
                <span class="text-xs text-forge-muted">backend: <span class="font-mono">{{ backend }}</span> — the mock backend completes instantly.</span>
                <span class="form-error text-xs text-red-400"></span>
            </div>
        </form>
    </div>

    <div id="training-panel"
         hx-get="/fragments/training"
         hx-trigger="forja-refresh from:body"
         hx-swap="innerHTML">
        {% include "_training.html" %}
    </div>

    <!-- ============================ 05 PROMOTE =========================== -->
    <div class="mt-12"></div>
    {{ stage_header("05", "promote", "Promote",
       "Governance queue. A promotion requires a succeeded training run and a passing
        evaluation of the exact candidate version. Approving flips the candidate to
        active in the registry — check stage 01 after approving.") }}

    <div id="promotions-panel"
         hx-get="/fragments/promotions"
         hx-trigger="forja-refresh from:body"
         hx-swap="innerHTML">
        {% include "_promotions.html" %}
    </div>

    <!-- ============================ 06 AUDIT ============================= -->
    <div class="mt-12"></div>
    {{ stage_header("06", "audit", "Audit",
       "Completed runs, persisted append-only with their full decision trail,
        violations, and approved actions.") }}

    <div id="history-panel"
         hx-get="/fragments/history"
         hx-trigger="forja-refresh from:body"
         hx-swap="innerHTML">
        {% include "_history.html" %}
    </div>

</div>

<script>
    /* Run form: apply the selected agent's input label and placeholder (from its YAML). */
    const agentSelect = document.getElementById("agent-select");
    const inputLabel = document.getElementById("input-label");
    const inputText = document.getElementById("input-text");
    function syncAgentHints() {
        const opt = agentSelect.selectedOptions[0];
        if (!opt) return;
        inputLabel.textContent = opt.dataset.label || "Input";
        inputText.placeholder = opt.dataset.placeholder || "";
    }
    agentSelect.addEventListener("change", syncAgentHints);
    syncAgentHints();

    /* Train form: prefill the candidate version with the agent's first draft version. */
    const trainAgentSelect = document.getElementById("train-agent-select");
    const candidateVersion = document.getElementById("candidate-version");
    function syncCandidateVersion() {
        const opt = trainAgentSelect.selectedOptions[0];
        if (!opt) return;
        candidateVersion.value = opt.dataset.draft || "";
    }
    trainAgentSelect.addEventListener("change", syncCandidateVersion);
    syncCandidateVersion();
</script>
{% endblock %}