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

{% block title %}Nouvelle 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>Nouvelle recette</h1>
    <a href="{{ path('app_recipe_index') }}" 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">
            <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>
        </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">
            <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>
        </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 ── #}
<div class="section-card">
    <div class="section-header"><i class="bi bi-images" style="color:var(--petrol);"></i> Photos</div>
    <div class="section-body">
        <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> Tu peux sélectionner plusieurs photos. La première 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 la recette
    </button>
    <a href="{{ path('app_recipe_index') }}" 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 = 1;
let stepCount = 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(container) {
    const searchInput = container.querySelector('.ingredient-search');
    const hiddenInput = container.querySelector('.ingredient-name-hidden');
    const dropdown    = container.querySelector('.autocomplete-dropdown');
    const preview     = container.querySelector('.ingredient-photo-preview');
    const unitInput   = container.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 (!container.contains(e.target)) dropdown.style.display = 'none'; });
}

document.querySelectorAll('.ingredient-autocomplete').forEach(c => initAutocomplete(c.closest('.ingredient-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 %}