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

{% block title %}Mes recettes{% endblock %}

{% block body %}

<form method="post" action="{{ path('app_export') }}" id="export-form">

{# ── EN-TÊTE ── #}
<div class="d-flex justify-content-between align-items-center mb-4 flex-wrap gap-3">
    <h1 class="page-title">
        Mes recettes
        <small>{{ recipes|length }} recette{{ recipes|length > 1 ? 's' : '' }}</small>
    </h1>
    <div class="d-flex gap-2 flex-wrap">
        <button type="submit" class="btn-ghost" id="btn-export" disabled>
            <i class="bi bi-download"></i> Exporter
        </button>
        <button type="button" class="btn-ghost" id="btn-delete-selection" disabled
                onclick="deleteSelection()" style="color:var(--danger-r);border-color:var(--danger-r);">
            <i class="bi bi-trash"></i> Supprimer
        </button>
        <a href="{{ path('app_import_zip') }}" class="btn-ghost">
            <i class="bi bi-upload"></i> Importer
        </a>
        <a href="{{ path('app_recipe_new') }}" class="btn-petrol">
            <i class="bi bi-plus-lg"></i> Nouvelle recette
        </a>
    </div>
</div>

{# ── FILTRES CATÉGORIES ── #}
<div class="d-flex gap-2 flex-wrap mb-3">
    <a href="{{ path('app_recipe_index') }}"
       class="cat-pill {% if not app.request.query.get('category') and not ingredientsRaw %}active{% endif %}">
        <i class="bi bi-grid-3x3-gap"></i> Toutes
    </a>
    {% for category in categories %}
    <a href="{{ path('app_recipe_index', {category: category.id}) }}"
       class="cat-pill {% if app.request.query.get('category') == (category.id ~ '') %}active{% endif %}">
        {% if category.icon %}<i class="bi {{ category.icon }}"></i>{% endif %}
        {{ category.name }}
    </a>
    {% endfor %}
</div>

{# ── FILTRE INGRÉDIENTS ── #}
<div class="mb-4" style="background:var(--warm-white);border:1.5px solid var(--cream-border);border-radius:12px;padding:14px 18px;">
    <div class="d-flex align-items-center gap-2 mb-2 flex-wrap">
        <span style="font-size:12px;font-weight:500;color:var(--text-light);display:flex;align-items:center;gap:5px;">
            <i class="bi bi-basket"></i> Filtrer par ingrédients
        </span>
        <div class="d-flex ms-auto" style="border:1.5px solid var(--cream-border);border-radius:8px;overflow:hidden;">
            <button type="button" id="mode-any"
                    class="{% if searchMode == 'any' %}btn-mode-active{% else %}btn-mode{% endif %}"
                    style="padding:4px 12px;border:none;font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;{% if searchMode == 'any' %}background:var(--petrol);color:white;{% else %}background:transparent;color:var(--text-mid);{% endif %}">
                Au moins un
            </button>
            <button type="button" id="mode-all"
                    style="padding:4px 12px;border:none;border-left:1.5px solid var(--cream-border);font-size:12px;cursor:pointer;font-family:'DM Sans',sans-serif;{% if searchMode == 'all' %}background:var(--petrol);color:white;{% else %}background:transparent;color:var(--text-mid);{% endif %}">
                Tous
            </button>
        </div>
    </div>

    <div id="tag-input-container"
         style="display:flex;flex-wrap:wrap;gap:6px;align-items:center;background:white;border:1.5px solid var(--cream-border);border-radius:8px;padding:8px 12px;min-height:42px;cursor:text;">
        {% for name in ingredientNames %}
        <span style="background:var(--petrol);color:white;padding:3px 10px;border-radius:14px;font-size:12px;display:flex;align-items:center;gap:5px;" class="ingredient-tag" data-name="{{ name }}">
            {{ name }}
            <button type="button" class="btn-remove-tag" style="background:none;border:none;color:rgba(255,255,255,0.8);cursor:pointer;padding:0;line-height:1;font-size:14px;">&times;</button>
        </span>
        {% endfor %}
        <div class="position-relative flex-grow-1" style="min-width:140px;">
            <input type="text" id="ingredient-tag-input"
                   style="border:none;outline:none;background:transparent;font-size:13px;width:100%;font-family:'DM Sans',sans-serif;color:var(--text-dark);"
                   placeholder="{% if ingredientNames is empty %}Taper un ingrédient...{% endif %}"
                   autocomplete="off">
            <div id="ingredient-autocomplete-dropdown"
                 class="list-group position-absolute shadow"
                 style="z-index:1000;display:none;min-width:260px;top:100%;left:0;border-radius:10px;overflow:hidden;border:1.5px solid var(--cream-border);">
            </div>
        </div>
    </div>

    <div class="d-flex gap-2 mt-2 align-items-center flex-wrap">
        <button type="button" id="btn-do-search" class="btn-petrol" style="padding:6px 14px;font-size:12.5px;">
            <i class="bi bi-search"></i> Rechercher
        </button>
        {% if ingredientsRaw %}
        <a href="{{ path('app_recipe_index') }}" class="btn-ghost" style="padding:5px 12px;font-size:12px;">
            <i class="bi bi-x"></i> Effacer
        </a>
        <span style="font-size:12px;color:var(--text-light);">
            <i class="bi bi-funnel"></i>
            {% if searchMode == 'all' %}Tous présents{% else %}Au moins un{% endif %} :
            {% for name in ingredientNames %}
                <strong style="color:var(--petrol);">{{ name }}</strong>{% if not loop.last %}, {% endif %}
            {% endfor %}
        </span>
        {% endif %}
    </div>
</div>

{# ── LISTE RECETTES ── #}
{% if recipes is empty %}
    <div class="text-center py-5" style="background:var(--warm-white);border:1.5px solid var(--cream-border);border-radius:16px;">
        <div style="font-size:48px;margin-bottom:16px;">🍽️</div>
        {% if ingredientsRaw %}
            <p style="color:var(--text-mid);font-size:16px;">Aucune recette trouvée pour ces ingrédients.</p>
            <a href="{{ path('app_recipe_index') }}" class="btn-ghost mt-2">
                <i class="bi bi-arrow-left"></i> Voir toutes les recettes
            </a>
        {% else %}
            <p style="color:var(--text-mid);font-size:16px;">Tu n'as pas encore de recette.</p>
            <a href="{{ path('app_recipe_new') }}" class="btn-petrol mt-2">
                <i class="bi bi-plus-lg"></i> Ajouter ma première recette
            </a>
        {% endif %}
    </div>
{% else %}
    <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
        {% for recipe in recipes %}
        <div class="col">
            <div class="recipe-card-item" style="background:var(--warm-white);border:1.5px solid var(--cream-border);border-radius:14px;overflow:hidden;height:100%;display:flex;flex-direction:column;transition:transform 0.2s,box-shadow 0.2s,border-color 0.2s;">

                <div style="position:relative;">
                    <div style="position:absolute;top:10px;left:10px;z-index:2;">
                        <input type="checkbox" name="recipe_ids[]" value="{{ recipe.id }}"
                               class="recipe-checkbox"
                               style="width:18px;height:18px;cursor:pointer;accent-color:var(--petrol);border-radius:4px;">
                    </div>

                    {% set cover = recipe.coverPhoto %}
                    {% if cover %}
                        <img src="{{ asset('uploads/recipes/' ~ cover.filePath) }}"
                            alt="{{ cover.altText }}"
                            style="width:100%;height:190px;object-fit:cover;display:block;">
                    {% else %}
                        <div style="height:190px;background:linear-gradient(135deg,var(--cream-dark) 0%,var(--cream-border) 100%);display:flex;align-items:center;justify-content:center;font-size:44px;">
                            🍽️
                        </div>
                    {% endif %}

                    {# Badges catégories sur la photo #}
                    {% if recipe.categories is not empty %}
                    <div style="position:absolute;top:10px;right:10px;display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end;">
                        {% for category in recipe.categories %}
                        <span style="background:rgba(46,51,56,0.75);color:var(--cream);padding:2px 8px;border-radius:6px;font-size:10.5px;backdrop-filter:blur(4px);">
                            {% if category.icon %}<i class="bi {{ category.icon }}"></i>{% endif %}
                            {{ category.name }}
                        </span>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>

                <div style="padding:14px 16px;flex:1;">
                    <h5 style="font-family:'Lora',serif;font-size:15px;font-weight:600;color:var(--text-dark);margin-bottom:6px;line-height:1.35;">{{ recipe.title }}</h5>
                    {% if recipe.description %}
                    <p style="font-size:12.5px;color:var(--text-light);margin-bottom:10px;line-height:1.5;">
                        {{ recipe.description|slice(0, 90) }}{% if recipe.description|length > 90 %}…{% endif %}
                    </p>
                    {% endif %}
                    <div class="d-flex gap-1 flex-wrap">
                        <span class="badge-meta badge-diff-{% if recipe.difficulty == 'easy' %}easy{% elseif recipe.difficulty == 'medium' %}medium{% else %}hard{% endif %}">
                            {% if recipe.difficulty == 'easy' %}Facile{% elseif recipe.difficulty == 'medium' %}Moyen{% else %}Difficile{% endif %}
                        </span>
                        <span class="badge-meta"><i class="bi bi-clock"></i> {{ recipe.totalTime }} min</span>
                        <span class="badge-meta"><i class="bi bi-people"></i> {{ recipe.servings }} pers.</span>
                    </div>
                </div>

                <div style="padding:10px 16px;border-top:1px solid var(--cream-dark);display:flex;align-items:center;gap:8px;">
                    <a href="{{ path('app_recipe_show', {id: recipe.id}) }}" class="btn-petrol" style="padding:6px 14px;font-size:12.5px;">
                        Voir la recette
                    </a>
                    {% if app.user == recipe.author %}
                    <a href="{{ path('app_recipe_edit', {id: recipe.id}) }}"
                       class="btn-icon-sm ms-auto" title="Modifier">
                        <i class="bi bi-pencil"></i>
                    </a>
                    <form method="post" action="{{ path('app_recipe_delete', {id: recipe.id}) }}"
                          onsubmit="return confirm('Supprimer {{ recipe.title|e('js') }} ?')" style="margin:0;">
                        <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ recipe.id) }}">
                        <button type="submit" class="btn-icon-sm danger" title="Supprimer">
                            <i class="bi bi-trash"></i>
                        </button>
                    </form>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
{% endif %}

</form>

{% endblock %}

{% block stylesheets %}
<style>
.cat-pill {
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    cursor: pointer;
    border: 1.5px solid var(--cream-border);
    background: var(--warm-white);
    color: var(--text-mid);
    display: inline-flex; align-items: center; gap: 6px;
    text-decoration: none;
    transition: all 0.15s;
}
.cat-pill:hover { border-color: var(--petrol); color: var(--petrol); }
.cat-pill.active { background: var(--petrol); border-color: var(--petrol); color: white; }

.recipe-card-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 28px rgba(42,107,124,0.12);
    border-color: var(--petrol-light) !important;
}
</style>
{% endblock %}

{% block javascripts %}
<script>
// ── EXPORT + SUPPRESSION ──
document.querySelectorAll('.recipe-checkbox').forEach(cb => {
    cb.addEventListener('change', () => {
        const checked = document.querySelectorAll('.recipe-checkbox:checked').length;

        const btnExport = document.getElementById('btn-export');
        btnExport.disabled = checked === 0;
        btnExport.innerHTML = checked > 0
            ? `<i class="bi bi-download"></i> Exporter (${checked})`
            : '<i class="bi bi-download"></i> Exporter';

        const btnDelete = document.getElementById('btn-delete-selection');
        btnDelete.disabled = checked === 0;
        btnDelete.innerHTML = checked > 0
            ? `<i class="bi bi-trash"></i> Supprimer (${checked})`
            : '<i class="bi bi-trash"></i> Supprimer';
    });
});

function deleteSelection() {
    const ids = [...document.querySelectorAll('.recipe-checkbox:checked')].map(cb => cb.value);
    if (ids.length === 0) return;
    if (!confirm(`Supprimer définitivement ${ids.length} recette${ids.length > 1 ? 's' : ''} ? Cette action est irréversible.`)) return;
    const form = document.createElement('form');
    form.method = 'post';
    form.action = '{{ path("app_recipe_delete_multiple") }}';
    ids.forEach(id => {
        const input = document.createElement('input');
        input.type = 'hidden'; input.name = 'recipe_ids[]'; input.value = id;
        form.appendChild(input);
    });
    const token = document.createElement('input');
    token.type = 'hidden'; token.name = '_token';
    token.value = '{{ csrf_token("delete_multiple") }}';
    form.appendChild(token);
    document.body.appendChild(form);
    form.submit();
}

// ── RECHERCHE INGRÉDIENTS ──
const autocompleteUrl = '{{ path('app_ingredient_reference_autocomplete') }}';
const tagInput   = document.getElementById('ingredient-tag-input');
const dropdown   = document.getElementById('ingredient-autocomplete-dropdown');
const container  = document.getElementById('tag-input-container');
const btnSearch  = document.getElementById('btn-do-search');
const btnModeAny = document.getElementById('mode-any');
const btnModeAll = document.getElementById('mode-all');
let searchMode = '{{ searchMode }}';
let debounceTimer;

container.addEventListener('click', () => tagInput.focus());

btnModeAny.addEventListener('click', () => {
    searchMode = 'any';
    btnModeAny.style.background = 'var(--petrol)'; btnModeAny.style.color = 'white';
    btnModeAll.style.background = 'transparent';   btnModeAll.style.color = 'var(--text-mid)';
    if (document.querySelectorAll('.ingredient-tag').length > 0) doSearch();
});
btnModeAll.addEventListener('click', () => {
    searchMode = 'all';
    btnModeAll.style.background = 'var(--petrol)'; btnModeAll.style.color = 'white';
    btnModeAny.style.background = 'transparent';   btnModeAny.style.color = 'var(--text-mid)';
    if (document.querySelectorAll('.ingredient-tag').length > 0) doSearch();
});

tagInput.addEventListener('input', function() {
    const q = this.value.trim();
    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 === 0) { dropdown.style.display = 'none'; return; }
        data.forEach(item => {
            const existing = [...document.querySelectorAll('.ingredient-tag')].map(t => t.dataset.name.toLowerCase());
            if (existing.includes(item.name.toLowerCase())) return;
            const btn = document.createElement('button');
            btn.type = 'button';
            btn.style.cssText = 'display:flex;align-items:center;gap:8px;padding:8px 12px;background:white;border:none;width:100%;text-align:left;cursor:pointer;font-family:DM Sans,sans-serif;font-size:13px;color:var(--text-dark);transition:background 0.1s;';
            btn.onmouseover = () => btn.style.background = 'var(--cream)';
            btn.onmouseout  = () => btn.style.background = 'white';
            btn.innerHTML = `
                ${item.photoPath
                    ? `<img src="${item.photoPath}" style="width:24px;height:24px;border-radius:4px;object-fit:cover;">`
                    : `<span style="width:24px;height:24px;background:var(--cream-dark);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:11px;">🧄</span>`
                }
                <span style="flex:1;">${item.name}</span>
                <span style="font-size:10px;padding:2px 6px;border-radius:4px;background:${item.type === 'principal' ? 'var(--petrol-pale)' : 'rgba(184,110,26,0.1)'};color:${item.type === 'principal' ? 'var(--petrol-dark)' : 'var(--warning-r)'};">
                    ${item.type === 'principal' ? 'Principal' : 'Assaison.'}
                </span>
            `;
            btn.addEventListener('click', () => {
                addTag(item.name);
                tagInput.value = '';
                dropdown.style.display = 'none';
                tagInput.focus();
            });
            dropdown.appendChild(btn);
        });
        dropdown.style.display = dropdown.children.length > 0 ? 'block' : 'none';
    }, 250);
});

tagInput.addEventListener('keydown', function(e) {
    if (e.key === 'Enter') {
        e.preventDefault();
        const q = this.value.trim();
        if (q.length >= 2) { addTag(q); this.value = ''; dropdown.style.display = 'none'; }
    }
    if (e.key === 'Backspace' && this.value === '') {
        const tags = document.querySelectorAll('.ingredient-tag');
        if (tags.length > 0) tags[tags.length - 1].remove();
    }
});

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

function addTag(name) {
    const existing = [...document.querySelectorAll('.ingredient-tag')].map(t => t.dataset.name.toLowerCase());
    if (existing.includes(name.toLowerCase())) return;
    const span = document.createElement('span');
    span.style.cssText = 'background:var(--petrol);color:white;padding:3px 10px;border-radius:14px;font-size:12px;display:flex;align-items:center;gap:5px;';
    span.className = 'ingredient-tag';
    span.dataset.name = name;
    span.innerHTML = `${name}<button type="button" class="btn-remove-tag" style="background:none;border:none;color:rgba(255,255,255,0.8);cursor:pointer;padding:0;line-height:1;font-size:14px;">&times;</button>`;
    span.querySelector('.btn-remove-tag').addEventListener('click', () => span.remove());
    container.insertBefore(span, tagInput.parentElement);
}

document.querySelectorAll('.btn-remove-tag').forEach(btn => {
    btn.addEventListener('click', () => btn.closest('.ingredient-tag').remove());
});

btnSearch.addEventListener('click', doSearch);

function doSearch() {
    const tags = [...document.querySelectorAll('.ingredient-tag')].map(t => t.dataset.name);
    const current = tagInput.value.trim();
    if (current.length >= 2 && !tags.includes(current)) tags.push(current);
    if (tags.length === 0) { window.location.href = window.location.pathname; return; }
    const params = new URLSearchParams({ ingredients: tags.join(','), mode: searchMode });
    window.location.href = window.location.pathname + '?' + params.toString();
}
</script>
{% endblock %}