{% extends "base.html" %}

{% block title %}Effects - Art-DAG L1{% endblock %}

{% block content %}
<div class="max-w-6xl mx-auto">
    <div class="flex items-center justify-between mb-6">
        <h1 class="text-3xl font-bold">Effects</h1>
        <button onclick="document.getElementById('upload-modal').classList.remove('hidden')"
                class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded font-medium">
            Upload Effect
        </button>
    </div>

    <!-- Upload Modal -->
    <div id="upload-modal" class="hidden fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
        <div class="bg-gray-800 rounded-lg p-6 w-full max-w-md border border-gray-700">
            <div class="flex justify-between items-center mb-4">
                <h2 class="text-xl font-semibold">Upload Effect</h2>
                <button onclick="document.getElementById('upload-modal').classList.add('hidden')"
                        class="text-gray-400 hover:text-white">
                    <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
                    </svg>
                </button>
            </div>

            <form id="upload-form" enctype="multipart/form-data" class="space-y-4">
                <div>
                    <label class="block text-gray-400 text-sm mb-1">Effect File (.sexp)</label>
                    <input type="file" name="file" id="upload-file" required
                           accept=".sexp,.lisp"
                           class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white file:mr-4 file:py-2 file:px-4 file:rounded file:border-0 file:bg-blue-600 file:text-white hover:file:bg-blue-700">
                </div>

                <div>
                    <label class="block text-gray-400 text-sm mb-1">Friendly Name (optional)</label>
                    <input type="text" name="display_name" id="upload-name" placeholder="e.g., color-shift"
                           class="w-full bg-gray-900 border border-gray-600 rounded px-3 py-2 text-white">
                    <p class="text-gray-500 text-xs mt-1">A name to reference this effect in recipes</p>
                </div>

                <div id="upload-result" class="hidden"></div>

                <div class="flex justify-end space-x-3">
                    <button type="button" onclick="document.getElementById('upload-modal').classList.add('hidden')"
                            class="px-4 py-2 rounded border border-gray-600 hover:bg-gray-700">
                        Cancel
                    </button>
                    <button type="submit" id="upload-btn"
                            class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded font-medium">
                        Upload
                    </button>
                </div>
            </form>
        </div>
    </div>

    <p class="text-gray-400 mb-8">
        Effects are S-expression files that define video processing operations.
        Each effect is stored in IPFS and can be referenced by name in recipes.
    </p>

    {% if effects %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="effects-list">
        {% for effect in effects %}
        {% set meta = effect.meta or effect %}
        <a href="/effects/{{ effect.cid }}"
           class="effect-card bg-gray-800 border border-gray-700 rounded-lg p-4 hover:border-gray-600 transition-colors">
            <div class="flex items-center justify-between mb-2">
                <span class="font-medium text-white">{{ meta.name or 'Unnamed' }}</span>
                <span class="text-gray-500 text-sm">v{{ meta.version or '1.0.0' }}</span>
            </div>

            {% if meta.description %}
            <p class="text-gray-400 text-sm mb-3 line-clamp-2">{{ meta.description }}</p>
            {% endif %}

            <div class="flex items-center justify-between text-sm mb-2">
                {% if meta.author %}
                <span class="text-gray-500">by {{ meta.author }}</span>
                {% else %}
                <span></span>
                {% endif %}
                {% if meta.temporal %}
                <span class="bg-purple-900 text-purple-300 px-2 py-0.5 rounded text-xs">temporal</span>
                {% endif %}
            </div>

            {% if meta.params %}
            <div class="text-gray-500 text-sm">
                {{ meta.params | length }} parameter{{ 's' if meta.params | length != 1 else '' }}
            </div>
            {% endif %}

            <div class="mt-3 text-xs">
                {% if effect.friendly_name %}
                <span class="text-blue-400 font-medium">{{ effect.friendly_name }}</span>
                {% else %}
                <span class="text-gray-600 font-mono truncate">{{ effect.cid[:24] }}...</span>
                {% endif %}
            </div>
        </a>
        {% endfor %}
    </div>

    {% if has_more %}
    <div hx-get="/effects?offset={{ offset + limit }}&limit={{ limit }}"
         hx-trigger="revealed"
         hx-swap="afterend"
         hx-select="#effects-list > *"
         class="h-20 flex items-center justify-center text-gray-500">
        Loading more...
    </div>
    {% endif %}

    {% else %}
    <div class="bg-gray-800 border border-gray-700 rounded-lg p-12 text-center">
        <svg class="w-16 h-16 mx-auto mb-4 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"
                  d="M10 20l4-16m4 4l4 4-4 4M6 16l-4-4 4-4"/>
        </svg>
        <p class="text-gray-500 mb-4">No effects uploaded yet.</p>
        <p class="text-gray-600 text-sm mb-6">
            Effects are S-expression files with metadata in comment headers.
        </p>
        <button onclick="document.getElementById('upload-modal').classList.remove('hidden')"
                class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded font-medium">
            Upload Your First Effect
        </button>
    </div>
    {% endif %}
</div>

<script>
// Handle upload form
document.getElementById('upload-form').addEventListener('submit', async function(e) {
    e.preventDefault();

    const form = e.target;
    const fileInput = document.getElementById('upload-file');
    const displayName = document.getElementById('upload-name').value;
    const resultDiv = document.getElementById('upload-result');
    const uploadBtn = document.getElementById('upload-btn');

    const file = fileInput.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);
    if (displayName) {
        formData.append('display_name', displayName);
    }

    uploadBtn.disabled = true;
    uploadBtn.textContent = 'Uploading...';
    resultDiv.classList.add('hidden');

    try {
        const response = await fetch('/effects/upload', {
            method: 'POST',
            body: formData
        });

        const data = await response.json();

        if (response.ok) {
            resultDiv.innerHTML = `
                <div class="bg-green-900 border border-green-700 rounded p-3 text-green-300">
                    <p class="font-medium">Effect uploaded!</p>
                    <p class="text-sm mt-1">${data.name} <span class="font-mono">${data.friendly_name}</span></p>
                </div>
            `;
            resultDiv.classList.remove('hidden');
            setTimeout(() => location.reload(), 1500);
        } else {
            resultDiv.innerHTML = `
                <div class="bg-red-900 border border-red-700 rounded p-3 text-red-300">
                    <p class="font-medium">Upload failed</p>
                    <p class="text-sm mt-1">${data.detail || 'Unknown error'}</p>
                </div>
            `;
            resultDiv.classList.remove('hidden');
            uploadBtn.disabled = false;
            uploadBtn.textContent = 'Upload';
        }
    } catch (error) {
        resultDiv.innerHTML = `
            <div class="bg-red-900 border border-red-700 rounded p-3 text-red-300">
                <p class="font-medium">Upload failed</p>
                <p class="text-sm mt-1">${error.message}</p>
            </div>
        `;
        resultDiv.classList.remove('hidden');
        uploadBtn.disabled = false;
        uploadBtn.textContent = 'Upload';
    }
});
</script>
{% endblock %}