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

{% block title %}Plan Alimentaire — Configuration{% endblock %}

{% block body %}
<div class="container-fluid py-3">

    <div class="d-flex justify-content-between align-items-center mb-3">
        <div>
            <h1 class="h3 mb-0"><i class="fas fa-cog me-2"></i>Configuration du Plan Alimentaire</h1>
            <small class="text-muted">Gérez les catégories, seuils et mots-clés de détection automatique</small>
        </div>
        <a href="{{ path('tenant_plan_alimentaire_index') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-arrow-left me-1"></i>Retour à l'analyse
        </a>
    </div>

    <div class="alert alert-info py-2 mb-3">
        <i class="fas fa-info-circle me-1"></i>
        Les mots-clés sont détectés automatiquement dans les noms de plats des menus.
        <strong>Type de plat :</strong> restreint la détection à un type de composante (entrée, plat, etc.) ou <em>Tous</em> pour tout chercher.
    </div>

    <div id="flash-zone"></div>

    {% for groupeNom, cats in groupes %}
    <div class="card mb-4 shadow-sm">
        <div class="card-header py-2 fw-bold">
            <i class="fas fa-layer-group me-2 text-primary"></i>{{ groupeNom }}
        </div>
        <div class="card-body p-0">
            {% for cat in cats %}
            <div class="border-bottom p-3 {% if not cat.actif %}opacity-50{% endif %}">
                <div class="d-flex align-items-start justify-content-between mb-2">
                    <div>
                        <span class="fw-semibold">{{ cat.label }}</span>
                        {% if cat.description %}
                        <small class="text-muted ms-2">— {{ cat.description }}</small>
                        {% endif %}
                    </div>
                    <div class="d-flex align-items-center gap-2">
                        {# Seuil min/max #}
                        {% if cat.maximum > 0 and (cat.minimum is null or cat.minimum == 0) %}
                        <span class="badge bg-warning text-dark">Max : {{ cat.maximum }}/20</span>
                        {% else %}
                        <span class="badge bg-success">Min : {{ cat.minimum }}/20</span>
                        {% endif %}
                        {# Bouton modifier seuil #}
                        <button type="button" class="btn btn-outline-secondary btn-sm"
                                data-bs-toggle="collapse" data-bs-target="#seuil-{{ cat.id }}"
                                title="Modifier les seuils">
                            <i class="fas fa-sliders-h"></i>
                        </button>
                    </div>
                </div>

                {# Formulaire seuils (collapsé) #}
                <div class="collapse mb-2" id="seuil-{{ cat.id }}">
                    <div class="card card-body py-2 bg-light">
                        <form class="row g-2 align-items-end" onsubmit="sauvegarderSeuil(event, {{ cat.id }})">
                            <input type="hidden" name="_token" value="{{ csrf_token('plan_categorie_' ~ cat.id) }}">
                            <div class="col-auto">
                                <label class="form-label small mb-0">Minimum (sur 20 repas)</label>
                                <input type="number" class="form-control form-control-sm" name="minimum" min="0" max="20"
                                       value="{{ cat.minimum ?? 0 }}" style="width: 80px;">
                            </div>
                            <div class="col-auto">
                                <label class="form-label small mb-0">Maximum (laisser vide si aucun)</label>
                                <input type="number" class="form-control form-control-sm" name="maximum" min="0" max="20"
                                       value="{{ cat.maximum ?? '' }}" placeholder="—" style="width: 80px;">
                            </div>
                            <div class="col-auto">
                                <button type="submit" class="btn btn-primary btn-sm">
                                    <i class="fas fa-save me-1"></i>Sauvegarder
                                </button>
                            </div>
                        </form>
                    </div>
                </div>

                {# Mots-clés existants #}
                <div class="d-flex flex-wrap gap-1 mb-2" id="mots-cles-{{ cat.id }}">
                    {% for mk in cat.mots_cles %}
                    <span class="badge bg-secondary d-inline-flex align-items-center gap-1" id="mc-{{ mk.id }}">
                        <span class="text-warning" title="{{ mk.type_plat }}">
                            {% if mk.type_plat == 'entree' %}E{% elseif mk.type_plat == 'plat' %}P{% elseif mk.type_plat == 'accompagnement' %}A{% elseif mk.type_plat == 'laitage' %}L{% elseif mk.type_plat == 'dessert' %}D{% else %}*{% endif %}
                        </span>
                        {{ mk.mot_cle }}
                        <button type="button" class="btn-close btn-close-white" style="font-size: 0.6em;"
                                onclick="supprimerMotCle({{ mk.id }}, '{{ csrf_token('plan_delete_mot_cle_' ~ mk.id) }}')"
                                title="Supprimer"></button>
                    </span>
                    {% endfor %}
                </div>

                {# Formulaire ajout mot-clé #}
                <form class="d-flex gap-2 align-items-center" onsubmit="ajouterMotCle(event, {{ cat.id }})">
                    <input type="hidden" name="_token" value="{{ csrf_token('plan_mot_cle_' ~ cat.id) }}" class="csrf-token">
                    <select name="type_plat" class="form-select form-select-sm" style="width: 140px;" title="Type de plat">
                        <option value="tous">Tous types</option>
                        <option value="entree">Entrée</option>
                        <option value="plat">Plat</option>
                        <option value="accompagnement">Accompagnement</option>
                        <option value="laitage">Laitage</option>
                        <option value="dessert">Dessert</option>
                    </select>
                    <input type="text" name="mot_cle" class="form-control form-control-sm" placeholder="Ajouter un mot-clé..." style="max-width: 220px;" required>
                    <button type="submit" class="btn btn-success btn-sm">
                        <i class="fas fa-plus"></i>
                    </button>
                </form>
            </div>
            {% endfor %}
        </div>
    </div>
    {% endfor %}

</div>

<script>
const URLS = {
    addMotCle:    (catId) => `/app/plan-alimentaire/configuration/categorie/${catId}/mot-cle`,
    deleteMotCle: (mkId)  => `/app/plan-alimentaire/configuration/mot-cle/${mkId}`,
    updateCat:    (catId) => `/app/plan-alimentaire/configuration/categorie/${catId}`,
};

function showFlash(type, msg) {
    const zone = document.getElementById('flash-zone');
    zone.innerHTML = `<div class="alert alert-${type} alert-dismissible py-2"><i class="fas fa-${type === 'success' ? 'check' : 'exclamation-triangle'} me-1"></i>${msg}<button type="button" class="btn-close" data-bs-dismiss="alert"></button></div>`;
    setTimeout(() => zone.innerHTML = '', 4000);
}

async function ajouterMotCle(e, catId) {
    e.preventDefault();
    const form     = e.target;
    const body     = new FormData(form);

    const res  = await fetch(URLS.addMotCle(catId), { method: 'POST', body });
    const data = await res.json();

    if (data.success) {
        const token   = '{{ csrf_token("plan_delete_mot_cle_0") }}'.replace('0', data.id);
        const lettre  = {tous:'*', entree:'E', plat:'P', accompagnement:'A', laitage:'L', dessert:'D'}[data.type_plat] || '*';
        const badge   = `<span class="badge bg-secondary d-inline-flex align-items-center gap-1" id="mc-${data.id}">
            <span class="text-warning">${lettre}</span>
            ${data.mot_cle}
            <button type="button" class="btn-close btn-close-white" style="font-size:0.6em;"
                    onclick="supprimerMotCle(${data.id}, '${data.csrf ?? ''}')" title="Supprimer"></button>
        </span>`;
        document.getElementById('mots-cles-' + catId).insertAdjacentHTML('beforeend', badge);
        // Recharger pour CSRF frais
        showFlash('success', 'Mot-clé ajouté.');
        form.querySelector('[name="mot_cle"]').value = '';
    } else {
        showFlash('danger', data.message || 'Erreur.');
    }
}

async function supprimerMotCle(id, token) {
    if (!confirm('Supprimer ce mot-clé ?')) return;
    const body = new FormData();
    body.append('_token', token);

    const res  = await fetch(URLS.deleteMotCle(id), { method: 'POST', body });
    const data = await res.json();

    if (data.success) {
        const el = document.getElementById('mc-' + id);
        if (el) el.remove();
        showFlash('success', 'Mot-clé supprimé.');
    } else {
        showFlash('danger', data.message || 'Erreur.');
    }
}

async function sauvegarderSeuil(e, catId) {
    e.preventDefault();
    const form = e.target;
    const body = new FormData(form);

    const res  = await fetch(URLS.updateCat(catId), { method: 'POST', body });
    const data = await res.json();

    if (data.success) {
        showFlash('success', 'Seuils mis à jour. Rechargement...');
        setTimeout(() => location.reload(), 1200);
    } else {
        showFlash('danger', data.message || 'Erreur.');
    }
}
</script>
{% endblock %}