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

{% block title %}{{ meal.name }} — Repas{% endblock %}

{% block body_class %}bg-stone-100 text-stone-900 dark:bg-stone-950 dark:text-stone-100{% endblock %}

{% block body %}
<div class="max-w-lg mx-auto px-4 pt-2 pb-8">

{% include 'ui/page_nav.html.twig' with {
    variant: 'surface',
    back_href: path('front.pantry.meal.index'),
    eyebrow: 'Repas',
    title: meal.name,
    subtitle: meal.eatenAt|date('d/m/Y à H:i') ~ ' · par ' ~ meal.createdBy.displayName,
} only %}

    {# ── Compute macros from consumptions ── #}
    {% set consumptions = meal.consumptions %}
    {% set totalCal = meal.totalCalories %}
    {% set totalProteins = 0.0 %}
    {% set totalCarbs = 0.0 %}
    {% set totalFat = 0.0 %}
    {% set hasMacros = false %}
    {% for c in consumptions %}
        {% set n = c.item.nutriments %}
        {% if n %}
            {% if n.proteins is defined and n.proteins is not null %}
                {% set totalProteins = totalProteins + (n.proteins * c.quantity / 100) %}
                {% set hasMacros = true %}
            {% endif %}
            {% if n.carbohydrates is defined and n.carbohydrates is not null %}
                {% set totalCarbs = totalCarbs + (n.carbohydrates * c.quantity / 100) %}
                {% set hasMacros = true %}
            {% endif %}
            {% if n.fat is defined and n.fat is not null %}
                {% set totalFat = totalFat + (n.fat * c.quantity / 100) %}
                {% set hasMacros = true %}
            {% endif %}
        {% endif %}
    {% endfor %}
    {% set macroCalories = (totalProteins * 4) + (totalCarbs * 4) + (totalFat * 9) %}
    {% if macroCalories > 0 %}
        {% set protPct = ((totalProteins * 4) / macroCalories * 100)|round %}
        {% set carbPct = ((totalCarbs * 4) / macroCalories * 100)|round %}
        {% set fatPct  = 100 - protPct - carbPct %}
    {% else %}
        {% set protPct = 0 %}
        {% set carbPct = 0 %}
        {% set fatPct  = 0 %}
    {% endif %}

    {# ── Description ── #}
    {% if meal.description %}
        <p class="text-sm text-stone-600 dark:text-stone-300 italic mb-4 bg-white dark:bg-stone-900 rounded-2xl border border-stone-100 dark:border-stone-800 shadow-sm px-5 py-3">
            "{{ meal.description }}"
        </p>
    {% endif %}

    {# ── Nutrition hero card ── #}
    {% if totalCal is not null or hasMacros %}
    <div class="rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 shadow-sm overflow-hidden mb-4">

        {# Calorie banner #}
        {% if totalCal is not null %}
        <div class="bg-gradient-to-r from-amber-50 to-orange-50 dark:from-amber-950/20 dark:to-orange-950/10 px-5 py-4 flex items-center gap-4 border-b border-amber-100/60 dark:border-amber-900/30">
            <div class="size-11 rounded-xl bg-white dark:bg-stone-800 shadow-sm flex items-center justify-center shrink-0">
                <svg class="size-5 text-orange-400" fill="currentColor" viewBox="0 0 20 20">
                    <path fill-rule="evenodd" d="M12.395 2.553a1 1 0 0 0-1.45-.385c-.345.23-.614.558-.822.88-.214.33-.403.713-.57 1.116-.334.804-.614 1.768-.84 2.734a31.365 31.365 0 0 0-.613 3.58 2.64 2.64 0 0 1-.945-1.067c-.328-.68-.398-1.534-.398-2.654A1 1 0 0 0 5.05 6.05 6.981 6.981 0 0 0 3 11a7 7 0 1 0 14 0c0-1.416-.435-2.766-1.184-3.858-.204-.29-.476-.54-.752-.75z" clip-rule="evenodd"/>
                </svg>
            </div>
            <div class="flex-1 min-w-0">
                <p class="text-2xl font-black text-stone-800 dark:text-stone-100 tabular-nums leading-none">
                    {{ totalCal|number_format(0, ',', ' ') }}
                    <span class="text-base font-semibold text-stone-400 dark:text-stone-500 ml-1">kcal</span>
                </p>
                <p class="text-[11px] text-stone-400 dark:text-stone-500 mt-0.5">
                    {{ consumptions|length }} aliment{{ consumptions|length > 1 ? 's' : '' }} · {{ meal.eatenAt|date('d/m/Y') }}
                </p>
            </div>
        </div>
        {% endif %}

        {# Macro donuts — same style as pantry item show #}
        {% if hasMacros %}
        <div class="grid grid-cols-3 divide-x divide-stone-50 dark:divide-stone-800 py-4">

            <div class="flex flex-col items-center gap-1.5 px-3">
                <div class="relative size-16">
                    <svg class="size-16 -rotate-90" viewBox="0 0 36 36">
                        <circle cx="18" cy="18" r="15.9" fill="none" stroke="currentColor" stroke-width="3.2" class="text-stone-100 dark:text-stone-800"/>
                        <circle cx="18" cy="18" r="15.9" fill="none" stroke="#f43f5e" stroke-width="3.2"
                                stroke-dasharray="{{ protPct }} {{ 100 - protPct }}" stroke-linecap="round"/>
                    </svg>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="text-xs font-black text-stone-700 dark:text-stone-200 tabular-nums">{{ protPct }}%</span>
                    </div>
                </div>
                <p class="text-[10px] font-bold uppercase tracking-wide text-rose-500 dark:text-rose-400">Protéines</p>
                <p class="text-sm font-black text-stone-800 dark:text-stone-100 tabular-nums -mt-1">
                    {{ totalProteins|round(1) }}<span class="text-xs font-normal text-stone-400 ml-0.5">g</span>
                </p>
            </div>

            <div class="flex flex-col items-center gap-1.5 px-3">
                <div class="relative size-16">
                    <svg class="size-16 -rotate-90" viewBox="0 0 36 36">
                        <circle cx="18" cy="18" r="15.9" fill="none" stroke="currentColor" stroke-width="3.2" class="text-stone-100 dark:text-stone-800"/>
                        <circle cx="18" cy="18" r="15.9" fill="none" stroke="#10b981" stroke-width="3.2"
                                stroke-dasharray="{{ carbPct }} {{ 100 - carbPct }}" stroke-linecap="round"/>
                    </svg>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="text-xs font-black text-stone-700 dark:text-stone-200 tabular-nums">{{ carbPct }}%</span>
                    </div>
                </div>
                <p class="text-[10px] font-bold uppercase tracking-wide text-emerald-500 dark:text-emerald-400">Glucides</p>
                <p class="text-sm font-black text-stone-800 dark:text-stone-100 tabular-nums -mt-1">
                    {{ totalCarbs|round(1) }}<span class="text-xs font-normal text-stone-400 ml-0.5">g</span>
                </p>
            </div>

            <div class="flex flex-col items-center gap-1.5 px-3">
                <div class="relative size-16">
                    <svg class="size-16 -rotate-90" viewBox="0 0 36 36">
                        <circle cx="18" cy="18" r="15.9" fill="none" stroke="currentColor" stroke-width="3.2" class="text-stone-100 dark:text-stone-800"/>
                        <circle cx="18" cy="18" r="15.9" fill="none" stroke="#f59e0b" stroke-width="3.2"
                                stroke-dasharray="{{ fatPct }} {{ 100 - fatPct }}" stroke-linecap="round"/>
                    </svg>
                    <div class="absolute inset-0 flex items-center justify-center">
                        <span class="text-xs font-black text-stone-700 dark:text-stone-200 tabular-nums">{{ fatPct }}%</span>
                    </div>
                </div>
                <p class="text-[10px] font-bold uppercase tracking-wide text-amber-500 dark:text-amber-400">Lipides</p>
                <p class="text-sm font-black text-stone-800 dark:text-stone-100 tabular-nums -mt-1">
                    {{ totalFat|round(1) }}<span class="text-xs font-normal text-stone-400 ml-0.5">g</span>
                </p>
            </div>

        </div>
        {% endif %}

        {% if totalCal is not null %}
        <p class="text-[10px] text-stone-300 dark:text-stone-600 text-center pb-3 px-5">
            * Estimation basée sur les valeurs nutritionnelles pour 100 g × quantités consommées.
        </p>
        {% endif %}
    </div>
    {% endif %}

    {# ── Aliments consommés ── #}
    <div class="rounded-2xl bg-white dark:bg-stone-900 border border-stone-100 dark:border-stone-800 shadow-sm p-5">
        <h3 class="text-[10px] font-bold uppercase tracking-widest text-stone-400 dark:text-stone-500 mb-4">Aliments consommés</h3>

        {% if consumptions is empty %}
            <p class="text-sm text-stone-400 dark:text-stone-500 text-center py-4">Aucun aliment enregistré.</p>
        {% else %}
            <ul class="divide-y divide-stone-50 dark:divide-stone-800">
                {% for c in consumptions %}
                    <li class="flex items-center gap-3 py-3 first:pt-0 last:pb-0">

                        {# Thumbnail or colored initial #}
                        {% if c.item.imageUrl %}
                            <a href="{{ path('front.pantry.show', {id: c.item.id}) }}" class="shrink-0">
                                <img src="{{ c.item.imageUrl }}" alt="{{ c.item.name }}"
                                     class="size-12 rounded-xl object-contain bg-stone-50 dark:bg-stone-800 border border-stone-100 dark:border-stone-700">
                            </a>
                        {% else %}
                            {% set colors = ['bg-rose-50 dark:bg-rose-950/40','bg-amber-50 dark:bg-amber-950/40','bg-emerald-50 dark:bg-emerald-950/40','bg-sky-50 dark:bg-sky-950/40','bg-violet-50 dark:bg-violet-950/40','bg-orange-50 dark:bg-orange-950/40'] %}
                            {% set textColors = ['text-rose-300','text-amber-300','text-emerald-300','text-sky-300','text-violet-300','text-orange-300'] %}
                            {% set idx = c.item.id % 6 %}
                            <a href="{{ path('front.pantry.show', {id: c.item.id}) }}"
                               class="size-12 rounded-xl {{ colors[idx] }} border border-stone-100 dark:border-stone-700 flex items-center justify-center shrink-0">
                                <span class="text-xl font-black {{ textColors[idx] }}">{{ c.item.name|slice(0,1)|upper }}</span>
                            </a>
                        {% endif %}

                        <div class="flex-1 min-w-0">
                            <a href="{{ path('front.pantry.show', {id: c.item.id}) }}"
                               class="font-semibold text-stone-800 dark:text-stone-100 hover:text-amber-600 dark:hover:text-amber-400 transition-colors truncate block text-sm">
                                {{ c.item.name }}
                            </a>
                            <p class="text-xs text-stone-400 dark:text-stone-500 mt-0.5">
                                {{ c.quantity }}{% if c.item.stockUnit %} {{ c.item.stockUnit }}{% endif %}{% if c.item.brand %} · {{ c.item.brand }}{% endif %}
                            </p>
                        </div>

                        <div class="shrink-0 text-right flex flex-col items-end gap-1">
                            {% set n = c.item.nutriments %}
                            {% if n and n.calories is defined and n.calories is not null %}
                                <p class="text-sm font-bold text-amber-600 dark:text-amber-400 tabular-nums">
                                    {{ (n.calories * c.quantity / 100)|round }} kcal
                                </p>
                            {% endif %}
                            {% if c.item.nutriscoreGrade %}
                                <span class="inline-flex items-center justify-center size-5 rounded-md text-white font-black text-[9px] leading-none"
                                      style="background-color: {{ c.item.nutriscoreColor }}">
                                    {{ c.item.nutriscoreGrade|upper }}
                                </span>
                            {% endif %}
                        </div>
                    </li>
                {% endfor %}
            </ul>
        {% endif %}
    </div>

</div>
{% endblock %}