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

{% block title %}Tableau de bord – EOS{% endblock %}

{% block body %}
{% set dayNames = {'1': 'Lun', '2': 'Mar', '3': 'Mer', '4': 'Jeu', '5': 'Ven', '6': 'Sam', '7': 'Dim'} %}
{% set today = 'now'|date('Y-m-d') %}

{# ── En-tête semaine ── #}
<div class="d-flex justify-content-between align-items-start mb-3 flex-wrap gap-2">
    <div>
        <h1 class="h5 mb-0 fw-bold">Semaine du {{ dashboard.weekStart|date('d/m') }} au {{ dashboard.weekEnd|date('d/m/Y') }}</h1>
        <p class="text-eos-muted small mb-0">{{ today|date('l d F Y')|capitalize }}</p>
    </div>
    <a href="{{ path('app_daily_log_form') }}" class="btn btn-sm btn-primary">+ Offrande du jour</a>
</div>

{# ── Feedback hebdo ── #}
{% if weekFeedback %}
<div class="eos-feedback eos-feedback--{{ weekFeedback.tone }}">{{ weekFeedback.message }}</div>
{% endif %}

{# ── Feedback du jour ── #}
{% if todayFeedback %}
<div class="eos-feedback eos-feedback--{{ todayFeedback.tone }}">{{ todayFeedback.message }}</div>
{% endif %}

{# ── Bilan Oracle en attente ── #}
{% if dashboard.pendingAssessment %}
    {% set wa = dashboard.pendingAssessment %}
    <div class="card mb-4 border-0" style="border-left: 3px solid var(--eos-amber) !important; background: var(--eos-amber-soft);">
        <div class="card-body py-2 px-3 d-flex justify-content-between align-items-center flex-wrap gap-2">
            <div class="small">
                <strong>Oracle :</strong> proposition {{ wa.proposedCalories }} kcal/j
                pour la semaine du {{ wa.startDate|date('d/m') }}
                (TDEE estimé : {{ wa.estimatedTdee }} kcal).
            </div>
            <div class="d-flex gap-2 flex-shrink-0">
                <form method="post" action="{{ path('app_assessment_accept', {id: wa.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('assessment_action_' ~ wa.id) }}">
                    <button class="btn btn-success btn-sm">Accepter</button>
                </form>
                <form method="post" action="{{ path('app_assessment_ignore', {id: wa.id}) }}">
                    <input type="hidden" name="_token" value="{{ csrf_token('assessment_action_' ~ wa.id) }}">
                    <button class="btn btn-outline-secondary btn-sm">Ignorer</button>
                </form>
            </div>
        </div>
    </div>
{% endif %}

{# ── KPIs ── #}
<div class="row g-3 mb-4">
    <div class="col-6 col-md">
        <div class="card h-100">
            <div class="card-header">Calories moy.</div>
            <div class="card-body">
                <div class="kpi-value text-eos">{{ dashboard.averageCalories ? dashboard.averageCalories|round : '–' }}</div>
                <div class="kpi-label">kcal / jour</div>
                {% if dashboard.targetCalories > 0 %}
                <div class="kpi-sub">Plafond {{ dashboard.targetCalories }} kcal</div>
                {% if dashboard.averageCalories %}
                <div class="eos-bar">
                    {% set pct = [100, (dashboard.averageCalories / dashboard.targetCalories * 100)|round]|min %}
                    {% set over = dashboard.averageCalories > dashboard.targetCalories %}
                    <div class="eos-bar-fill {{ over ? 'eos-bar-fill--over' : 'eos-bar-fill--cal' }}" style="width: {{ pct }}%"></div>
                </div>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-6 col-md">
        <div class="card h-100">
            <div class="card-header">Protéines moy.</div>
            <div class="card-body">
                <div class="kpi-value" style="color: var(--eos-green)">{{ dashboard.averageProteins ? dashboard.averageProteins|round : '–' }}</div>
                <div class="kpi-label">g / jour</div>
                {% if dashboard.targetProteins > 0 %}
                <div class="kpi-sub">Plancher {{ dashboard.targetProteins }} g</div>
                {% if dashboard.averageProteins %}
                <div class="eos-bar">
                    {% set pctP = [100, (dashboard.averageProteins / dashboard.targetProteins * 100)|round]|min %}
                    <div class="eos-bar-fill eos-bar-fill--prot" style="width: {{ pctP }}%"></div>
                </div>
                {% endif %}
                {% endif %}
            </div>
        </div>
    </div>
    <div class="col-6 col-md">
        <div class="card h-100">
            <div class="card-header">Poids moyen</div>
            <div class="card-body">
                <div class="kpi-value">{{ dashboard.averageWeight ?? '–' }}</div>
                <div class="kpi-label">kg (7 j)</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md">
        <div class="card h-100">
            <div class="card-header">Plafond</div>
            <div class="card-body">
                <div class="kpi-value {{ dashboard.calorieAdherenceRate >= 0.8 ? '' : 'text-eos' }}">
                    {{ (dashboard.calorieAdherenceRate * 100)|round }}%
                </div>
                <div class="kpi-label">jours respectés</div>
            </div>
        </div>
    </div>
    <div class="col-6 col-md">
        <div class="card h-100">
            <div class="card-header">Plancher</div>
            <div class="card-body">
                <div class="kpi-value" style="color: var(--eos-green)">
                    {{ (dashboard.proteinAdherenceRate * 100)|round }}%
                </div>
                <div class="kpi-label">jours atteints</div>
            </div>
        </div>
    </div>
</div>

{# ── Graphe CSS semaine + table 7 jours ── #}
{% if dashboard.dailyItems is empty %}
<div class="eos-empty">
    <span class="eos-empty-icon">🌅</span>
    Aucune offrande cette semaine.<br>
    <a href="{{ path('app_daily_log_form') }}" class="btn btn-primary btn-sm mt-3">Commencer maintenant</a>
</div>
{% else %}

{# Mini histogramme CSS #}
<div class="card mb-3">
    <div class="card-header">Calories cette semaine</div>
    <div class="card-body py-3">
        <div class="week-chart">
        {% for item in dashboard.dailyItems %}
            {% set isToday = item.date|date('Y-m-d') == today %}
            {% if item.caloriesConsumed is not null and dashboard.targetCalories > 0 %}
                {% set heightPct = [95, (item.caloriesConsumed / dashboard.targetCalories * 80)|round]|min %}
                {% set isOver = item.caloriesConsumed > dashboard.targetCalories %}
                <div class="week-chart-col">
                    <div class="week-chart-bar {{ isOver ? 'week-chart-bar--over' : 'week-chart-bar--ok' }}"
                         style="height: {{ [5, heightPct]|max }}%"
                         title="{{ item.caloriesConsumed }} kcal"></div>
                    <div class="week-chart-label {{ isToday ? 'fw-bold text-eos' : '' }}">{{ dayNames[item.date|date('N')] }}</div>
                </div>
            {% else %}
                <div class="week-chart-col">
                    <div class="week-chart-bar week-chart-bar--empty" style="height: 10%"></div>
                    <div class="week-chart-label {{ isToday ? 'fw-bold text-eos' : '' }}">{{ dayNames[item.date|date('N')] }}</div>
                </div>
            {% endif %}
        {% endfor %}
        </div>
    </div>
</div>

{# Table détaillée 7 jours #}
<div class="card mb-4">
    <div class="card-header">Détail des 7 derniers jours</div>
    <div class="table-responsive">
        <table class="table table-sm day-table mb-0">
            <thead>
                <tr>
                    <th>Jour</th>
                    <th class="text-end">Calories</th>
                    <th class="text-end">Protéines</th>
                    <th class="text-end">Poids</th>
                    <th class="text-center d-none d-sm-table-cell">😊</th>
                    <th class="text-center d-none d-sm-table-cell">😴</th>
                    <th class="text-center d-none d-sm-table-cell">😓</th>
                </tr>
            </thead>
            <tbody>
            {% for item in dashboard.dailyItems %}
                {% set isToday = item.date|date('Y-m-d') == today %}
                <tr class="{{ isToday ? 'is-today' : '' }}">
                    <td>
                        <strong>{{ dayNames[item.date|date('N')] }} {{ item.date|date('d/m') }}</strong>
                        {% if isToday %}<span class="badge badge-pending ms-1 fs-micro">auj.</span>{% endif %}
                    </td>
                    <td class="text-end">
                        {% if item.caloriesConsumed is not null %}
                            <span class="{{ item.isCalorieUnderCeiling() is same as(false) ? 'text-danger fw-semibold' : '' }}">
                                {{ item.caloriesConsumed }}
                            </span>
                            {% if dashboard.targetCalories > 0 %}
                            {% set cpct = item.calorieFillPercent() %}
                            <span class="mini-bar"><span class="mini-bar-fill {{ item.isCalorieUnderCeiling() is same as(false) ? 'mini-bar-fill--over' : 'mini-bar-fill--cal' }}" style="width: {{ cpct ?? 0 }}%"></span></span>
                            {% endif %}
                        {% else %}<span class="text-eos-muted">–</span>{% endif %}
                    </td>
                    <td class="text-end">
                        {% if item.proteinsConsumed is not null %}
                            <span class="{{ item.isProteinAboveFloor() is same as(false) ? 'text-warning fw-semibold' : '' }}">
                                {{ item.proteinsConsumed }} g
                            </span>
                            {% if dashboard.targetProteins > 0 %}
                            {% set ppct = item.proteinFillPercent() %}
                            <span class="mini-bar"><span class="mini-bar-fill mini-bar-fill--prot" style="width: {{ ppct ?? 0 }}%"></span></span>
                            {% endif %}
                        {% else %}<span class="text-eos-muted">–</span>{% endif %}
                    </td>
                    <td class="text-end">{{ item.weight ? item.weight ~ ' kg' : '–' }}</td>
                    <td class="text-center d-none d-sm-table-cell">{{ item.moodScore ?? '–' }}</td>
                    <td class="text-center d-none d-sm-table-cell">{{ item.sleepScore ?? '–' }}</td>
                    <td class="text-center d-none d-sm-table-cell">{{ item.fatigueScore ?? '–' }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

{# ── Tendance poids 14 jours ── #}
{% if weightTrend is not empty %}
<div class="card mb-4">
    <div class="card-header">Tendance poids – 14 jours</div>
    <div class="card-body">
        <div class="d-flex align-items-end gap-3 flex-wrap">
            {% set prevWeight = null %}
            {% for point in weightTrend %}
                <div class="text-center" style="min-width:3.2rem;">
                    {% if prevWeight is not null %}
                        {% set delta = point.weight - prevWeight %}
                        <div class="small {{ delta < 0 ? 'text-success' : (delta > 0 ? 'text-danger' : 'text-eos-muted') }}">
                            {{ delta < 0 ? '↘' : (delta > 0 ? '↗' : '→') }}
                        </div>
                    {% else %}
                        <div class="small">&nbsp;</div>
                    {% endif %}
                    <div class="fw-600 small" style="font-weight:600">{{ point.weight }}</div>
                    <div class="text-eos-muted fs-micro">{{ dayNames[point.date|date('N')] }} {{ point.date|date('d/m') }}</div>
                </div>
                {% set prevWeight = point.weight %}
            {% endfor %}
        </div>
    </div>
</div>
{% endif %}

<div class="text-end">
    <a href="{{ path('app_assessment_index') }}" class="small text-eos-muted">Voir tous les bilans →</a>
</div>
{% endblock %}