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

{% block title %}Recettes{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-4">
    <div>
        <h1 class="h3 fw-bold page-title mb-0"><i class="fas fa-book me-2"></i>Recettes</h1>
        <small class="text-muted">{{ total }} recette{{ total != 1 ? 's' : '' }}</small>
    </div>
    <div class="d-flex gap-2">
        <button class="btn btn-outline-success" data-bs-toggle="modal" data-bs-target="#modalImportWeb">
            <i class="fas fa-globe me-1"></i>Importer du web
        </button>
        <a href="{{ path('tenant_recettes_new') }}" class="btn btn-primary">
            <i class="fas fa-plus me-1"></i>Nouvelle recette
        </a>
    </div>
</div>

{# ── Filtres ──────────────────────────────────────────────────────────────── #}
<form method="get" class="card border-0 shadow-sm rounded-3 mb-3">
    <div class="card-body py-2 px-3 d-flex gap-2 flex-wrap align-items-center">
        <a href="{{ path('tenant_recettes_index') }}"
           class="btn btn-sm {{ categorie == '' and search == '' ? 'btn-primary' : 'btn-outline-secondary' }}">Toutes</a>
        {% set labels = {'entree': 'Entrée', 'plat': 'Plat', 'accompagnement': 'Accompagnement', 'laitage': 'Laitage', 'dessert': 'Dessert'} %}
        {% for cat in categories %}
            <a href="{{ path('tenant_recettes_index', {categorie: cat}) }}"
               class="btn btn-sm {{ categorie == cat ? 'btn-primary' : 'btn-outline-secondary' }}">
               {{ labels[cat] ?? cat|capitalize }}</a>
        {% endfor %}
        <div class="ms-auto d-flex gap-2">
            <input type="text" name="search" value="{{ search }}" class="form-control form-control-sm"
                   placeholder="Rechercher…" style="width:180px">
            {% if categorie %}<input type="hidden" name="categorie" value="{{ categorie }}">{% endif %}
            <button class="btn btn-sm btn-outline-primary"><i class="fas fa-search"></i></button>
        </div>
    </div>
</form>

{# ── Grille ───────────────────────────────────────────────────────────────── #}
{% if recettes is empty %}
    <div class="card border-0 shadow-sm">
        <div class="card-body text-center py-5 text-muted">
            <i class="fas fa-book fa-2x mb-3 d-block"></i>
            Aucune recette trouvée
        </div>
    </div>
{% else %}
    <div class="row row-cols-1 row-cols-md-2 row-cols-xl-3 g-3">
        {% for r in recettes %}
        {% set allergenes = [] %}
        {% for a in ['gluten','crustaces','oeufs','poisson','arachides','soja','lactose','fruits_coque','celeri','moutarde','sesame','sulfites','lupin','mollusques'] %}
            {% if attribute(r, 'contient_' ~ a) %}
                {% set allergenes = allergenes|merge([a|replace({'_': ' '})|capitalize]) %}
            {% endif %}
        {% endfor %}
        <div class="col">
            <div class="card border-0 shadow-sm h-100">
                <div class="card-body">
                    <div class="d-flex justify-content-between align-items-start">
                        <h5 class="card-title fw-semibold mb-1">{{ r.nom }}</h5>
                        {% set catColors = {'entree': 'info', 'plat': 'primary', 'accompagnement': 'secondary', 'laitage': 'light', 'dessert': 'warning'} %}
                        <span class="badge bg-{{ catColors[r.categorie] ?? 'secondary' }} text-dark ms-2">
                            {{ labels[r.categorie] ?? (r.categorie ?: '—') }}
                        </span>
                    </div>
                    <div class="small text-muted mb-2">{{ r.portions_base }} portion{{ r.portions_base != 1 ? 's' : '' }} de base</div>
                    {% if allergenes is not empty %}
                        <div class="mb-2">
                            <i class="fas fa-exclamation-triangle text-warning me-1"></i>
                            <small class="text-warning fw-semibold">{{ allergenes|join(', ') }}</small>
                        </div>
                    {% endif %}
                    {% if r.instructions %}
                        <p class="small text-muted mb-0" style="display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden">{{ r.instructions }}</p>
                    {% endif %}
                </div>
                <div class="card-footer bg-transparent border-top-0 d-flex justify-content-end gap-2 pb-3">
                    <a href="{{ path('tenant_recettes_edit', {id: r.id}) }}" class="btn btn-sm btn-outline-secondary">
                        <i class="fas fa-pencil-alt me-1"></i>Modifier
                    </a>
                    <form method="post" action="{{ path('tenant_recettes_delete', {id: r.id}) }}" class="d-inline"
                          onsubmit="return confirm('Supprimer cette recette ?')">
                        <input type="hidden" name="_token" value="{{ csrf_token('recette_delete_' ~ r.id) }}">
                        <button class="btn btn-sm btn-outline-danger"><i class="fas fa-trash"></i></button>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
{% endif %}

{# ── Modal import du web ──────────────────────────────────────────────────── #}
<div class="modal fade" id="modalImportWeb" tabindex="-1" aria-labelledby="modalImportWebLabel" aria-hidden="true">
    <div class="modal-dialog modal-xl modal-dialog-scrollable">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="modalImportWebLabel">
                    <i class="fas fa-globe me-2 text-success"></i>Importer une recette depuis le web
                </h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                {# Barre de recherche #}
                <div class="input-group mb-3">
                    <input type="text" id="importWebSearchInput" class="form-control"
                           placeholder="Entrez un plat en français ou anglais (ex: poulet curry, spaghetti…)" maxlength="100">
                    <button class="btn btn-success" id="importWebSearchBtn" type="button">
                        <i class="fas fa-search me-1"></i>Rechercher
                    </button>
                </div>
                <p class="text-muted small mb-3"><i class="fas fa-info-circle me-1"></i>Les recettes sont récupérées depuis <strong>TheMealDB</strong> et traduites automatiquement en français.</p>

                {# États #}
                <div id="importWebLoading" class="text-center py-4" style="display:none">
                    <div class="spinner-border text-success"></div>
                    <p class="text-muted mt-2">Recherche et traduction en cours…</p>
                </div>
                <div id="importWebError" class="alert alert-danger" style="display:none"></div>
                <div id="importWebEmpty" class="text-center text-muted py-4" style="display:none">
                    <i class="fas fa-search-minus fa-2x mb-2 d-block"></i>Aucune recette trouvée. Essayez un autre terme.
                </div>

                {# Résultats #}
                <div id="importWebResults" class="row g-3"></div>
            </div>
        </div>
    </div>
</div>

{# Toast confirmation import #}
<div class="position-fixed bottom-0 end-0 p-3" style="z-index:9999">
    <div id="importToast" class="toast align-items-center text-bg-success border-0" role="alert">
        <div class="d-flex">
            <div class="toast-body" id="importToastMsg">Recette importée avec succès !</div>
            <button type="button" class="btn-close btn-close-white me-2 m-auto" data-bs-dismiss="toast"></button>
        </div>
    </div>
</div>

<script>
(function () {
    const searchInput  = document.getElementById('importWebSearchInput');
    const searchBtn    = document.getElementById('importWebSearchBtn');
    const loading      = document.getElementById('importWebLoading');
    const errorDiv     = document.getElementById('importWebError');
    const emptyDiv     = document.getElementById('importWebEmpty');
    const resultsDiv   = document.getElementById('importWebResults');
    const csrfToken    = '{{ csrf_token('recette_import_web') }}';
    const urlSearch    = '{{ path('tenant_recettes_suggestions_web') }}';
    const urlImport    = '{{ path('tenant_recettes_import_web') }}';

    const catLabels = { entree: 'Entrée', plat: 'Plat', accompagnement: 'Accompagnement', laitage: 'Laitage', dessert: 'Dessert' };
    const catColors = { entree: 'info', plat: 'primary', accompagnement: 'secondary', dessert: 'warning' };

    function showState(state) {
        loading.style.display    = state === 'loading' ? '' : 'none';
        errorDiv.style.display   = state === 'error'   ? '' : 'none';
        emptyDiv.style.display   = state === 'empty'   ? '' : 'none';
        if (state !== 'results') resultsDiv.innerHTML = '';
    }

    async function doSearch() {
        const q = searchInput.value.trim();
        if (q.length < 2) { searchInput.focus(); return; }
        showState('loading');

        try {
            const resp = await fetch(urlSearch + '?q=' + encodeURIComponent(q));
            const data = await resp.json();

            if (!resp.ok) { showState('error'); errorDiv.textContent = data.error || 'Erreur serveur'; return; }
            if (!data.meals || data.meals.length === 0) { showState('empty'); return; }

            showState('results');
            resultsDiv.innerHTML = data.meals.map((m, idx) => `
                <div class="col-12 col-md-6">
                    <div class="card border-0 shadow-sm h-100">
                        <div class="row g-0 h-100">
                            ${m.thumb ? `<div class="col-4"><img src="${m.thumb}/preview" class="img-fluid rounded-start h-100" style="object-fit:cover" alt="${escHtml(m.nom)}"></div>` : ''}
                            <div class="${m.thumb ? 'col-8' : 'col-12'}">
                                <div class="card-body p-3">
                                    <div class="d-flex justify-content-between align-items-start mb-1">
                                        <h6 class="card-title fw-semibold mb-0">${escHtml(m.nom)}</h6>
                                        <span class="badge bg-${catColors[m.categorie] ?? 'secondary'} text-dark ms-2">${catLabels[m.categorie] ?? m.categorie}</span>
                                    </div>
                                    <p class="text-muted small mb-0"><em>${escHtml(m.nom_original)}</em></p>
                                    <div class="mt-2 small text-muted">
                                        ${m.ingredients.slice(0,5).map(i => escHtml(i.ingredient + (i.mesure ? ' (' + i.mesure + ')' : ''))).join(', ')}
                                        ${m.ingredients.length > 5 ? `<em> + ${m.ingredients.length - 5} autres</em>` : ''}
                                    </div>
                                </div>
                                <div class="card-footer bg-transparent border-top-0 pb-3 pe-3 d-flex justify-content-end">
                                    <button class="btn btn-sm btn-success" onclick="importRecette(${idx})"
                                            data-idx="${idx}">
                                        <i class="fas fa-download me-1"></i>Importer
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>`).join('');

            // Stocker les données pour l'import
            window._importMeals = data.meals;

        } catch (e) {
            showState('error');
            errorDiv.textContent = 'Erreur de connexion. Vérifiez votre accès internet.';
        }
    }

    window.importRecette = async function (idx) {
        const meal = window._importMeals?.[idx];
        if (!meal) return;

        const btn = resultsDiv.querySelector(`[data-idx="${idx}"]`);
        if (btn) { btn.disabled = true; btn.innerHTML = '<span class="spinner-border spinner-border-sm"></span>'; }

        const body = new URLSearchParams({
            _token:         csrfToken,
            nom:            meal.nom,
            nom_original:   meal.nom_original,
            categorie:      meal.categorie,
            instructions_en:meal.instructions_en,
            ingredients:    JSON.stringify(meal.ingredients),
        });

        try {
            const resp = await fetch(urlImport, { method: 'POST', body });
            const data = await resp.json();

            if (data.success) {
                if (btn) { btn.innerHTML = '<i class="fas fa-check me-1"></i>Importée'; btn.classList.replace('btn-success', 'btn-outline-success'); }
                const toast = new bootstrap.Toast(document.getElementById('importToast'));
                document.getElementById('importToastMsg').textContent = `"${data.nom}" importée avec succès !`;
                toast.show();
            } else {
                if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fas fa-download me-1"></i>Importer'; }
                alert(data.error || 'Erreur lors de l\'import');
            }
        } catch (e) {
            if (btn) { btn.disabled = false; btn.innerHTML = '<i class="fas fa-download me-1"></i>Importer'; }
            alert('Erreur de connexion.');
        }
    };

    function escHtml(str) {
        return String(str).replace(/&/g,'&amp;').replace(/</g,'&lt;').replace(/>/g,'&gt;').replace(/"/g,'&quot;');
    }

    searchBtn.addEventListener('click', doSearch);
    searchInput.addEventListener('keydown', e => { if (e.key === 'Enter') doSearch(); });

    // Vider la recherche à la fermeture du modal
    document.getElementById('modalImportWeb').addEventListener('hidden.bs.modal', () => {
        searchInput.value = '';
        showState('idle');
    });
})();
</script>
{% endblock %}