{% extends "base.html" %}

{% block title %}Run Plan - {{ run_id[:16] }}{% endblock %}

{% block head %}
<script src="https://unpkg.com/cytoscape@3.25.0/dist/cytoscape.min.js"></script>
{% endblock %}

{% block content %}
<div class="mb-6">
    <a href="/runs/{{ run_id }}/detail" class="inline-flex items-center text-blue-400 hover:text-blue-300">
        <svg class="w-4 h-4 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7"/>
        </svg>
        Back to Run
    </a>
</div>

<h1 class="text-2xl font-bold text-white mb-6">Execution Plan</h1>

{% if plan %}
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
    <!-- DAG Visualization -->
    <div class="bg-gray-800 rounded-lg p-4">
        <h2 class="text-lg font-semibold text-white mb-4">DAG Visualization</h2>
        <div id="dag-container" class="w-full h-96 bg-gray-900 rounded"></div>
    </div>

    <!-- Steps List -->
    <div class="bg-gray-800 rounded-lg p-4">
        <h2 class="text-lg font-semibold text-white mb-4">Steps ({{ plan.steps|length if plan.steps else 0 }})</h2>
        <div class="space-y-3 max-h-96 overflow-y-auto">
            {% for step in plan.get('steps', []) %}
            <div class="bg-gray-900 rounded-lg p-3">
                <div class="flex items-center justify-between mb-2">
                    <span class="font-medium text-white">{{ step.name or step.id or 'Step ' ~ loop.index }}</span>
                    <span class="px-2 py-0.5 text-xs rounded {% if step.status == 'completed' %}bg-green-600{% elif step.cached %}bg-blue-600{% else %}bg-gray-600{% endif %}">
                        {{ step.status or ('cached' if step.cached else 'pending') }}
                    </span>
                </div>
                {% if step.cache_id %}
                <div class="text-xs text-gray-400 font-mono truncate">
                    {{ step.cache_id[:24] }}...
                </div>
                {% endif %}
            </div>
            {% else %}
            <p class="text-gray-500">No steps defined</p>
            {% endfor %}
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const elements = {{ dag_elements | tojson | safe }};

    if (elements.length > 0) {
        cytoscape({
            container: document.getElementById('dag-container'),
            elements: elements,
            style: [
                {
                    selector: 'node',
                    style: {
                        'background-color': 'data(color)',
                        'label': 'data(label)',
                        'color': '#fff',
                        'text-valign': 'bottom',
                        'text-margin-y': 5,
                        'font-size': '10px'
                    }
                },
                {
                    selector: 'edge',
                    style: {
                        'width': 2,
                        'line-color': '#6b7280',
                        'target-arrow-color': '#6b7280',
                        'target-arrow-shape': 'triangle',
                        'curve-style': 'bezier'
                    }
                }
            ],
            layout: {
                name: 'breadthfirst',
                directed: true,
                padding: 20
            }
        });
    }
});
</script>
{% else %}
<div class="bg-gray-800 rounded-lg p-6 text-center">
    <p class="text-gray-400">No execution plan available for this run.</p>
</div>
{% endif %}
{% endblock %}