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

{% block title %}Offrande du jour – EOS{% endblock %}

{% block body %}
<div class="d-flex justify-content-between align-items-center mb-3 flex-wrap gap-2">
    <h1 class="h5 mb-0 fw-bold">Offrande du {{ today|date('d/m/Y') }}</h1>
    <a href="{{ path('app_daily_log_form') }}" class="btn btn-primary btn-sm">
        {{ log ? '✏ Modifier' : '+ Saisir les métriques' }}
    </a>
</div>

{% if log %}

    {# ── Barres de progression ── #}
    {% if log.targetCaloriesSnapshot > 0 or log.targetProteinsSnapshot > 0 %}
    <div class="row g-3 mb-3">
        {% if log.targetCaloriesSnapshot > 0 %}
        <div class="col-12 col-sm-6">
            <div class="card">
                <div class="card-header">Plafond calorique</div>
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <span class="kpi-value text-eos">{{ log.caloriesConsumed ?? '–' }}</span>
                        <span class="kpi-sub align-self-end">/ {{ log.targetCaloriesSnapshot }} kcal</span>
                    </div>
                    {% if log.caloriesConsumed is not null %}
                    {% set cpct = [100, (log.caloriesConsumed / log.targetCaloriesSnapshot * 100)|round]|min %}
                    {% set isOver = log.caloriesConsumed > log.targetCaloriesSnapshot %}
                    <div class="eos-bar mt-2">
                        <div class="eos-bar-fill {{ isOver ? 'eos-bar-fill--over' : 'eos-bar-fill--cal' }}" style="width: {{ cpct }}%"></div>
                    </div>
                    <div class="kpi-sub mt-1">{{ isOver ? 'Plafond dépassé' : 'Plafond respecté ✓' }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}

        {% if log.targetProteinsSnapshot > 0 %}
        <div class="col-12 col-sm-6">
            <div class="card">
                <div class="card-header">Plancher protéique</div>
                <div class="card-body">
                    <div class="d-flex justify-content-between">
                        <span class="kpi-value" style="color: var(--eos-green)">{{ log.proteinsConsumed ?? '–' }}</span>
                        <span class="kpi-sub align-self-end">/ {{ log.targetProteinsSnapshot }} g</span>
                    </div>
                    {% if log.proteinsConsumed is not null %}
                    {% set ppct = [100, (log.proteinsConsumed / log.targetProteinsSnapshot * 100)|round]|min %}
                    <div class="eos-bar mt-2">
                        <div class="eos-bar-fill eos-bar-fill--prot" style="width: {{ ppct }}%"></div>
                    </div>
                    {% set protOk = log.proteinsConsumed >= log.targetProteinsSnapshot %}
                    <div class="kpi-sub mt-1">{{ protOk ? 'Plancher atteint ✓' : 'Plancher non atteint' }}</div>
                    {% endif %}
                </div>
            </div>
        </div>
        {% endif %}
    </div>
    {% endif %}

    {# ── Stats secondaires ── #}
    <div class="row g-3 mb-4">
        <div class="col-6 col-md-3">
            <div class="card text-center">
                <div class="card-body py-2">
                    <div class="kpi-value">{{ log.weight ? log.weight ~ ' kg' : '–' }}</div>
                    <div class="kpi-label">Poids</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card text-center">
                <div class="card-body py-2">
                    <div class="kpi-value">{{ log.moodScore ?? '–' }}</div>
                    <div class="kpi-label">Humeur 😊</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card text-center">
                <div class="card-body py-2">
                    <div class="kpi-value">{{ log.sleepScore ?? '–' }}</div>
                    <div class="kpi-label">Sommeil 😴</div>
                </div>
            </div>
        </div>
        <div class="col-6 col-md-3">
            <div class="card text-center">
                <div class="card-body py-2">
                    <div class="kpi-value">{{ log.fatigueScore ?? '–' }}</div>
                    <div class="kpi-label">Fatigue 😓</div>
                </div>
            </div>
        </div>
    </div>

    {# ── Activités ── #}
    <div class="d-flex justify-content-between align-items-center mb-2">
        <h2 class="h6 mb-0">Activités sportives</h2>
        {% if activityForm %}
        <button type="button" class="btn btn-outline-secondary btn-sm"
                data-controller="activity-form"
                data-action="click->activity-form#toggle"
                data-activity-form-target="toggle">
            + Ajouter
        </button>
        {% endif %}
    </div>

    {% set activities = log.activities %}
    {% if activities is not empty %}
        <ul class="list-group list-group-flush mb-3">
        {% for activity in activities %}
            <li class="list-group-item px-0 d-flex justify-content-between align-items-center">
                <span class="fw-500">{{ activity.type|capitalize }}</span>
                <span class="text-eos-muted small">
                    {% if activity.durationMinutes %}{{ activity.durationMinutes }} min{% endif %}
                    {% if activity.caloriesBurned %} · {{ activity.caloriesBurned }} kcal{% endif %}
                </span>
            </li>
        {% endfor %}
        </ul>
    {% else %}
        <p class="text-eos-muted small mb-3">Aucune activité enregistrée pour aujourd'hui.</p>
    {% endif %}

    {# ── Formulaire ajout activité (caché par défaut via Stimulus) ── #}
    {% if activityForm %}
        <div data-activity-form-target="form"
             data-controller="activity-form"
             style="display: none;">
            <div class="card">
                <div class="card-header">Nouvelle activité</div>
                <div class="card-body">
                    {{ form_start(activityForm) }}
                    <div class="row g-2">
                        <div class="col-12 col-md-4">{{ form_row(activityForm.type) }}</div>
                        <div class="col-6 col-md-3">{{ form_row(activityForm.durationMinutes) }}</div>
                        <div class="col-6 col-md-3">{{ form_row(activityForm.caloriesBurned) }}</div>
                        <div class="col-12 col-md-2 d-flex align-items-end">
                            {{ form_row(activityForm.submit) }}
                        </div>
                    </div>
                    {{ form_end(activityForm) }}
                </div>
            </div>
        </div>
    {% endif %}

{% else %}
    <div class="eos-empty">
        <span class="eos-empty-icon">🌅</span>
        Aucune offrande enregistrée pour aujourd'hui.<br>
        <a href="{{ path('app_daily_log_form') }}" class="btn btn-primary btn-sm mt-3">Saisir maintenant</a>
    </div>
{% endif %}
{% endblock %}