{% extends "base.html" %}

{% block title %}Recipes - 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">Recipes</h1>
        <label class="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded font-medium cursor-pointer">
            Upload Recipe
            <input type="file" accept=".sexp,.yaml,.yml" class="hidden" id="recipe-upload" />
        </label>
    </div>

    <p class="text-gray-400 mb-8">
        Recipes define processing pipelines for audio and media. Each recipe is a DAG of effects.
    </p>

    {% if recipes %}
    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4" id="recipes-list">
        {% for recipe in recipes %}
        <a href="/recipes/{{ recipe.recipe_id }}"
           class="recipe-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">{{ recipe.name }}</span>
                {% if recipe.version %}
                <span class="text-gray-500 text-sm">v{{ recipe.version }}</span>
                {% endif %}
            </div>

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

            <div class="flex items-center justify-between text-sm">
                <span class="text-gray-500">{{ recipe.step_count or 0 }} steps</span>
                {% if recipe.last_run %}
                <span class="text-gray-500">Last run: {{ recipe.last_run }}</span>
                {% endif %}
            </div>

            {% if recipe.tags %}
            <div class="mt-2 flex flex-wrap gap-1">
                {% for tag in recipe.tags %}
                <span class="bg-gray-700 text-gray-300 px-2 py-0.5 rounded text-xs">{{ tag }}</span>
                {% endfor %}
            </div>
            {% endif %}

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

    {% if has_more %}
    <div hx-get="/recipes?offset={{ offset + limit }}&limit={{ limit }}"
         hx-trigger="revealed"
         hx-swap="afterend"
         hx-select="#recipes-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">
        <p class="text-gray-500 mb-4">No recipes available.</p>
        <p class="text-gray-600 text-sm mb-6">
            Recipes are S-expression files (.sexp) that define processing pipelines.
        </p>
        <label class="bg-blue-600 hover:bg-blue-700 px-6 py-3 rounded font-medium cursor-pointer inline-block">
            Upload Your First Recipe
            <input type="file" accept=".sexp,.yaml,.yml" class="hidden" id="recipe-upload-empty" />
        </label>
    </div>
    {% endif %}
</div>

<div id="upload-result" class="fixed bottom-4 right-4 max-w-sm"></div>

<script>
function handleRecipeUpload(input) {
    const file = input.files[0];
    if (!file) return;

    const formData = new FormData();
    formData.append('file', file);

    fetch('/recipes/upload', {
        method: 'POST',
        body: formData
    })
    .then(response => {
        if (!response.ok) throw new Error('Upload failed');
        return response.json();
    })
    .then(data => {
        const resultDiv = document.getElementById('upload-result');
        resultDiv.innerHTML = `
            <div class="bg-green-900 border border-green-700 rounded-lg p-4">
                <p class="text-green-300 font-medium">Recipe uploaded!</p>
                <p class="text-green-400 text-sm mt-1">${data.name} v${data.version}</p>
                <p class="text-gray-400 text-xs mt-2 font-mono">${data.recipe_id}</p>
            </div>
        `;
        setTimeout(() => {
            window.location.reload();
        }, 1500);
    })
    .catch(error => {
        const resultDiv = document.getElementById('upload-result');
        resultDiv.innerHTML = `
            <div class="bg-red-900 border border-red-700 rounded-lg p-4">
                <p class="text-red-300 font-medium">Upload failed</p>
                <p class="text-red-400 text-sm mt-1">${error.message}</p>
            </div>
        `;
    });

    input.value = '';
}

document.getElementById('recipe-upload')?.addEventListener('change', function() {
    handleRecipeUpload(this);
});
document.getElementById('recipe-upload-empty')?.addEventListener('change', function() {
    handleRecipeUpload(this);
});
</script>
{% endblock %}