{% from "partials/guidance_block.html" import render_guidance_block %}

<div id="chain-panel" class="space-y-4">
    <div class="flex justify-between items-center mb-2">
        <h3 class="text-sm font-semibold uppercase tracking-wider text-base-content/50">
            Chain Executions
        </h3>
        <button type="button" class="btn btn-outline btn-secondary btn-xs"
                hx-get="/api/chain/executions" hx-target="#chain-panel" hx-swap="outerHTML">
            Refresh
        </button>
    </div>

    {% if executions is defined %}
    <div id="chain-execution-list">
        {% if executions %}
        <table class="table table-xs w-full">
            <thead>
                <tr>
                    <th>Chain</th>
                    <th>Mode</th>
                    <th>Result</th>
                    <th>Boundaries</th>
                    <th>Date</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                {% for e in executions %}
                <tr>
                    <td class="text-xs truncate max-w-[200px]">{{ e.chain_name or e.chain_id }}</td>
                    <td><span class="badge badge-ghost badge-xs">{{ 'dry-run' if e.dry_run else 'live' }}</span></td>
                    <td>
                        {% if e.success %}
                        <span class="badge badge-success badge-xs">SUCCESS</span>
                        {% else %}
                        <span class="badge badge-error badge-xs">FAILED</span>
                        {% endif %}
                    </td>
                    <td class="text-xs">{{ e.trust_boundaries or '—' }}</td>
                    <td class="text-xs">{{ e.created_at[:19] if e.created_at else '—' }}</td>
                    <td>
                        <button class="btn btn-outline btn-secondary btn-xs"
                                hx-get="/api/chain/executions/{{ e.run_id }}"
                                hx-target="#chain-panel" hx-swap="outerHTML">
                            View
                        </button>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <div class="text-sm text-base-content/40">
            No chain executions yet. Run <code>qai chain run</code> to execute an attack chain.
        </div>
        {% endif %}
    </div>
    {% endif %}

    {% if execution_detail is defined %}
    <div class="bg-base-200 rounded-lg p-3 text-sm space-y-1">
        <div><strong>Chain:</strong> {{ execution_detail.chain_name or execution_detail.chain_id }}</div>
        <div><strong>Mode:</strong> {{ 'Dry Run' if execution_detail.dry_run else 'Live' }}</div>
        <div><strong>Result:</strong> {{ 'Success' if execution_detail.success else 'Failed' }}</div>
        <div><strong>Trust Boundaries:</strong> {{ execution_detail.trust_boundaries or '—' }}</div>
    </div>
    {% if step_outputs %}
    <div class="overflow-y-auto max-h-[500px]">
        <table class="table table-xs w-full">
            <thead><tr><th>Step</th><th>Module</th><th>Technique</th><th>Status</th><th></th></tr></thead>
            <tbody>
                {% for s in step_outputs %}
                <tr class="hover:bg-base-300/30 cursor-pointer"
                    onclick="toggleChainStepDetail('{{ loop.index }}')">
                    <td>{{ s.step_id }}</td>
                    <td>{{ s.module }}</td>
                    <td>{{ s.technique }}</td>
                    <td>
                        {% if s.success %}
                        <span class="badge badge-success badge-xs">OK</span>
                        {% else %}
                        <span class="badge badge-error badge-xs">FAIL</span>
                        {% endif %}
                    </td>
                    <td>
                        <span class="text-xs cursor-pointer select-none"
                              style="color: #a78bfa;"
                              onclick="event.stopPropagation(); toggleChainStepDetail('{{ loop.index }}')">
                            Details <span id="chain-step-arrow-{{ loop.index }}" style="color: #fff;">&#x25BC;</span>
                        </span>
                    </td>
                </tr>
                <tr id="chain-step-detail-{{ loop.index }}" class="hidden">
                    <td colspan="5" class="p-0">
                        <div class="p-4 bg-base-300/20 space-y-3 text-sm">
                            {% if s.error %}
                            <div>
                                <span class="font-semibold text-base-content/60 text-xs">Error</span>
                                <p class="mt-1 text-xs text-error">{{ s.error }}</p>
                            </div>
                            {% endif %}
                            {% if s.guidance %}
                            {% for block in s.guidance.blocks %}
                                {{ render_guidance_block(block) }}
                            {% endfor %}
                            {% elif not s.error %}
                            <p class="text-xs text-base-content/40 italic">No guidance data for this step.</p>
                            {% endif %}
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    <script>
    function toggleChainStepDetail(idx) {
        var detail = document.getElementById('chain-step-detail-' + idx);
        var arrow = document.getElementById('chain-step-arrow-' + idx);
        detail.classList.toggle('hidden');
        arrow.textContent = detail.classList.contains('hidden') ? '\u25BC' : '\u25B2';
    }
    </script>
    {% endif %}
    {% endif %}
</div>