{% extends 'base.html.twig' %}

{% block title %}Importer une recette{% endblock %}

{% block body %}
<div class="row justify-content-center">
<div class="col-lg-8">

<div class="d-flex justify-content-between align-items-center mb-4">
    <h1><i class="bi bi-link-45deg"></i> Importer une recette</h1>
    <a href="{{ path('app_recipe_index') }}" class="btn btn-outline-secondary">
        <i class="bi bi-arrow-left"></i> Retour
    </a>
</div>

{# Étape 1 : Saisie URL #}
<div id="step-url" class="card mb-4">
    <div class="card-header fw-bold">
        <i class="bi bi-globe"></i> Colle le lien de la recette
    </div>
    <div class="card-body">
        <div class="input-group">
            <input type="url" id="recipe-url" class="form-control form-control-lg"
                   placeholder="https://www.marmiton.org/recettes/...">
            <button id="btn-import" class="btn btn-success btn-lg">
                <i class="bi bi-magic"></i> Importer
            </button>
        </div>
        <div class="form-text">Claude va analyser la page et extraire la recette automatiquement.</div>
    </div>
</div>

{# Loader #}
<div id="loader" class="text-center py-5 d-none">
    <div class="spinner-border text-success" style="width:3rem;height:3rem;"></div>
    <p class="mt-3 text-muted">Claude analyse la page et extrait la recette...<br>
    <small>Cela peut prendre 10 à 20 secondes</small></p>
</div>

{# Erreur #}
<div id="error-box" class="alert alert-danger d-none"></div>

{# Étape 2 : Formulaire pré-rempli #}
<div id="step-form" class="d-none">

    <div class="alert alert-success">
        <i class="bi bi-check-circle"></i>
        <strong>Recette extraite avec succès !</strong>
        Vérifie et complète les informations avant d'enregistrer.
    </div>

    <form method="post" action="{{ path('app_recipe_new') }}"
          enctype="multipart/form-data" id="recipe-form">

        <input type="hidden" name="_token" value="">

        <div class="card mb-4">
            <div class="card-header fw-bold">Informations générales</div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label fw-bold">Titre *</label>
                    <input type="text" name="recipe[title]" id="f-title" class="form-control" required>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Description</label>
                    <textarea name="recipe[description]" id="f-description" class="form-control" rows="3"></textarea>
                </div>
                <div class="row">
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Difficulté</label>
                        <select name="recipe[difficulty]" id="f-difficulty" class="form-select">
                            <option value="easy">Facile</option>
                            <option value="medium">Moyen</option>
                            <option value="hard">Difficile</option>
                        </select>
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Préparation (min)</label>
                        <input type="number" name="recipe[prepTime]" id="f-prepTime" class="form-control" min="0">
                    </div>
                    <div class="col-md-4 mb-3">
                        <label class="form-label fw-bold">Cuisson (min)</label>
                        <input type="number" name="recipe[cookTime]" id="f-cookTime" class="form-control" min="0">
                    </div>
                </div>
                <div class="mb-3">
                    <label class="form-label fw-bold">Portions</label>
                    <input type="number" name="recipe[servings]" id="f-servings" class="form-control" min="1">
                </div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header fw-bold">Ingrédients</div>
            <div class="card-body">
                <div id="f-ingredients"></div>
                <button type="button" id="add-ingredient" class="btn btn-outline-success btn-sm mt-2">
                    <i class="bi bi-plus"></i> Ajouter un ingrédient
                </button>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header fw-bold">Étapes</div>
            <div class="card-body">
                <div id="f-steps"></div>
                <button type="button" id="add-step" class="btn btn-outline-success btn-sm mt-2">
                    <i class="bi bi-plus"></i> Ajouter une étape
                </button>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header fw-bold">Photos</div>
            <div class="card-body">
                <input type="file" name="photos[]" class="form-control" multiple accept="image/*">
                <div class="form-text">Ajoute des photos de la recette (optionnel).</div>
            </div>
        </div>

        <div class="card mb-4">
            <div class="card-header fw-bold">Source</div>
            <div class="card-body">
                <div class="row">
                    <div class="col-md-6 mb-3">
                        <label class="form-label">URL source</label>
                        <input type="text" name="recipe[sourceUrl]" id="f-sourceUrl" class="form-control">
                    </div>
                    <div class="col-md-6 mb-3">
                        <label class="form-label">Nom de la source</label>
                        <input type="text" name="recipe[sourceLabel]" class="form-control"
                               placeholder="Ex: Marmiton, 750g...">
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex gap-2 mb-5">
            <button type="submit" class="btn btn-success btn-lg">
                <i class="bi bi-check-lg"></i> Enregistrer la recette
            </button>
            <button type="button" class="btn btn-outline-secondary btn-lg"
                    onclick="document.getElementById('step-form').classList.add('d-none');
                             document.getElementById('step-url').classList.remove('d-none');">
                Recommencer
            </button>
        </div>

    </form>
</div>

</div>
</div>
{% endblock %}

{% block javascripts %}
<script>
let ingredientCount = 0;
let stepCount = 0;

function addIngredientRow(data = {}) {
    const container = document.getElementById('f-ingredients');
    const div = document.createElement('div');
    div.className = 'ingredient-row row g-2 mb-2';
    div.innerHTML = `
        <div class="col-md-4"><input type="text" name="ingredients[${ingredientCount}][name]" class="form-control" placeholder="Ingrédient *" value="${data.name || ''}"></div>
        <div class="col-md-2"><input type="text" name="ingredients[${ingredientCount}][quantity]" class="form-control" placeholder="Qté" value="${data.quantity || ''}"></div>
        <div class="col-md-2"><input type="text" name="ingredients[${ingredientCount}][unit]" class="form-control" placeholder="Unité" value="${data.unit || ''}"></div>
        <div class="col-md-3"><input type="text" name="ingredients[${ingredientCount}][note]" class="form-control" placeholder="Note" value="${data.note || ''}"></div>
        <div class="col-md-1"><button type="button" class="btn btn-outline-danger btn-remove-ingredient"><i class="bi bi-trash"></i></button></div>
    `;
    container.appendChild(div);
    ingredientCount++;
}

function addStepRow(data = {}) {
    const container = document.getElementById('f-steps');
    const div = document.createElement('div');
    div.className = 'step-row mb-3 p-3 border rounded';
    div.innerHTML = `
        <div class="d-flex justify-content-between mb-2">
            <strong class="step-number">Étape ${stepCount + 1}</strong>
            <button type="button" class="btn btn-outline-danger btn-sm btn-remove-step"><i class="bi bi-trash"></i></button>
        </div>
        <textarea name="steps[${stepCount}][instruction]" class="form-control mb-2" rows="2">${data.instruction || ''}</textarea>
        <div class="row g-2">
            <div class="col-md-4"><input type="number" name="steps[${stepCount}][duration]" class="form-control" placeholder="Durée (min)" value="${data.duration || ''}"></div>
            <div class="col-md-8"><input type="text" name="steps[${stepCount}][note]" class="form-control" placeholder="Astuce" value="${data.note || ''}"></div>
        </div>
    `;
    container.appendChild(div);
    stepCount++;
}

function fillForm(recipe) {
    document.getElementById('f-title').value        = recipe.title || '';
    document.getElementById('f-description').value  = recipe.description || '';
    document.getElementById('f-prepTime').value     = recipe.prepTime || 0;
    document.getElementById('f-cookTime').value     = recipe.cookTime || 0;
    document.getElementById('f-servings').value     = recipe.servings || 4;
    document.getElementById('f-sourceUrl').value    = document.getElementById('recipe-url').value;

    const diffSelect = document.getElementById('f-difficulty');
    diffSelect.value = recipe.difficulty || 'easy';

    // Ingrédients
    ingredientCount = 0;
    document.getElementById('f-ingredients').innerHTML = '';
    (recipe.ingredients || []).forEach(ing => addIngredientRow(ing));

    // Étapes
    stepCount = 0;
    document.getElementById('f-steps').innerHTML = '';
    (recipe.steps || []).forEach(step => addStepRow(step));
}

document.getElementById('btn-import').addEventListener('click', async function() {
    const url = document.getElementById('recipe-url').value.trim();
    if (!url) return;

    document.getElementById('step-url').classList.add('d-none');
    document.getElementById('loader').classList.remove('d-none');
    document.getElementById('error-box').classList.add('d-none');

    try {
        const response = await fetch('{{ path('app_import_url') }}', {
            method: 'POST',
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            body: 'url=' + encodeURIComponent(url)
        });

        const data = await response.json();

        document.getElementById('loader').classList.add('d-none');

        if (data.success) {
            fillForm(data.recipe);
            document.getElementById('step-form').classList.remove('d-none');
        } else {
            document.getElementById('error-box').textContent = data.error;
            document.getElementById('error-box').classList.remove('d-none');
            document.getElementById('step-url').classList.remove('d-none');
        }
    } catch(e) {
        document.getElementById('loader').classList.add('d-none');
        document.getElementById('error-box').textContent = 'Une erreur est survenue. Réessaie.';
        document.getElementById('error-box').classList.remove('d-none');
        document.getElementById('step-url').classList.remove('d-none');
    }
});

document.getElementById('add-ingredient').addEventListener('click', () => addIngredientRow());
document.getElementById('add-step').addEventListener('click', () => addStepRow());

document.addEventListener('click', function(e) {
    if (e.target.closest('.btn-remove-ingredient')) {
        const rows = document.querySelectorAll('.ingredient-row');
        if (rows.length > 1) e.target.closest('.ingredient-row').remove();
    }
    if (e.target.closest('.btn-remove-step')) {
        const rows = document.querySelectorAll('.step-row');
        if (rows.length > 1) {
            e.target.closest('.step-row').remove();
            document.querySelectorAll('.step-number').forEach((el, i) => el.textContent = `Étape ${i + 1}`);
        }
    }
});
</script>
{% endblock %}