{#
 # ============================================================================
 # ORGANISM: ECO FOOTPRINT
 # ============================================================================
 #
 # Section empreinte écologique du dashboard.
 # Affiche 3 métriques (énergie, CO2, eau) + graphique barres hebdomadaire.
 #
 # ============================================================================
 # COMPOSITION (Molécules/Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre       | Type    | Défaut     | Description                        |
 # |-----------------|---------|------------|------------------------------------|
 # | totalWh         | float   | 0          | Énergie totale en Wh               |
 # | weeklyData      | array   | []         | Données hebdo [{day, val}]         |
 # | weekDelta       | string  | null       | Variation vs semaine passée        |
 # | period          | string  | null       | Période affichée (ex: 'Fév. 2026')|
 # | class           | string  | ''         | Classes additionnelles             |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # {% include '_organisms/eco-footprint/eco-footprint.html.twig' with {
 #     totalWh: 152.4,
 #     weeklyData: [
 #         { day: 'Lun', val: 18.4 },
 #         { day: 'Mar', val: 31.2 },
 #         { day: 'Mer', val: 12.7 },
 #         { day: 'Jeu', val: 44.9 },
 #         { day: 'Ven', val: 34.7 },
 #         { day: 'Sam', val: 8.3 },
 #         { day: 'Dim', val: 2.1 }
 #     ],
 #     weekDelta: '-12%',
 #     period: 'Fevrier 2026'
 # } only %}
 #
 # ============================================================================
 #}

{# ============================================================================
   CONFIGURATION DES VALEURS PAR DÉFAUT
   ============================================================================ #}

{% set totalWh = totalWh ?? 0 %}
{% set weeklyData = weeklyData ?? [] %}
{% set weekDelta = weekDelta ?? null %}
{% set period = period ?? null %}
{% set class = class ?? '' %}

{# Calculs derives (sources : IEA 2024, Google Environmental Report 2024) #}
{% set co2 = totalWh * 0.590 %}
{% set water = totalWh * 0.00216 %}

{# Max pour normaliser les barres #}
{% set maxWeekVal = 1 %}
{% for d in weeklyData %}
    {% if d.val > maxWeekVal %}{% set maxWeekVal = d.val %}{% endif %}
{% endfor %}

{# ============================================================================
   RENDU HTML
   ============================================================================ #}

<div class="rounded-2xl p-8 relative overflow-hidden
            bg-gradient-to-br from-success/5 via-white to-white
            border border-success/12
            shadow-[0_2px_12px_rgba(48,147,68,0.05)]
            {{ class }}">

    <div class="flex flex-col lg:flex-row gap-6 lg:gap-8 items-stretch lg:items-center">

        {# ===== METRIQUES (gauche) ===== #}
        <div class="flex flex-col gap-7 lg:min-w-[320px]">

            {# Energie #}
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-success/10 border border-success/15 flex items-center justify-center shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'bolt',
                        size: 'lg',
                        color: 'success'
                    } only %}
                </div>
                <div class="flex-1">
                    <div class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Énergie consommée</div>
                    <div class="flex items-baseline gap-2">
                        <span class="text-3xl font-bold text-gray-900 tabular-nums font-secondary leading-none">{{ totalWh|number_format(1, ',', ' ') }}</span>
                        <span class="text-sm text-gray-400 font-medium">Wh</span>
                    </div>
                </div>
                {# 1 recherche Google ≈ 0.3 Wh (source : IEA 2024) #}
                <span class="hidden sm:inline text-[11px] text-success font-medium opacity-70">≈ {{ (totalWh / 0.3)|number_format(0, ',', ' ') }} recherches Google</span>
            </div>

            {# CO₂ #}
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-warning/10 border border-warning/15 flex items-center justify-center shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'cloud',
                        size: 'lg',
                        color: 'warning'
                    } only %}
                </div>
                <div class="flex-1">
                    <div class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">CO₂ émis</div>
                    <div class="flex items-baseline gap-2">
                        <span class="text-3xl font-bold text-gray-900 tabular-nums font-secondary leading-none">{{ co2|number_format(1, ',', ' ') }}</span>
                        <span class="text-sm text-gray-400 font-medium">g</span>
                    </div>
                </div>
                {# 1 km en voiture ≈ 122 g CO₂ (source : ADEME 2023, véhicule moyen FR) #}
                <span class="hidden sm:inline text-[11px] text-warning font-medium opacity-70">≈ {{ (co2 / 122)|number_format(1, ',', ' ') }} km en voiture</span>
            </div>

            {# Eau #}
            <div class="flex items-center gap-4">
                <div class="w-12 h-12 rounded-xl bg-info/10 border border-info/15 flex items-center justify-center shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'earth',
                        size: 'lg',
                        color: 'info'
                    } only %}
                </div>
                <div class="flex-1">
                    <div class="text-[10px] font-semibold text-gray-400 uppercase tracking-wider mb-1">Eau (refroidissement)</div>
                    <div class="flex items-baseline gap-2">
                        {% if water >= 1 %}
                            <span class="text-3xl font-bold text-gray-900 tabular-nums font-secondary leading-none">{{ water|number_format(1, ',', ' ') }}</span>
                            <span class="text-sm text-gray-400 font-medium">L</span>
                        {% else %}
                            <span class="text-3xl font-bold text-gray-900 tabular-nums font-secondary leading-none">{{ (water * 1000)|number_format(0) }}</span>
                            <span class="text-sm text-gray-400 font-medium">mL</span>
                        {% endif %}
                    </div>
                </div>
                {# 1 verre d'eau = 0.25 L #}
                <span class="hidden sm:inline text-[11px] text-info font-medium opacity-70">≈ {{ (water / 0.25)|number_format(1, ',', ' ') }} verres d'eau</span>
            </div>

        </div>

        {# Séparateur : horizontal sur mobile, vertical sur desktop #}
        <div class="h-px w-full lg:h-auto lg:w-px lg:self-stretch bg-gradient-to-r lg:bg-gradient-to-b from-transparent via-gray-200 to-transparent"></div>

        {# ===== GRAPHIQUE HEBDOMADAIRE (droite) ===== #}
        <div class="flex-1">
            <div class="flex items-center justify-between gap-2 mb-6">
                <div>
                    <span class="text-sm font-semibold text-gray-500">Énergie cette semaine</span>
                    <span class="text-[10px] text-gray-300 ml-2">Wh / jour</span>
                </div>
                {% if weekDelta %}
                    {% set deltaIsDown = weekDelta starts with '-' %}
                    <span class="shrink-0 whitespace-nowrap text-[11px] font-semibold px-3 py-1.5 rounded-lg border
                                 {{ deltaIsDown ? 'text-success bg-success/8 border-success/12' : 'text-warning bg-warning/8 border-warning/12' }}">
                        {{ deltaIsDown ? '↓' : '↑' }} {{ weekDelta }} vs sem. passée
                    </span>
                {% endif %}
            </div>

            <div class="flex items-end gap-3 h-32">
                {% for d in weeklyData %}
                    {% set barHeight = maxWeekVal > 0 ? (d.val / maxWeekVal * 110) : 0 %}

                    {# Dégradé vertical : vert (bas) → orange (moyen) → rouge (haut) selon intensité #}
                    {% set ratio = maxWeekVal > 0 ? d.val / maxWeekVal : 0 %}
                    {% if ratio > 0.7 %}
                        {% set gradientStyle = 'background: linear-gradient(to top, #D97706, #DC2626)' %}
                        {% set glowStyle = 'box-shadow: 0 4px 16px rgba(220, 38, 38, 0.2)' %}
                    {% elseif ratio > 0.35 %}
                        {% set gradientStyle = 'background: linear-gradient(to top, #F59E0B, #EA580C)' %}
                        {% set glowStyle = 'box-shadow: 0 4px 16px rgba(245, 158, 11, 0.2)' %}
                    {% else %}
                        {% set gradientStyle = 'background: linear-gradient(to top, #34D399, #309344)' %}
                        {% set glowStyle = 'box-shadow: 0 4px 16px rgba(48, 147, 68, 0.15)' %}
                    {% endif %}

                    <div class="flex-1 flex flex-col items-center gap-2 group/bar cursor-default">
                        {# Valeur au-dessus #}
                        <span class="text-[11px] font-bold text-gray-300 group-hover/bar:text-gray-600 transition-colors min-h-[16px]">
                            {% if d.val > 0 %}{{ d.val|number_format(1, ',', ' ') }}{% endif %}
                        </span>

                        {# Barre avec dégradé vertical #}
                        <div class="w-full max-w-[38px] rounded-lg
                                    transition-all duration-500 ease-[cubic-bezier(0.16,1,0.3,1)]
                                    group-hover/bar:brightness-110 origin-bottom"
                             style="height: {{ barHeight > 4 ? barHeight : 4 }}px; {{ gradientStyle }}; {{ glowStyle }}">
                        </div>

                        {# Jour #}
                        <span class="text-[11px] text-gray-400 font-medium group-hover/bar:text-gray-600 transition-colors">
                            {{ d.day }}
                        </span>
                    </div>
                {% endfor %}

                {% if weeklyData|length == 0 %}
                    {# Barres vides si aucune donnée #}
                    {% for day in ['Lun', 'Mar', 'Mer', 'Jeu', 'Ven', 'Sam', 'Dim'] %}
                        <div class="flex-1 flex flex-col items-center gap-2">
                            <span class="min-h-[16px]"></span>
                            <div class="w-full max-w-[38px] rounded-lg bg-gray-100 h-1"></div>
                            <span class="text-[11px] text-gray-300 font-medium">{{ day }}</span>
                        </div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>
    </div>
</div>