{% extends "base.html" %}

{% block title %}Run {{ run.run_id[:12] }} - Art-DAG L1{% endblock %}

{% block head %}
{{ super() }}
<script src="https://cdnjs.cloudflare.com/ajax/libs/cytoscape/3.23.0/cytoscape.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dagre/0.8.5/dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/cytoscape-dagre@2.5.0/cytoscape-dagre.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/hls.js@1.4.12/dist/hls.min.js"></script>
{% endblock %}

{% block content %}
{% set status_colors = {'completed': 'green', 'running': 'blue', 'pending': 'yellow', 'failed': 'red'} %}
{% set color = status_colors.get(run.status, 'gray') %}

<div class="max-w-6xl mx-auto">
    <!-- Header -->
    <div class="flex items-center space-x-4 mb-6">
        <a href="/runs" class="text-gray-400 hover:text-white">&larr; Runs</a>
        <h1 class="text-2xl font-bold font-mono">{{ run.run_id[:16] }}...</h1>
        <span class="bg-{{ color }}-900 text-{{ color }}-300 px-3 py-1 rounded text-sm uppercase">
            {{ run.status }}
        </span>
        {% if run.cached %}
        <span class="bg-purple-900 text-purple-300 px-3 py-1 rounded text-sm">Cached</span>
        {% endif %}
        {% if run.error %}
        <span class="text-red-400 text-sm ml-2">{{ run.error }}</span>
        {% endif %}
        <div class="flex-grow"></div>
        <button hx-post="/runs/{{ run.run_id }}/publish"
                hx-target="#share-result"
                class="bg-purple-600 hover:bg-purple-700 px-3 py-1 rounded text-sm font-medium">
            Share to L2
        </button>
        <span id="share-result"></span>
    </div>

    <!-- Info Grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-6">
        <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-500 text-sm">Recipe</div>
            <div class="text-white font-medium">
                {% if run.recipe %}
                <a href="/recipes/{{ run.recipe }}" class="hover:text-blue-400">
                    {{ run.recipe_name or (run.recipe[:16] ~ '...') }}
                </a>
                {% else %}
                Unknown
                {% endif %}
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-500 text-sm">Steps</div>
            <div class="text-white font-medium">
                {% if run.recipe == 'streaming' %}
                    {% if run.status == 'completed' %}1 / 1{% else %}0 / 1{% endif %}
                {% else %}
                    {{ run.executed or 0 }} / {{ run.total_steps or (plan.steps|length if plan and plan.steps else '?') }}
                {% endif %}
                {% if run.cached_steps %}
                <span class="text-purple-400 text-sm">({{ run.cached_steps }} cached)</span>
                {% endif %}
            </div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-500 text-sm">Created</div>
            <div class="text-white font-medium">{{ run.created_at }}</div>
        </div>
        <div class="bg-gray-800 rounded-lg p-4">
            <div class="text-gray-500 text-sm">User</div>
            <div class="text-white font-medium">{{ run.username or 'Unknown' }}</div>
        </div>
    </div>

    <!-- Live Stream Player (shown during rendering) -->
    {% if run.status == 'rendering' %}
    <div id="live-stream-container" class="mb-6 bg-gray-800 rounded-lg p-4">
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold flex items-center">
                <span class="w-3 h-3 bg-red-500 rounded-full mr-2 animate-pulse"></span>
                Live Preview
            </h3>
            <div id="stream-status" class="text-sm text-gray-400">Connecting...</div>
        </div>
        <div class="relative bg-black rounded-lg overflow-hidden" style="aspect-ratio: 16/9;">
            <video id="live-video" class="w-full h-full" controls autoplay muted playsinline></video>
            <div id="stream-loading" class="absolute inset-0 flex items-center justify-center bg-gray-900/80">
                <div class="text-center">
                    <div class="animate-spin w-8 h-8 border-2 border-blue-500 border-t-transparent rounded-full mx-auto mb-2"></div>
                    <div class="text-gray-400">Waiting for stream...</div>
                </div>
            </div>
        </div>
        <div class="mt-2 text-xs text-gray-500">
            Stream URL: <code class="bg-gray-900 px-1 rounded">/runs/{{ run.run_id }}/hls/stream.m3u8</code>
        </div>
    </div>

    <script>
    (function() {
        const video = document.getElementById('live-video');
        const statusEl = document.getElementById('stream-status');
        const loadingEl = document.getElementById('stream-loading');
        const hlsUrl = '/runs/{{ run.run_id }}/hls/stream.m3u8';
        let hls = null;
        let retryCount = 0;
        const maxRetries = 120;  // Try for up to 4 minutes
        let segmentsLoaded = 0;

        function initHls() {
            if (Hls.isSupported()) {
                hls = new Hls({
                    // Stability over low latency - buffer more for smoother playback
                    liveSyncDurationCount: 4,        // Stay 4 segments behind live edge
                    liveMaxLatencyDurationCount: 8,  // Max 8 segments behind
                    liveDurationInfinity: true,      // Treat as infinite live stream

                    // Large buffers to absorb rendering speed variations
                    maxBufferLength: 60,             // Buffer up to 60s ahead
                    maxMaxBufferLength: 120,         // Allow even more if needed
                    maxBufferSize: 60 * 1024 * 1024, // 60MB buffer
                    maxBufferHole: 0.5,              // Tolerate small gaps

                    // Back buffer for smooth seeking
                    backBufferLength: 30,

                    // Playlist reload settings
                    manifestLoadingTimeOut: 10000,
                    manifestLoadingMaxRetry: 4,
                    levelLoadingTimeOut: 10000,
                    levelLoadingMaxRetry: 4,
                    fragLoadingTimeOut: 20000,
                    fragLoadingMaxRetry: 6,

                    // Start at lowest quality for faster start
                    startLevel: 0,

                    // Enable smooth level switching
                    abrEwmaDefaultEstimate: 500000,
                });

                hls.on(Hls.Events.MANIFEST_PARSED, function(event, data) {
                    loadingEl.classList.add('hidden');
                    statusEl.textContent = 'Buffering...';
                    statusEl.classList.remove('text-gray-400');
                    statusEl.classList.add('text-yellow-400');
                    video.play().catch(() => {});
                });

                hls.on(Hls.Events.FRAG_LOADED, function(event, data) {
                    retryCount = 0;
                    segmentsLoaded++;
                    statusEl.textContent = `Playing (${segmentsLoaded} segments)`;
                    statusEl.classList.remove('text-yellow-400', 'text-gray-400');
                    statusEl.classList.add('text-green-400');
                });

                hls.on(Hls.Events.BUFFER_APPENDED, function() {
                    // Hide loading once we have buffered content
                    loadingEl.classList.add('hidden');
                });

                hls.on(Hls.Events.ERROR, function(event, data) {
                    console.log('HLS error:', data.type, data.details, data.fatal);

                    if (data.fatal) {
                        switch (data.type) {
                            case Hls.ErrorTypes.NETWORK_ERROR:
                                if (retryCount < maxRetries) {
                                    retryCount++;
                                    statusEl.textContent = `Waiting for stream... (${retryCount})`;
                                    statusEl.classList.remove('text-green-400');
                                    statusEl.classList.add('text-yellow-400');
                                    // Exponential backoff with jitter
                                    const delay = Math.min(1000 * Math.pow(1.5, Math.min(retryCount, 6)), 10000);
                                    setTimeout(() => {
                                        hls.loadSource(hlsUrl);
                                    }, delay + Math.random() * 1000);
                                } else {
                                    statusEl.textContent = 'Stream unavailable';
                                    statusEl.classList.add('text-red-400');
                                }
                                break;
                            case Hls.ErrorTypes.MEDIA_ERROR:
                                console.log('Media error, attempting recovery');
                                hls.recoverMediaError();
                                break;
                            default:
                                statusEl.textContent = 'Stream error';
                                statusEl.classList.add('text-red-400');
                                break;
                        }
                    } else {
                        // Non-fatal error - just log it
                        if (data.details === 'bufferStalledError') {
                            statusEl.textContent = 'Buffering...';
                            statusEl.classList.remove('text-green-400');
                            statusEl.classList.add('text-yellow-400');
                        }
                    }
                });

                // Handle video stalls
                video.addEventListener('waiting', function() {
                    statusEl.textContent = 'Buffering...';
                    statusEl.classList.remove('text-green-400');
                    statusEl.classList.add('text-yellow-400');
                });

                video.addEventListener('playing', function() {
                    statusEl.textContent = `Playing (${segmentsLoaded} segments)`;
                    statusEl.classList.remove('text-yellow-400');
                    statusEl.classList.add('text-green-400');
                });

                hls.loadSource(hlsUrl);
                hls.attachMedia(video);
            } else if (video.canPlayType('application/vnd.apple.mpegurl')) {
                // Native HLS support (Safari)
                video.src = hlsUrl;
                video.addEventListener('loadedmetadata', function() {
                    loadingEl.classList.add('hidden');
                    statusEl.textContent = 'Playing';
                    video.play().catch(() => {});
                });
            } else {
                statusEl.textContent = 'HLS not supported';
                statusEl.classList.add('text-red-400');
            }
        }

        // Start trying to connect
        initHls();

        // Cleanup on page unload
        window.addEventListener('beforeunload', function() {
            if (hls) hls.destroy();
        });
    })();
    </script>
    {% endif %}

    <!-- Tabs -->
    <div class="border-b border-gray-700 mb-6">
        <nav class="flex space-x-8">
            <a href="#plan" class="tab-link border-b-2 border-blue-500 text-white pb-3 px-1"
               onclick="showTab('plan')">Plan</a>
            <a href="#artifacts" class="tab-link border-b-2 border-transparent text-gray-400 hover:text-white pb-3 px-1"
               onclick="showTab('artifacts')">Artifacts</a>
            {% if analysis %}
            <a href="#analysis" class="tab-link border-b-2 border-transparent text-gray-400 hover:text-white pb-3 px-1"
               onclick="showTab('analysis')">Analysis</a>
            {% endif %}
            <a href="#inputs" class="tab-link border-b-2 border-transparent text-gray-400 hover:text-white pb-3 px-1"
               onclick="showTab('inputs')">Inputs</a>
        </nav>
    </div>

    <!-- Plan Tab -->
    <div id="tab-plan" class="tab-content">
        {% if plan %}
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-4 mb-4">
            <!-- DAG Visualization -->
            <div class="lg:col-span-2">
                <div id="dag-container" class="bg-gray-900 rounded-lg border border-gray-700 h-96"></div>
            </div>
            <!-- Node Detail Panel -->
            <div id="node-detail" class="bg-gray-800 rounded-lg border border-gray-700 p-4 h-96 overflow-y-auto">
                <div id="node-detail-empty" class="h-full flex items-center justify-center text-gray-500">
                    Click a node to view details
                </div>
                <div id="node-detail-content" class="hidden">
                    <div class="flex items-center justify-between mb-4">
                        <h3 id="node-name" class="text-lg font-semibold"></h3>
                        <span id="node-type" class="text-sm px-2 py-1 rounded"></span>
                    </div>
                    <div id="node-status" class="mb-4"></div>

                    <!-- Inputs -->
                    <div id="node-inputs-section" class="mb-4">
                        <h4 class="text-gray-400 text-sm mb-2">Inputs</h4>
                        <div id="node-inputs" class="space-y-2"></div>
                    </div>

                    <!-- Output -->
                    <div id="node-output-section">
                        <h4 class="text-gray-400 text-sm mb-2">Output</h4>
                        <div id="node-output"></div>
                    </div>

                    <!-- Config -->
                    <div id="node-config-section" class="mt-4 hidden">
                        <h4 class="text-gray-400 text-sm mb-2">Config</h4>
                        <pre id="node-config" class="text-xs bg-gray-900 rounded p-2 overflow-x-auto"></pre>
                    </div>
                </div>
            </div>
        </div>

        <!-- Step List -->
        <div class="space-y-2">
            {% for step in plan.steps %}
            {% set step_color = 'green' if step.status == 'completed' or step.cache_id else ('purple' if step.cached else ('blue' if step.status == 'running' else 'gray')) %}
            <div class="step-item bg-gray-800 rounded p-3 cursor-pointer hover:bg-gray-750 transition-colors"
                 data-step-id="{{ step.id }}"
                 data-step-name="{{ step.name }}"
                 data-step-type="{{ step.type }}"
                 data-step-status="{{ step.status or 'pending' }}"
                 data-step-inputs="{{ step.inputs | tojson }}"
                 data-step-cache-id="{{ step.cache_id or '' }}"
                 data-step-config="{{ (step.config or {}) | tojson }}"
                 onclick="selectStep('{{ step.id }}')">
                <div class="flex items-center justify-between">
                    <div class="flex items-center space-x-3">
                        <span class="w-6 h-6 rounded-full bg-{{ step_color }}-600 flex items-center justify-center text-xs">
                            {{ loop.index }}
                        </span>
                        <span class="font-medium">{{ step.name }}</span>
                        <span class="text-gray-500 text-sm">{{ step.type }}</span>
                    </div>
                    <div class="flex items-center space-x-3">
                        {% if step.cached %}
                        <span class="text-purple-400 text-sm">cached</span>
                        {% elif step.status == 'completed' %}
                        <span class="text-green-400 text-sm">completed</span>
                        {% endif %}
                    </div>
                </div>
                {% if step.cache_id %}
                <div class="mt-2 ml-9 flex items-center space-x-2">
                    <span class="text-gray-500 text-xs">Output:</span>
                    <a href="/cache/{{ step.cache_id }}" class="font-mono text-xs text-blue-400 hover:text-blue-300" onclick="event.stopPropagation()">
                        {{ step.cache_id[:24] }}...
                    </a>
                </div>
                {% endif %}
            </div>
            {% endfor %}
        </div>

        <!-- Recipe/Plan S-expression -->
        {% if plan_sexp %}
        <details class="mt-6" open>
            <summary class="cursor-pointer text-gray-400 hover:text-white text-sm mb-2 flex items-center justify-between">
                <span>Recipe (S-expression)</span>
                {% if recipe_ipfs_cid %}
                <a href="https://ipfs.io/ipfs/{{ recipe_ipfs_cid }}"
                   target="_blank"
                   onclick="event.stopPropagation()"
                   class="text-blue-400 hover:text-blue-300 text-xs font-mono ml-4">
                    ipfs://{{ recipe_ipfs_cid[:16] }}...
                </a>
                {% endif %}
            </summary>
            <div class="bg-gray-900 rounded-lg border border-gray-700 p-4 overflow-x-auto">
                <pre class="text-sm font-mono sexp-code">{{ plan_sexp }}</pre>
            </div>
        </details>
        {% endif %}

        <style>
        .sexp-code {
            line-height: 1.6;
        }
        </style>
        <script>
        // Syntax highlight S-expressions
        document.querySelectorAll('.sexp-code').forEach(el => {
            let html = el.textContent;
            // Comments
            html = html.replace(/(;;.*)/g, '<span class="text-gray-500">$1</span>');
            // Keywords (:keyword)
            html = html.replace(/(:[a-zA-Z_-]+)/g, '<span class="text-purple-400">$1</span>');
            // Strings
            html = html.replace(/("(?:[^"\\]|\\.)*")/g, '<span class="text-green-400">$1</span>');
            // Special forms
            html = html.replace(/\b(plan|recipe|def|->)\b/g, '<span class="text-pink-400 font-semibold">$1</span>');
            // Primitives
            html = html.replace(/\((source|effect|sequence|segment|resize|transform|layer|blend|mux|analyze)\b/g,
                '(<span class="text-blue-400">$1</span>');
            // Parentheses
            html = html.replace(/(\(|\))/g, '<span class="text-yellow-500">$1</span>');
            el.innerHTML = html;
        });
        </script>
        {% else %}
        <p class="text-gray-500">No plan available for this run.</p>
        {% endif %}
    </div>

    <!-- Artifacts Tab -->
    <div id="tab-artifacts" class="tab-content hidden">
        {% if artifacts %}
        <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
            {% for artifact in artifacts %}
            <a href="/cache/{{ artifact.cid }}"
               class="bg-gray-800 rounded-lg p-4 hover:bg-gray-750 transition-colors">
                {% if artifact.media_type and artifact.media_type.startswith('image/') %}
                <img src="/cache/{{ artifact.cid }}/raw" alt=""
                     class="w-full h-32 object-cover rounded mb-2">
                {% elif artifact.media_type and artifact.media_type.startswith('video/') %}
                <video src="/cache/{{ artifact.cid }}/raw"
                       class="w-full h-32 object-cover rounded mb-2" muted></video>
                {% else %}
                <div class="w-full h-32 bg-gray-900 rounded mb-2 flex items-center justify-center text-gray-600">
                    {{ artifact.media_type or 'Unknown' }}
                </div>
                {% endif %}
                <div class="font-mono text-xs text-gray-500 truncate">{{ artifact.cid[:16] }}...</div>
                <div class="text-sm text-gray-400">{{ artifact.step_name }}</div>
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-500">No artifacts generated yet.</p>
        {% endif %}
    </div>

    <!-- Analysis Tab -->
    <div id="tab-analysis" class="tab-content hidden">
        {% if analysis %}
        <div class="space-y-6">
            {% for item in analysis %}
            <div class="bg-gray-800 rounded-lg p-6">
                <div class="flex items-center justify-between mb-4">
                    <h3 class="text-lg font-semibold">{{ item.input_name }}</h3>
                    <a href="/cache/{{ item.input_cid }}" class="font-mono text-xs text-blue-400 hover:text-blue-300">
                        {{ item.input_cid[:16] }}...
                    </a>
                </div>

                {% if item.has_analysis %}
                <div class="grid grid-cols-2 md:grid-cols-4 gap-4 mb-4">
                    {% if item.tempo %}
                    <div class="bg-gray-900 rounded p-3">
                        <div class="text-gray-500 text-sm">Tempo</div>
                        <div class="text-2xl font-bold text-pink-400">{{ item.tempo | round(1) }}</div>
                        <div class="text-gray-500 text-xs">BPM</div>
                    </div>
                    {% endif %}

                    {% if item.beat_times %}
                    <div class="bg-gray-900 rounded p-3">
                        <div class="text-gray-500 text-sm">Beats</div>
                        <div class="text-2xl font-bold text-blue-400">{{ item.beat_times | length }}</div>
                        <div class="text-gray-500 text-xs">detected</div>
                    </div>
                    {% endif %}

                    {% if item.energy is not none %}
                    <div class="bg-gray-900 rounded p-3">
                        <div class="text-gray-500 text-sm">Energy</div>
                        <div class="text-2xl font-bold text-green-400">{{ (item.energy * 100) | round(1) }}%</div>
                        <div class="text-gray-500 text-xs">average</div>
                    </div>
                    {% endif %}

                    {% if item.beat_times %}
                    <div class="bg-gray-900 rounded p-3">
                        <div class="text-gray-500 text-sm">Duration</div>
                        <div class="text-2xl font-bold text-purple-400">
                            {{ (item.beat_times[-1] | default(0)) | round(1) }}s
                        </div>
                        <div class="text-gray-500 text-xs">analyzed</div>
                    </div>
                    {% endif %}
                </div>

                <!-- Beat visualization -->
                {% if item.beat_times and item.beat_times | length > 0 %}
                <div class="mt-4">
                    <div class="text-gray-500 text-sm mb-2">Beat Timeline</div>
                    <div class="bg-gray-900 rounded h-8 relative overflow-hidden">
                        {% set max_time = item.beat_times[-1] if item.beat_times else 1 %}
                        {% for beat_time in item.beat_times[:100] %}
                        <div class="absolute top-0 bottom-0 w-px bg-pink-500 opacity-60"
                             style="left: {{ (beat_time / max_time * 100) | round(2) }}%"></div>
                        {% endfor %}
                    </div>
                    <div class="flex justify-between text-xs text-gray-600 mt-1">
                        <span>0s</span>
                        <span>{{ max_time | round(1) }}s</span>
                    </div>
                </div>
                {% endif %}

                <!-- Raw data toggle -->
                <details class="mt-4">
                    <summary class="cursor-pointer text-gray-400 hover:text-white text-sm">
                        Show Raw Analysis Data
                    </summary>
                    <div class="bg-gray-900 rounded-lg border border-gray-700 p-4 mt-2 overflow-x-auto">
                        <pre class="text-sm text-gray-300 whitespace-pre-wrap">{{ item.raw | tojson(indent=2) }}</pre>
                    </div>
                </details>
                {% else %}
                <p class="text-gray-500">No analysis data available for this input.</p>
                {% endif %}
            </div>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-500">No inputs with analysis data.</p>
        {% endif %}
    </div>

    <!-- Inputs Tab -->
    <div id="tab-inputs" class="tab-content hidden">
        {% if run_inputs %}
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {% for input in run_inputs %}
            <div class="bg-gray-800 rounded-lg overflow-hidden">
                <!-- Media Preview -->
                {% if input.media_type and input.media_type.startswith('image/') %}
                <a href="/cache/{{ input.cid }}" class="block">
                    <img src="/cache/{{ input.cid }}/raw" alt="{{ input.name or 'Input' }}"
                         class="w-full h-48 object-cover">
                </a>
                {% elif input.media_type and input.media_type.startswith('video/') %}
                <a href="/cache/{{ input.cid }}" class="block">
                    <video src="/cache/{{ input.cid }}/raw"
                           class="w-full h-48 object-cover" muted controls></video>
                </a>
                {% elif input.media_type and input.media_type.startswith('audio/') %}
                <div class="p-4 bg-gray-900">
                    <audio src="/cache/{{ input.cid }}/raw" controls class="w-full"></audio>
                </div>
                {% else %}
                <a href="/cache/{{ input.cid }}" class="block">
                    <div class="w-full h-48 bg-gray-900 flex items-center justify-center text-gray-600">
                        <div class="text-center">
                            <div class="text-4xl mb-2">📄</div>
                            <div>{{ input.media_type or 'Unknown type' }}</div>
                        </div>
                    </div>
                </a>
                {% endif %}
                <!-- Info -->
                <div class="p-3">
                    {% if input.name %}
                    <div class="font-medium text-white mb-1">{{ input.name }}</div>
                    {% endif %}
                    <a href="/cache/{{ input.cid }}" class="font-mono text-xs text-blue-400 hover:text-blue-300 block truncate">
                        {{ input.cid }}
                    </a>
                    {% if input.media_type %}
                    <div class="text-xs text-gray-500 mt-1">{{ input.media_type }}</div>
                    {% endif %}
                </div>
            </div>
            {% endfor %}
        </div>
        {% elif run.inputs %}
        <!-- Fallback to simple list if run_inputs not available -->
        <div class="space-y-2">
            {% for input_hash in run.inputs %}
            <a href="/cache/{{ input_hash }}"
               class="block bg-gray-800 rounded p-3 font-mono text-sm hover:bg-gray-750">
                {{ input_hash }}
            </a>
            {% endfor %}
        </div>
        {% else %}
        <p class="text-gray-500">No inputs recorded.</p>
        {% endif %}
    </div>

    <!-- Output -->
    {% if run.output_cid %}
    <div class="mt-8 bg-gray-800 rounded-lg p-6">
        <h3 class="text-lg font-semibold mb-4">Output</h3>

        {# Inline media preview #}
        <div class="mb-4">
            {% if output_media_type and output_media_type.startswith('image/') %}
            <a href="/cache/{{ run.output_cid }}" class="block">
                <img src="/cache/{{ run.output_cid }}/raw" alt="Output"
                     class="max-w-full max-h-96 rounded-lg mx-auto">
            </a>
            {% elif output_media_type and output_media_type.startswith('video/') %}
            <video src="/cache/{{ run.output_cid }}/raw" controls
                   class="max-w-full max-h-96 rounded-lg mx-auto"></video>
            {% elif output_media_type and output_media_type.startswith('audio/') %}
            <audio src="/cache/{{ run.output_cid }}/raw" controls class="w-full"></audio>
            {% else %}
            <div class="bg-gray-900 rounded-lg p-8 text-center text-gray-500">
                <div class="text-4xl mb-2">?</div>
                <div>{{ output_media_type or 'Unknown media type' }}</div>
            </div>
            {% endif %}
        </div>

        <div class="flex items-center justify-between">
            <a href="/cache/{{ run.output_cid }}" class="font-mono text-sm text-blue-400 hover:text-blue-300">
                {{ run.output_cid }}
            </a>
            {% if run.output_ipfs_cid %}
            <a href="https://ipfs.io/ipfs/{{ run.output_ipfs_cid }}"
               target="_blank"
               class="text-gray-400 hover:text-white text-sm">
                IPFS: {{ run.output_ipfs_cid[:16] }}...
            </a>
            {% endif %}
        </div>
    </div>
    {% endif %}
</div>

<script>
function showTab(name) {
    document.querySelectorAll('.tab-content').forEach(el => el.classList.add('hidden'));
    document.querySelectorAll('.tab-link').forEach(el => {
        el.classList.remove('border-blue-500', 'text-white');
        el.classList.add('border-transparent', 'text-gray-400');
    });
    document.getElementById('tab-' + name).classList.remove('hidden');
    event.target.classList.add('border-blue-500', 'text-white');
    event.target.classList.remove('border-transparent', 'text-gray-400');
}

{% if plan %}
// Store step data for quick lookup
const stepData = {};
document.querySelectorAll('.step-item').forEach(el => {
    const id = el.dataset.stepId;
    stepData[id] = {
        id: id,
        name: el.dataset.stepName,
        type: el.dataset.stepType,
        status: el.dataset.stepStatus,
        inputs: JSON.parse(el.dataset.stepInputs || '[]'),
        cacheId: el.dataset.stepCacheId,
        config: JSON.parse(el.dataset.stepConfig || '{}')
    };
});
console.log('stepData loaded:', Object.keys(stepData).length, 'steps');
console.log('dag_elements:', {{ dag_elements | tojson }});

let cy = null;
let selectedNode = null;

function selectStep(stepId) {
    // Update URL hash
    history.pushState(null, '', '#node-' + stepId);
    showNodeDetail(stepId);
}

function showNodeDetail(stepId) {
    const step = stepData[stepId];
    if (!step) return;

    selectedNode = stepId;

    // Update step list selection
    document.querySelectorAll('.step-item').forEach(el => {
        el.classList.remove('ring-2', 'ring-blue-500');
        if (el.dataset.stepId === stepId) {
            el.classList.add('ring-2', 'ring-blue-500');
        }
    });

    // Update cytoscape selection
    if (cy) {
        cy.nodes().removeClass('selected');
        cy.nodes().style('border-width', 0);
        const node = cy.$('#' + stepId);
        if (node.length) {
            node.style('border-width', 3);
            node.style('border-color', '#3b82f6');
        }
    }

    // Show detail panel
    document.getElementById('node-detail-empty').classList.add('hidden');
    document.getElementById('node-detail-content').classList.remove('hidden');

    // Populate node info
    document.getElementById('node-name').textContent = step.name;

    const typeEl = document.getElementById('node-type');
    typeEl.textContent = step.type;
    const typeColors = {
        'SOURCE': 'bg-blue-600',
        'EFFECT': 'bg-purple-600',
        'SEQUENCE': 'bg-pink-600',
        'transform': 'bg-green-600',
        'output': 'bg-yellow-600'
    };
    typeEl.className = 'text-sm px-2 py-1 rounded ' + (typeColors[step.type] || 'bg-gray-600');

    // Status
    const statusEl = document.getElementById('node-status');
    const statusColors = {
        'completed': 'text-green-400',
        'running': 'text-blue-400',
        'pending': 'text-gray-400',
        'cached': 'text-purple-400'
    };
    statusEl.innerHTML = `<span class="${statusColors[step.status] || 'text-gray-400'}">${step.status}</span>`;

    // Inputs
    const inputsEl = document.getElementById('node-inputs');
    if (step.inputs.length > 0) {
        document.getElementById('node-inputs-section').classList.remove('hidden');
        inputsEl.innerHTML = step.inputs.map(inp => {
            const inputStep = stepData[inp];
            const inputCacheId = inputStep ? inputStep.cacheId : '';
            if (inputCacheId) {
                return `<div class="bg-gray-900 rounded p-2">
                    <div class="text-sm text-gray-300 cursor-pointer hover:text-blue-400" onclick="selectStep('${inp}')">${inp}</div>
                    <a href="/cache/${inputCacheId}" class="font-mono text-xs text-blue-400 hover:text-blue-300 block mt-1" onclick="event.stopPropagation()">
                        ${inputCacheId.substring(0, 24)}...
                    </a>
                </div>`;
            } else {
                return `<div class="bg-gray-900 rounded p-2">
                    <div class="text-sm text-gray-300 cursor-pointer hover:text-blue-400" onclick="selectStep('${inp}')">${inp}</div>
                    <span class="text-xs text-gray-500">No cached output</span>
                </div>`;
            }
        }).join('');
    } else {
        document.getElementById('node-inputs-section').classList.add('hidden');
    }

    // Output
    const outputEl = document.getElementById('node-output');
    if (step.cacheId) {
        outputEl.innerHTML = `
            <div class="bg-gray-900 rounded p-2">
                <a href="/cache/${step.cacheId}" class="font-mono text-xs text-blue-400 hover:text-blue-300 block">
                    ${step.cacheId}
                </a>
                <a href="/cache/${step.cacheId}/raw" target="_blank" class="text-xs text-gray-500 hover:text-gray-300 mt-1 inline-block">
                    View raw
                </a>
            </div>`;
    } else {
        outputEl.innerHTML = '<span class="text-gray-500 text-sm">No output yet</span>';
    }

    // Config
    const configSection = document.getElementById('node-config-section');
    const configEl = document.getElementById('node-config');
    if (step.config && Object.keys(step.config).length > 0) {
        configSection.classList.remove('hidden');
        configEl.textContent = JSON.stringify(step.config, null, 2);
    } else {
        configSection.classList.add('hidden');
    }
}

// Initialize DAG
document.addEventListener('DOMContentLoaded', function() {
    cy = cytoscape({
        container: document.getElementById('dag-container'),
        style: [
            { selector: 'node', style: {
                'label': 'data(label)',
                'background-color': 'data(color)',
                'color': '#fff',
                'text-valign': 'center',
                'font-size': '10px',
                'width': 40,
                'height': 40,
                'border-width': 0
            }},
            { 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 }
    });

    // Node click handler
    cy.on('tap', 'node', function(evt) {
        const nodeId = evt.target.id();
        selectStep(nodeId);
    });

    // Handle initial hash
    const hash = window.location.hash;
    if (hash && hash.startsWith('#node-')) {
        const nodeId = hash.substring(6);
        if (stepData[nodeId]) {
            showNodeDetail(nodeId);
        }
    }
});

// Handle hash changes
window.addEventListener('hashchange', function() {
    const hash = window.location.hash;
    if (hash && hash.startsWith('#node-')) {
        const nodeId = hash.substring(6);
        if (stepData[nodeId]) {
            showNodeDetail(nodeId);
        }
    }
});
{% endif %}
</script>
{% endblock %}