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

{% block title %}Modifier — {{ recipe.title }}{% 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>Modifier la recette</h1>
    <a href="{{ path('app_recipe_show', {id: recipe.id}) }}" class="btn-ghost">
        <i class="bi bi-arrow-left"></i> Retour
    </a>
</div>

{{ form_start(form, {'attr': {'enctype': 'multipart/form-data'}}) }}

{# ── INFOS GÉNÉRALES ── #}
<div class="section-card">
    <div class="section-header"><i class="bi bi-info-circle" style="color:var(--petrol);"></i> Informations générales</div>
    <div class="section-body">
        <div class="mb-3">{{ form_row(form.title) }}</div>
        <div class="mb-3">{{ form_row(form.description) }}</div>
        <div class="row g-3 mb-3">
            <div class="col-md-4">{{ form_row(form.difficulty) }}</div>
            <div class="col-md-4">{{ form_row(form.prepTime) }}</div>
            <div class="col-md-4">{{ form_row(form.cookTime) }}</div>
        </div>
        <div class="col-md-4">{{ form_row(form.servings) }}</div>
    </div>
</div>

{# ── CATÉGORIES ── #}
<div class="section-card">
    <div class="section-header"><i class="bi bi-tags" style="color:var(--petrol);"></i> Catégories</div>
    <div class="section-body">
        {{ form_widget(form.categories, {'attr': {'class': 'form-select', 'size': '5'}}) }}
        <div style="font-size:12px;color:var(--text-light);margin-top:6px;">
            <i class="bi bi-info-circle"></i> Maintiens <kbd>Ctrl</kbd> (ou <kbd>Cmd</kbd>) pour sélectionner plusieurs catégories.
        </div>
        {{ form_errors(form.categories) }}
    </div>
</div>

{# ── INGRÉDIENTS ── #}
<div class="section-card">
    <div class="section-header"><i class="bi bi-basket" style="color:var(--petrol);"></i> Ingrédients</div>
    <div class="section-body">
        <div id="ingredients-list">
            {% for i, ingredient in recipe.ingredients %}
            <div class="ingredient-row row g-2 mb-2 align-items-center">
                <div class="col-md-4">
                    <div class="ingredient-autocomplete position-relative">
                        <div class="input-group">
                            <span class="input-group-text ingredient-photo-preview p-1"
                                  style="background:var(--cream-dark);border-color:var(--cream-border);">
                                <div class="rounded d-flex align-items-center justify-content-center" style="width:28px;height:28px;">
                                    <i class="bi bi-basket" style="color:var(--text-light);font-size:12px;"></i>
                                </div>
                            </span>
                            <input type="text" class="form-control ingredient-search"
                                   placeholder="Rechercher un ingrédient..."
                                   value="{{ ingredient.name }}">
                        </div>
                        <input type="hidden" name="ingredients[{{ i }}][name]"
                               class="ingredient-name-hidden" value="{{ ingredient.name }}">
                        <div class="autocomplete-dropdown list-group position-absolute w-100 shadow"
                             style="z-index:1000;display:none;max-height:200px;overflow-y:auto;top:100%;border-radius:8px;"></div>
                    </div>
                </div>
                <div class="col-md-2">
                    <input type="text" name="ingredients[{{ i }}][quantity]" class="form-control" placeholder="Qté"
                           value="{{ ingredient.quantity is not null ? (ingredient.quantity % 1 == 0 ? ingredient.quantity|number_format(0) : ingredient.quantity|number_format(2, ',', ' ')) : '' }}">
                </div>
                <div class="col-md-2">
                    <input type="text" name="ingredients[{{ i }}][unit]" class="form-control ingredient-unit"
                           placeholder="Unité" value="{{ ingredient.unit }}">
                </div>
                <div class="col-md-3">
                    <input type="text" name="ingredients[{{ i }}][note]" class="form-control"
                           placeholder="Note" value="{{ ingredient.note }}">
                </div>
                <div class="col-md-1">
                    <button type="button" class="btn-icon-sm danger btn-remove-ingredient">
                        <i class="bi bi-trash"></i>
                    </button>
                </div>
            </div>
            {% else %}
            <div class="ingredient-row row g-2 mb-2 align-items-center">
                <div class="col-md-4">
                    <div class="ingredient-autocomplete position-relative">
                        <div class="input-group">
                            <span class="input-group-text ingredient-photo-preview p-1"
                                  style="background:var(--cream-dark);border-color:var(--cream-border);">
                                <div class="rounded d-flex align-items-center justify-content-center" style="width:28px;height:28px;">
                                    <i class="bi bi-search" style="color:var(--text-light);font-size:12px;"></i>
                                </div>
                            </span>
                            <input type="text" class="form-control ingredient-search" placeholder="Rechercher un ingrédient...">
                        </div>
                        <input type="hidden" name="ingredients[0][name]" class="ingredient-name-hidden">
                        <div class="autocomplete-dropdown list-group position-absolute w-100 shadow"
                             style="z-index:1000;display:none;max-height:200px;overflow-y:auto;top:100%;border-radius:8px;"></div>
                    </div>
                </div>
                <div class="col-md-2"><input type="text" name="ingredients[0][quantity]" class="form-control" placeholder="Qté"></div>
                <div class="col-md-2"><input type="text" name="ingredients[0][unit]" class="form-control ingredient-unit" placeholder="Unité"></div>
                <div class="col-md-3"><input type="text" name="ingredients[0][note]" class="form-control" placeholder="Note"></div>
                <div class="col-md-1"><button type="button" class="btn-icon-sm danger btn-remove-ingredient"><i class="bi bi-trash"></i></button></div>
            </div>
            {% endfor %}
        </div>
        <button type="button" id="add-ingredient" class="btn-ghost mt-2" style="padding:6px 14px;font-size:12.5px;">
            <i class="bi bi-plus"></i> Ajouter un ingrédient
        </button>
    </div>
</div>

{# ── ÉTAPES ── #}
<div class="section-card">
    <div class="section-header"><i class="bi bi-list-ol" style="color:var(--petrol);"></i> Étapes de préparation</div>
    <div class="section-body">
        <div id="steps-list">
            {% for i, step in recipe.steps %}
            <div class="step-row mb-3 p-3" style="border:1.5px solid var(--cream-border);border-radius:10px;background:var(--cream);">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="step-number" style="font-family:'Lora',serif;font-size:14px;font-weight:600;color:var(--petrol);">Étape {{ i + 1 }}</span>
                    <button type="button" class="btn-icon-sm danger btn-remove-step"><i class="bi bi-trash"></i></button>
                </div>
                <textarea name="steps[{{ i }}][instruction]" class="form-control mb-2"
                          rows="2" placeholder="Description de l'étape *">{{ step.instruction }}</textarea>
                <div class="row g-2 mb-2">
                    <div class="col-md-4">
                        <input type="number" name="steps[{{ i }}][duration]" class="form-control"
                               placeholder="Durée (min)" value="{{ step.duration }}">
                    </div>
                    <div class="col-md-8">
                        <input type="text" name="steps[{{ i }}][note]" class="form-control"
                               placeholder="Astuce ou note" value="{{ step.note }}">
                    </div>
                </div>
                <div class="row g-2">
                    <div class="col-md-6">
                        <select name="steps[{{ i }}][sub_recipe_id]" class="form-select form-select-sm">
                            <option value="">— Aucune sous-recette —</option>
                            {% for r in availableRecipes %}
                                <option value="{{ r.id }}" {% if step.subRecipe and step.subRecipe.id == r.id %}selected{% endif %}>
                                    {{ r.title }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        {% if step.photos is not empty %}
                        <div class="d-flex gap-1 flex-wrap mb-2">
                            {% for photo in step.photos %}
                            <div>
                                <img src="{{ asset('uploads/recipes/' ~ photo.filePath) }}"
                                     style="height:40px;width:40px;object-fit:cover;border-radius:6px;border:1.5px solid var(--cream-border);">
                                <div style="display:flex;align-items:center;gap:4px;margin-top:3px;">
                                    <input type="checkbox" name="delete_step_photos[]"
                                           value="{{ photo.id }}" id="del_sp_{{ photo.id }}"
                                           style="accent-color:var(--diff-hard);">
                                    <label for="del_sp_{{ photo.id }}"
                                           style="font-size:11px;color:var(--diff-hard);cursor:pointer;">Suppr.</label>
                                </div>
                            </div>
                            {% endfor %}
                        </div>
                        {% endif %}
                        <input type="file" name="step_photos[{{ i }}][]"
                               class="form-control form-control-sm" multiple accept="image/*">
                    </div>
                </div>
            </div>
            {% else %}
            <div class="step-row mb-3 p-3" style="border:1.5px solid var(--cream-border);border-radius:10px;background:var(--cream);">
                <div class="d-flex justify-content-between align-items-center mb-2">
                    <span class="step-number" style="font-family:'Lora',serif;font-size:14px;font-weight:600;color:var(--petrol);">Étape 1</span>
                    <button type="button" class="btn-icon-sm danger btn-remove-step"><i class="bi bi-trash"></i></button>
                </div>
                <textarea name="steps[0][instruction]" class="form-control mb-2" rows="2" placeholder="Description de l'étape *"></textarea>
                <div class="row g-2 mb-2">
                    <div class="col-md-4"><input type="number" name="steps[0][duration]" class="form-control" placeholder="Durée (min)"></div>
                    <div class="col-md-8"><input type="text" name="steps[0][note]" class="form-control" placeholder="Astuce ou note"></div>
                </div>
                <div class="row g-2">
                    <div class="col-md-6">
                        <select name="steps[0][sub_recipe_id]" class="form-select form-select-sm">
                            <option value="">— Aucune sous-recette —</option>
                            {% for r in availableRecipes %}<option value="{{ r.id }}">{{ r.title }}</option>{% endfor %}
                        </select>
                    </div>
                    <div class="col-md-6">
                        <input type="file" name="step_photos[0][]" class="form-control form-control-sm" multiple accept="image/*">
                    </div>
                </div>
            </div>
            {% endfor %}
        </div>
        <button type="button" id="add-step" class="btn-ghost mt-2" style="padding:6px 14px;font-size:12.5px;">
            <i class="bi bi-plus"></i> Ajouter une étape
        </button>
    </div>
</div>

{# ── PHOTOS RECETTE ── #}
<div class="section-card">
    <div class="section-header"><i class="bi bi-images" style="color:var(--petrol);"></i> Photos de la recette</div>
    <div class="section-body">
        {% if recipe.photos is not empty %}
        <div class="d-flex gap-2 flex-wrap mb-3">
            {% for photo in recipe.photos %}
            <div>
                <img src="{{ asset('uploads/recipes/' ~ photo.filePath) }}"
                     style="height:80px;width:80px;object-fit:cover;border-radius:8px;border:1.5px solid var(--cream-border);">
                <div style="display:flex;align-items:center;gap:4px;margin-top:4px;">
                    <input type="checkbox" name="delete_photos[]" value="{{ photo.id }}"
                           id="del_{{ photo.id }}" style="accent-color:var(--diff-hard);">
                    <label for="del_{{ photo.id }}"
                           style="font-size:11px;color:var(--diff-hard);cursor:pointer;">Supprimer</label>
                </div>
            </div>
            {% endfor %}
        </div>
        {% endif %}
        <label style="font-size:13px;font-weight:500;color:var(--text-mid);margin-bottom:5px;display:block;">
            Ajouter des photos
        </label>
        <input type="file" name="photos[]" class="form-control" multiple accept="image/*">
        <div style="font-size:12px;color:var(--text-light);margin-top:6px;">
            <i class="bi bi-info-circle"></i> La première photo sera la photo de couverture.
        </div>
    </div>
</div>

{# ── SOURCE ── #}
<div class="section-card">
    <div class="section-header"><i class="bi bi-link-45deg" style="color:var(--petrol);"></i> Source <span style="font-weight:400;font-size:13px;color:var(--text-light);">(optionnel)</span></div>
    <div class="section-body">
        <div class="row g-3">
            <div class="col-md-6">{{ form_row(form.sourceUrl) }}</div>
            <div class="col-md-6">{{ form_row(form.sourceLabel) }}</div>
        </div>
    </div>
</div>

{# ── ACTIONS ── #}
<div class="d-flex gap-2 mb-5">
    <button type="submit" class="btn-petrol" style="padding:10px 24px;font-size:14px;">
        <i class="bi bi-check-lg"></i> Enregistrer les modifications
    </button>
    <a href="{{ path('app_recipe_show', {id: recipe.id}) }}" class="btn-ghost" style="padding:10px 20px;font-size:14px;">Annuler</a>
</div>

{{ form_end(form) }}
</div>
</div>
{% endblock %}

{% block javascripts %}
<script>
const availableRecipesOptions = `{% for r in availableRecipes %}<option value="{{ r.id }}">{{ r.title }}</option>{% endfor %}`;
const autocompleteUrl = '{{ path('app_ingredient_reference_autocomplete') }}';
let ingredientCount = {{ recipe.ingredients|length ?: 1 }};
let stepCount = {{ recipe.steps|length ?: 1 }};

function buildIngredientRow(index, nameValue = '', quantityValue = '', unitValue = '', noteValue = '') {
    const div = document.createElement('div');
    div.className = 'ingredient-row row g-2 mb-2 align-items-center';
    div.innerHTML = `
        <div class="col-md-4">
            <div class="ingredient-autocomplete position-relative">
                <div class="input-group">
                    <span class="input-group-text ingredient-photo-preview p-1" style="background:var(--cream-dark);border-color:var(--cream-border);">
                        <div class="rounded d-flex align-items-center justify-content-center" style="width:28px;height:28px;">
                            <i class="bi bi-search" style="color:var(--text-light);font-size:12px;"></i>
                        </div>
                    </span>
                    <input type="text" class="form-control ingredient-search" placeholder="Rechercher un ingrédient..." value="${nameValue}">
                </div>
                <input type="hidden" name="ingredients[${index}][name]" class="ingredient-name-hidden" value="${nameValue}">
                <div class="autocomplete-dropdown list-group position-absolute w-100 shadow" style="z-index:1000;display:none;max-height:200px;overflow-y:auto;top:100%;border-radius:8px;"></div>
            </div>
        </div>
        <div class="col-md-2"><input type="text" name="ingredients[${index}][quantity]" class="form-control" placeholder="Qté" value="${quantityValue}"></div>
        <div class="col-md-2"><input type="text" name="ingredients[${index}][unit]" class="form-control ingredient-unit" placeholder="Unité" value="${unitValue}"></div>
        <div class="col-md-3"><input type="text" name="ingredients[${index}][note]" class="form-control" placeholder="Note" value="${noteValue}"></div>
        <div class="col-md-1"><button type="button" class="btn-icon-sm danger btn-remove-ingredient"><i class="bi bi-trash"></i></button></div>
    `;
    initAutocomplete(div);
    return div;
}

function initAutocomplete(row) {
    const searchInput = row.querySelector('.ingredient-search');
    const hiddenInput = row.querySelector('.ingredient-name-hidden');
    const dropdown    = row.querySelector('.autocomplete-dropdown');
    const preview     = row.querySelector('.ingredient-photo-preview');
    const unitInput   = row.querySelector('.ingredient-unit');
    let debounceTimer;

    searchInput.addEventListener('input', function() {
        const q = this.value.trim();
        hiddenInput.value = q;
        clearTimeout(debounceTimer);
        if (q.length < 2) { dropdown.style.display = 'none'; return; }
        debounceTimer = setTimeout(async () => {
            const res  = await fetch(autocompleteUrl + '?q=' + encodeURIComponent(q));
            const data = await res.json();
            dropdown.innerHTML = '';
            if (!data.length) { dropdown.style.display = 'none'; return; }
            data.forEach(item => {
                const btn = document.createElement('button');
                btn.type = 'button';
                btn.className = 'list-group-item list-group-item-action d-flex align-items-center gap-2 py-1';
                btn.style.fontSize = '13px';
                btn.innerHTML = `
                    ${item.photoPath ? `<img src="${item.photoPath}" class="rounded" style="width:28px;height:28px;object-fit:cover;">` : `<div class="rounded d-flex align-items-center justify-content-center" style="width:28px;height:28px;background:var(--cream-dark);"><i class="bi bi-basket" style="color:var(--text-light);font-size:12px;"></i></div>`}
                    <span class="flex-grow-1">${item.name}</span>
                    ${item.defaultUnit ? `<small style="color:var(--text-light);">${item.defaultUnit}</small>` : ''}
                    <span style="font-size:10px;padding:2px 7px;border-radius:8px;
                                 background:${item.type === 'principal' ? 'rgba(58,140,110,0.15)' : 'rgba(201,124,42,0.15)'};
                                 color:${item.type === 'principal' ? '#2a6e50' : '#8a4a0a'};">
                        ${item.type === 'principal' ? 'P' : 'A'}
                    </span>`;
                btn.addEventListener('click', () => {
                    searchInput.value = item.name;
                    hiddenInput.value = item.name;
                    if (item.defaultUnit && unitInput.value === '') unitInput.value = item.defaultUnit;
                    preview.innerHTML = item.photoPath
                        ? `<img src="${item.photoPath}" class="rounded" style="width:28px;height:28px;object-fit:cover;">`
                        : `<div class="rounded d-flex align-items-center justify-content-center" style="width:28px;height:28px;"><i class="bi bi-basket" style="color:var(--text-light);font-size:12px;"></i></div>`;
                    dropdown.style.display = 'none';
                });
                dropdown.appendChild(btn);
            });
            dropdown.style.display = 'block';
        }, 250);
    });

    document.addEventListener('click', e => { if (!row.contains(e.target)) dropdown.style.display = 'none'; });
}

document.querySelectorAll('.ingredient-row').forEach(row => initAutocomplete(row));

document.getElementById('add-ingredient').addEventListener('click', () => {
    document.getElementById('ingredients-list').appendChild(buildIngredientRow(ingredientCount++));
});

document.getElementById('add-step').addEventListener('click', () => {
    const div = document.createElement('div');
    div.className = 'step-row mb-3 p-3';
    div.style.cssText = 'border:1.5px solid var(--cream-border);border-radius:10px;background:var(--cream);';
    div.innerHTML = `
        <div class="d-flex justify-content-between align-items-center mb-2">
            <span class="step-number" style="font-family:'Lora',serif;font-size:14px;font-weight:600;color:var(--petrol);">Étape ${stepCount + 1}</span>
            <button type="button" class="btn-icon-sm danger btn-remove-step"><i class="bi bi-trash"></i></button>
        </div>
        <textarea name="steps[${stepCount}][instruction]" class="form-control mb-2" rows="2" placeholder="Description de l'étape *"></textarea>
        <div class="row g-2 mb-2">
            <div class="col-md-4"><input type="number" name="steps[${stepCount}][duration]" class="form-control" placeholder="Durée (min)"></div>
            <div class="col-md-8"><input type="text" name="steps[${stepCount}][note]" class="form-control" placeholder="Astuce ou note"></div>
        </div>
        <div class="row g-2">
            <div class="col-md-6">
                <select name="steps[${stepCount}][sub_recipe_id]" class="form-select form-select-sm">
                    <option value="">— Aucune sous-recette —</option>
                    ${availableRecipesOptions}
                </select>
            </div>
            <div class="col-md-6">
                <input type="file" name="step_photos[${stepCount}][]" class="form-control form-control-sm" multiple accept="image/*">
            </div>
        </div>`;
    document.getElementById('steps-list').appendChild(div);
    stepCount++;
});

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