{% extends "base.html" %}

{% block title %}{{ recipe.name }} - Recipe - Art-DAG L1{% endblock %}

{% block head %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>
{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <!-- Header -->
    <div class="flex items-center space-x-4 mb-6">
        <a href="/recipes" class="text-gray-400 hover:text-white">&larr; Recipes</a>
        <h1 class="text-2xl font-bold">{{ recipe.name }}</h1>
        {% if recipe.version %}
        <span class="text-gray-500">v{{ recipe.version }}</span>
        {% endif %}
    </div>

    {% if recipe.description %}
    <p class="text-gray-400 mb-6">{{ recipe.description }}</p>
    {% endif %}

    <!-- DAG Visualization -->
    <div class="bg-gray-800 rounded-lg border border-gray-700 mb-6">
        <div class="border-b border-gray-700 px-4 py-2 flex items-center justify-between">
            <span class="text-gray-400 text-sm">Pipeline DAG</span>
            <span class="text-gray-500 text-sm">{{ recipe.steps | length }} steps</span>
        </div>
        <div id="dag-container" class="h-80"></div>
    </div>

    <!-- Steps -->
    <h2 class="text-lg font-semibold mb-4">Steps</h2>
    <div class="space-y-3 mb-8">
        {% for step in recipe.steps %}
        {% set colors = {
            'effect': 'blue',
            'analyze': 'purple',
            'transform': 'green',
            'combine': 'orange',
            'output': 'cyan'
        } %}
        {% set color = colors.get(step.type, 'gray') %}

        <div class="bg-gray-800 rounded-lg p-4 border border-gray-700">
            <div class="flex items-center justify-between mb-2">
                <div class="flex items-center space-x-3">
                    <span class="w-8 h-8 rounded bg-{{ color }}-900 text-{{ color }}-300 flex items-center justify-center font-mono text-sm">
                        {{ loop.index }}
                    </span>
                    <span class="font-medium">{{ step.name }}</span>
                    <span class="bg-{{ color }}-900 text-{{ color }}-300 px-2 py-0.5 rounded text-xs">
                        {{ step.type }}
                    </span>
                </div>
            </div>

            {% if step.inputs %}
            <div class="text-sm text-gray-400 mb-1">
                Inputs: {{ step.inputs | join(', ') }}
            </div>
            {% endif %}

            {% if step.params %}
            <div class="mt-2 bg-gray-900 rounded p-2">
                <code class="text-xs text-gray-400">{{ step.params | tojson }}</code>
            </div>
            {% endif %}
        </div>
        {% endfor %}
    </div>

    <!-- YAML Source -->
    <h2 class="text-lg font-semibold mb-4">Source</h2>
    <div class="bg-gray-900 rounded-lg p-4 border border-gray-700">
        <pre class="text-sm text-gray-300 overflow-x-auto whitespace-pre-wrap">{{ recipe.yaml }}</pre>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    const cy = cytoscape({
        container: document.getElementById('dag-container'),
        style: [
            { selector: 'node', style: {
                'label': 'data(label)',
                'background-color': 'data(color)',
                'color': '#fff',
                'text-valign': 'center',
                'text-halign': 'center',
                'font-size': '11px',
                'width': 'label',
                'height': 35,
                'padding': '10px',
                'shape': 'round-rectangle'
            }},
            { selector: 'edge', style: {
                'width': 2,
                'line-color': '#4b5563',
                'target-arrow-color': '#4b5563',
                'target-arrow-shape': 'triangle',
                'curve-style': 'bezier'
            }}
        ],
        elements: {{ dag_elements | tojson }},
        layout: { name: 'dagre', rankDir: 'LR', padding: 30 }
    });
});
</script>
{% endblock %}