{% extends "base.html" %}

{% set meta = effect.meta or effect %}

{% block title %}{{ meta.name or 'Effect' }} - Effects - Art-DAG L1{% endblock %}

{% block head %}
{{ super() }}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/lisp.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/languages/scheme.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="/effects" class="text-gray-400 hover:text-white">&larr; Effects</a>
        <h1 class="text-2xl font-bold">{{ meta.name or 'Unnamed Effect' }}</h1>
        <span class="text-gray-500">v{{ meta.version or '1.0.0' }}</span>
        {% if meta.temporal %}
        <span class="bg-purple-900 text-purple-300 px-2 py-1 rounded text-sm">temporal</span>
        {% endif %}
    </div>

    {% if meta.author %}
    <p class="text-gray-500 mb-2">by {{ meta.author }}</p>
    {% endif %}

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

    <!-- Friendly Name & CID Info -->
    <div class="bg-gray-800 rounded-lg p-4 border border-gray-700 mb-6">
        {% if effect.friendly_name %}
        <div class="mb-4 pb-4 border-b border-gray-700">
            <span class="text-gray-500 text-sm">Friendly Name</span>
            <p class="text-blue-400 font-medium text-lg mt-1">{{ effect.friendly_name }}</p>
            <p class="text-gray-500 text-xs mt-1">Use in recipes: <code class="bg-gray-900 px-2 py-0.5 rounded">(effect {{ effect.base_name }})</code></p>
        </div>
        {% endif %}
        <div class="flex items-center justify-between">
            <div>
                <span class="text-gray-500 text-sm">Content ID (CID)</span>
                <p class="font-mono text-sm text-gray-300 mt-1" id="effect-cid">{{ effect.cid }}</p>
            </div>
            <button onclick="copyToClipboard('{{ effect.cid }}')"
                    class="bg-gray-700 hover:bg-gray-600 px-3 py-1 rounded text-sm">
                Copy
            </button>
        </div>
        {% if effect.uploaded_at %}
        <div class="mt-3 text-gray-500 text-sm">
            Uploaded: {{ effect.uploaded_at }}
            {% if effect.uploader %}
            by {{ effect.uploader }}
            {% endif %}
        </div>
        {% endif %}
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
        <!-- Left Column: Parameters & Dependencies -->
        <div class="lg:col-span-1 space-y-6">
            <!-- Parameters -->
            {% if meta.params %}
            <div class="bg-gray-800 rounded-lg border border-gray-700">
                <div class="border-b border-gray-700 px-4 py-2">
                    <span class="text-gray-400 text-sm font-medium">Parameters</span>
                </div>
                <div class="p-4 space-y-4">
                    {% for param in meta.params %}
                    <div>
                        <div class="flex items-center space-x-2 mb-1">
                            <span class="font-medium text-white">{{ param.name }}</span>
                            <span class="bg-blue-900 text-blue-300 px-2 py-0.5 rounded text-xs">{{ param.type }}</span>
                        </div>
                        {% if param.description %}
                        <p class="text-gray-400 text-sm">{{ param.description }}</p>
                        {% endif %}
                        <div class="flex flex-wrap gap-2 mt-1 text-xs">
                            {% if param.range %}
                            <span class="text-gray-500">range: {{ param.range[0] }} - {{ param.range[1] }}</span>
                            {% endif %}
                            {% if param.default is defined %}
                            <span class="text-gray-500">default: {{ param.default }}</span>
                            {% endif %}
                        </div>
                    </div>
                    {% endfor %}
                </div>
            </div>
            {% endif %}

            <!-- Usage in Recipe -->
            <div class="bg-gray-800 rounded-lg border border-gray-700">
                <div class="border-b border-gray-700 px-4 py-2">
                    <span class="text-gray-400 text-sm font-medium">Usage in Recipe</span>
                </div>
                <div class="p-4">
                    {% if effect.base_name %}
                    <pre class="text-sm text-gray-300 bg-gray-900 rounded p-3 overflow-x-auto"><code class="language-lisp">({{ effect.base_name }} ...)</code></pre>
                    <p class="text-gray-500 text-xs mt-2">
                        Use the friendly name to reference this effect.
                    </p>
                    {% else %}
                    <pre class="text-sm text-gray-300 bg-gray-900 rounded p-3 overflow-x-auto"><code class="language-lisp">(effect :cid "{{ effect.cid }}")</code></pre>
                    <p class="text-gray-500 text-xs mt-2">
                        Reference this effect by CID in your recipe.
                    </p>
                    {% endif %}
                </div>
            </div>
        </div>

        <!-- Right Column: Source Code -->
        <div class="lg:col-span-2">
            <div class="bg-gray-800 rounded-lg border border-gray-700">
                <div class="border-b border-gray-700 px-4 py-2 flex items-center justify-between">
                    <span class="text-gray-400 text-sm font-medium">Source Code (S-expression)</span>
                    <div class="flex items-center space-x-2">
                        <a href="/effects/{{ effect.cid }}/source"
                           class="text-gray-400 hover:text-white text-sm"
                           download="{{ meta.name or 'effect' }}.sexp">
                            Download
                        </a>
                    </div>
                </div>
                <div class="p-4">
                    <pre class="text-sm overflow-x-auto rounded bg-gray-900"><code class="language-lisp" id="source-code">Loading...</code></pre>
                </div>
            </div>
        </div>
    </div>

    <!-- Actions -->
    <div class="flex items-center space-x-4 mt-8">
        <button hx-post="/effects/{{ effect.cid }}/publish"
                hx-target="#share-result"
                class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded font-medium">
            Share to L2
        </button>
        <span id="share-result"></span>
        <button onclick="deleteEffect('{{ effect.cid }}')"
                class="bg-red-600 hover:bg-red-700 px-4 py-2 rounded font-medium">
            Delete
        </button>
        <span id="action-result"></span>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    // Load source code
    fetch('/effects/{{ effect.cid }}/source')
        .then(response => response.text())
        .then(source => {
            const codeEl = document.getElementById('source-code');
            codeEl.textContent = source;
            hljs.highlightElement(codeEl);
        })
        .catch(error => {
            document.getElementById('source-code').textContent = 'Failed to load source code';
        });
});

function copyToClipboard(text) {
    navigator.clipboard.writeText(text).then(() => {
        const btn = event.target;
        const originalText = btn.textContent;
        btn.textContent = 'Copied!';
        setTimeout(() => { btn.textContent = originalText; }, 1500);
    });
}

function deleteEffect(cid) {
    if (!confirm('Delete this effect from local cache? IPFS copies will persist.')) return;

    fetch('/effects/' + cid, { method: 'DELETE' })
        .then(response => {
            if (!response.ok) throw new Error('Delete failed');
            return response.json();
        })
        .then(data => {
            document.getElementById('action-result').innerHTML =
                '<span class="text-green-400">Deleted. Redirecting...</span>';
            setTimeout(() => { window.location.href = '/effects'; }, 1000);
        })
        .catch(error => {
            document.getElementById('action-result').innerHTML =
                '<span class="text-red-400">' + error.message + '</span>';
        });
}
</script>
{% endblock %}