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

{% block title %}Plan Alimentaire — Analyse de conformité{% 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-apple-alt me-2 text-success"></i>Plan Alimentaire</h1>
            <small class="text-muted">Analyse de conformité — Annexe 4.2 Recommandation Nutrition</small>
        </div>
        {% if is_granted('ROLE_TENANT_ADMIN') %}
        <a href="{{ path('tenant_plan_alimentaire_config') }}" class="btn btn-outline-secondary btn-sm">
            <i class="fas fa-cog me-1"></i>Configurer
        </a>
        {% endif %}
    </div>

    {# Info repas analysés #}
    <div class="alert alert-info py-2 mb-3">
        <i class="fas fa-info-circle me-1"></i>
        Analyse basée sur les <strong>{{ nb_repas }} derniers repas</strong> enregistrés (sur 20 repas/5 semaines consécutives).
        {% if nb_repas < 20 %}
        <span class="text-warning ms-2"><i class="fas fa-exclamation-triangle"></i> Données insuffisantes — ajoutez davantage de menus pour une analyse fiable.</span>
        {% endif %}
    </div>

    {# Recommandations #}
    <div class="card mb-4 shadow-sm">
        <div class="card-header py-2 fw-bold"><i class="fas fa-clipboard-list me-2"></i>Recommandations</div>
        <div class="card-body py-2">
            {% for reco in recommandations %}
                {% if reco.type == 'success' %}
                    <div class="alert alert-success py-1 mb-1"><i class="fas fa-check-circle me-1"></i>{{ reco.message }}</div>
                {% elseif reco.type == 'warning' %}
                    <div class="alert alert-warning py-1 mb-1"><i class="fas fa-exclamation-triangle me-1"></i>{{ reco.message }}</div>
                {% else %}
                    <div class="alert alert-info py-1 mb-1"><i class="fas fa-arrow-up me-1"></i>{{ reco.message }}</div>
                {% endif %}
            {% endfor %}
        </div>
    </div>

    {# Groupes de conformité #}
    {% for groupeNom, items in groupes %}
    <div class="card mb-3 shadow-sm">
        <div class="card-header py-2 fw-bold text-white"
             style="background-color: {% if 'Fruits' in groupeNom %}#198754{% elseif 'Féculents' in groupeNom or 'Feculents' in groupeNom %}#0d6efd{% elseif 'Produits' in groupeNom %}#6f42c1{% elseif 'Matieres' in groupeNom or 'Matières' in groupeNom %}#fd7e14{% else %}#dc3545{% endif %}">
            <i class="fas fa-{% if 'Fruits' in groupeNom %}apple-alt{% elseif 'Féculents' in groupeNom or 'Feculents' in groupeNom %}bread-slice{% elseif 'Produits' in groupeNom %}cheese{% elseif 'Matieres' in groupeNom or 'Matières' in groupeNom %}exclamation-triangle{% else %}candy-cane{% endif %} me-2"></i>
            {{ groupeNom }}
        </div>
        <div class="card-body p-0">
            <div class="row g-0">
                {% for key, data in items %}
                <div class="col-md-6 col-lg-4 p-3 border-bottom border-end">
                    <div class="d-flex align-items-start justify-content-between">
                        <div class="flex-grow-1">
                            <div class="fw-semibold mb-1" style="font-size: 0.9rem;">{{ data.label }}</div>
                            {% if data.description %}
                            <small class="text-muted">{{ data.description }}</small>
                            {% endif %}
                        </div>
                        <span class="badge ms-2 fs-6 {{ data.conforme ? 'bg-success' : (data.inverse is defined and data.inverse ? 'bg-warning text-dark' : 'bg-danger') }}">
                            {{ data.valeur }}
                            {% if data.inverse is defined and data.inverse %}
                                / {{ data.maximum }} max
                            {% else %}
                                / {{ data.minimum }} min
                            {% endif %}
                        </span>
                    </div>
                    {# Barre de progression #}
                    {% if data.inverse is defined and data.inverse %}
                        {% set pct = data.maximum > 0 ? min(100, (data.valeur / data.maximum * 100)) : 0 %}
                        <div class="progress mt-2" style="height: 6px;">
                            <div class="progress-bar {{ data.conforme ? 'bg-success' : 'bg-warning' }}" style="width: {{ pct }}%"></div>
                        </div>
                    {% else %}
                        {% set pct = data.minimum > 0 ? min(100, (data.valeur / data.minimum * 100)) : 0 %}
                        <div class="progress mt-2" style="height: 6px;">
                            <div class="progress-bar {{ data.conforme ? 'bg-success' : 'bg-danger' }}" style="width: {{ pct }}%"></div>
                        </div>
                    {% endif %}
                </div>
                {% endfor %}
            </div>
        </div>
    </div>
    {% endfor %}

</div>
{% endblock %}