{% macro donut(pct, size, stroke, bg, fg, label) %}
    {# Clamp entre 0 et 100 manuellement #}
    {% set raw = pct ?? 0 %}
    {% set clamped = raw < 0 ? 0 : (raw > 100 ? 100 : raw) %}
    {% set r = (size - stroke) / 2 %}
    {% set dash = (clamped / 100) * (2 * 3.14159 * r) %}

    <svg width="{{ size }}" height="{{ size }}" viewBox="0 0 {{ size }} {{ size }}"
         role="img" aria-label="{{ label ?? (clamped ~ '%') }}">
        <!-- Cercle de fond -->
        <circle cx="{{ size/2 }}" cy="{{ size/2 }}" r="{{ r }}"
                fill="none" stroke="{{ bg|default('#eee') }}" stroke-width="{{ stroke }}" />

        <!-- Cercle de progression -->
        <circle cx="{{ size/2 }}" cy="{{ size/2 }}" r="{{ r }}"
                fill="none" stroke="{{ fg|default('#0d6efd') }}" stroke-width="{{ stroke }}"
                stroke-dasharray="{{ dash }} {{ 2 * 3.14159 * r }}"
                transform="rotate(-90 {{ size/2 }} {{ size/2 }})" />
    </svg>
{% endmacro %}

{# === Double donut (E/A et D/E) avec légende standardisée === #}
{% macro double_donut(allocated, committed, disbursed, size, showLegend=true, showPctInLegend=true) %}
    {% import _self as M %}

    {# -- Palette KPLAN (cohérente avec les autres graphiques) -- #}
    {% set COL_OUTER = '#ff5b5b' %}   {# Engagé (E) #}
    {% set COL_INNER = '#10C469' %}   {# Décaissé (D) #}
    {% set BG_OUTER  = '#ffbc00' %}
    {% set BG_INNER  = '#eaeaea' %}

    {# -- Dimensions -- #}
    {% set size   = size|default(80) %}
    {% set stroke = (size * 0.22)|round(0, 'floor') %}

    {# -- Safe divide + clamp -- #}
    {% set E_over_A = (allocated and allocated > 0) ? (100.0 * (committed|default(0)) / allocated) : 0 %}
    {% set D_over_E = (committed and committed > 0) ? (100.0 * (disbursed|default(0)) / committed) : 0 %}
    {% set outerPct = E_over_A < 0 ? 0 : (E_over_A > 100 ? 100 : E_over_A) %}
    {% set innerPct = D_over_E < 0 ? 0 : (D_over_E > 100 ? 100 : D_over_E) %}

    {# -- Mise en page : donut + légende à droite -- #}
    {% set legendW = showLegend ? 120 : 0 %}
    {% set totalW  = size + (showLegend ? legendW + 8 : 0) %}
    {% set totalH  = size %}

    <svg width="{{ totalW }}" height="{{ totalH }}" role="img" aria-label="Budget: E/A {{ outerPct|round(0) }}%, D/E {{ innerPct|round(0) }}%">
        {# Donut externe: Engagé / Alloué #}
        <g>
            {{ M.donut(outerPct, size, stroke, BG_OUTER, COL_OUTER) }}
        </g>

        {# Donut interne (imbriqué): Décaissé / Engagé #}
        {# Échelle et translation pour centrer à l’intérieur du donut externe #}
        <g transform="scale(0.66) translate({{ size * 0.26 }}, {{ size * 0.26 }})">
            {{ M.donut(innerPct, size, stroke, BG_INNER, COL_INNER) }}
        </g>

        {# Légende standardisée (mêmes libellés/couleurs) #}
        {% if showLegend %}
            {% set lx = size + 8 %}
            {% set ly1 = 16 %}
            {% set ly2 = 32 %}
            <g>
                <circle cx="{{ lx }}" cy="{{ ly1 - 4 }}" r="3" fill="{{ COL_OUTER }}"/>
                <text x="{{ lx + 10 }}" y="{{ ly1 }}" font-size="10" fill="#111">
                    E / A{% if showPctInLegend %} — {{ outerPct|round(0) }}%{% endif %}
                </text>

                <circle cx="{{ lx }}" cy="{{ ly2 - 4 }}" r="3" fill="{{ COL_INNER }}"/>
                <text x="{{ lx + 10 }}" y="{{ ly2 }}" font-size="10" fill="#111">
                    D / E{% if showPctInLegend %} — {{ innerPct|round(0) }}%{% endif %}
                </text>
            </g>
        {% endif %}
    </svg>
{% endmacro %}

{% macro bar_pair(allocated, committed, disbursed) %}
    {% set A = (allocated ?? 0) %}
    {% set C = (committed ?? 0) %}
    {% set D = (disbursed ?? 0) %}
    {% set w = 300 %}{% set h = 14 %}
    {% set cW = A > 0 ? (C/A * w) : 0 %}
    {% set dW = A > 0 ? (D/A * w) : 0 %}
    {% set cLabelX = cW + 6 > w - 6 ? w - 6 : cW + 6 %}
    {% set dLabelX = dW + 6 > w - 6 ? w - 6 : dW + 6 %}

    <svg width="{{ w }}" height="{{ h*2 + 10 }}" viewBox="0 0 {{ w }} {{ h*2 + 10 }}">
        <!-- Barre "Engagé" -->
        <rect x="0" y="0" width="{{ w }}" height="{{ h }}" fill="#f0f3f9" rx="4" />
        <rect x="0" y="0" width="{{ cW|round(1) }}" height="{{ h }}" fill="#0d6efd" rx="4" />
        <text x="{{ cLabelX|round(0, 'floor') }}" y="{{ h/2 + 4 }}" fill="#0d6efd" font-size="10">Engagé</text>

        <!-- Barre "Décaissé" -->
        <rect x="0" y="{{ h+8 }}" width="{{ w }}" height="{{ h }}" fill="#eef8f1" rx="4" />
        <rect x="0" y="{{ h+8 }}" width="{{ dW|round(1) }}" height="{{ h }}" fill="#16a34a" rx="4" />
        <text x="{{ dLabelX|round(0, 'floor') }}" y="{{ h + 8 + h/2 + 4 }}" fill="#16a34a" font-size="10">Décaissé</text>
    </svg>
{% endmacro %}

{% macro spark(values, w, h, variant='auto', strokeWidth=1.6, showDot=true) %}
    {% set w = w|default(120) %}
    {% set h = h|default(36) %}
    {% set v = values|default([]) %}

    {# Palette via CSS variables #}
    {% set colorPrimary   = 'var(--primary-color)'   %}  {# vert #}
    {% set colorSecondary = 'var(--secondary-color)' %}  {# jaune #}
    {% set colorAccent    = 'var(--accent-color)'    %}  {# rouge #}
    {% set colorSuccess   = 'var(--success-color)'   %}
    {% set colorWarning   = 'var(--warning-color)'   %}
    {% set colorDanger    = 'var(--danger-color)'    %}
    {% set colorMuted     = 'var(--border-dark)'     %}

    {# Choix couleur #}
    {% set strokeColor =
        variant == 'primary'   ? colorPrimary   :
        variant == 'secondary' ? colorSecondary :
        variant == 'accent'    ? colorAccent    :
        variant == 'success'   ? colorSuccess   :
        variant == 'warning'   ? colorWarning   :
        variant == 'danger'    ? colorDanger    :
        null
    %}

    {% if v is empty %}
        <svg width="{{ w }}" height="{{ h }}"></svg>
    {% else %}
        {% set sorted = v|sort %}
        {% set minv   = sorted|first %}
        {% set maxv   = sorted|last %}
        {% set span   = (maxv - minv) == 0 ? 1 : (maxv - minv) %}
        {% set n      = v|length %}

        {# Couleur auto selon tendance si variant='auto' #}
        {% if strokeColor is null %}
            {% set trend = (v|last) - (v|first) %}
            {% set strokeColor = trend > 0 ? colorSuccess : (trend < 0 ? colorDanger : colorSecondary) %}
        {% endif %}

        {% if n < 2 %}
            {% set y = 3 + (1 - ((v|first - minv)/span)) * (h - 6) %}
            <svg width="{{ w }}" height="{{ h }}" role="img" aria-label="sparkline">
                <line x1="3" y1="{{ y }}" x2="{{ w - 3 }}" y2="{{ y }}"
                      stroke="{{ strokeColor }}" stroke-width="{{ strokeWidth }}" stroke-linecap="round"/>
                {% if showDot %}
                    <circle r="2.6" fill="{{ strokeColor }}" cx="{{ w/2 }}" cy="{{ y }}" />
                {% endif %}
            </svg>
        {% else %}
            {% set step = (w - 6) / (n - 1) %}
            {% set pts = [] %}
            {% for i, val in v %}
                {% set x = 3 + i * step %}
                {% set y = 3 + (1 - ((val - minv)/span)) * (h - 6) %}
                {% set pts = pts|merge([x ~ ',' ~ y]) %}
            {% endfor %}
            {% set lastX = 3 + (n - 1) * step %}
            {% set lastY = 3 + (1 - ((v|last - minv)/span)) * (h - 6) %}

            <svg width="{{ w }}" height="{{ h }}" role="img" aria-label="sparkline">
                {# ligne guide (optionnelle) — gris neutre pour la lisibilité #}
                <line x1="3" y1="{{ 3 + (1 - ((0 - minv)/span)) * (h - 6) }}" x2="{{ w - 3 }}"
                      y2="{{ 3 + (1 - ((0 - minv)/span)) * (h - 6) }}"
                      stroke="{{ colorMuted }}" stroke-width="1" stroke-dasharray="2 3" opacity="0.4" style="display:none"/>
                <polyline fill="none" stroke="{{ strokeColor }}" stroke-width="{{ strokeWidth }}"
                          stroke-linecap="round" stroke-linejoin="round"
                          points="{{ pts|join(' ') }}" />
                {% if showDot %}
                    <circle r="2.6" fill="{{ strokeColor }}" cx="{{ lastX }}" cy="{{ lastY }}" />
                {% endif %}
            </svg>
        {% endif %}
    {% endif %}
{% endmacro %}


{% macro spark_area(values, w, h, variant='auto', strokeWidth=1.6, showDot=true) %}
    {% set w = w|default(140) %}
    {% set h = h|default(44) %}
    {% set v = values|default([]) %}

    {% set colorPrimary   = 'var(--primary-color)'   %}  {# vert #}
    {% set colorSecondary = 'var(--secondary-color)' %}  {# jaune #}
    {% set colorAccent    = 'var(--accent-color)'    %}  {# rouge #}
    {% set colorSuccess   = 'var(--success-color)'   %}
    {% set colorWarning   = 'var(--warning-color)'   %}
    {% set colorDanger    = 'var(--danger-color)'    %}
    {% set colorMuted     = 'var(--border-dark)'     %}

    {% set strokeColor =
        variant == 'primary'   ? colorPrimary   :
        variant == 'secondary' ? colorSecondary :
        variant == 'accent'    ? colorAccent    :
        variant == 'success'   ? colorSuccess   :
        variant == 'warning'   ? colorWarning   :
        variant == 'danger'    ? colorDanger    :
        null
    %}

    {% if v is empty %}
        <svg width="{{ w }}" height="{{ h }}"></svg>
    {% else %}
        {% set sorted = v|sort %}
        {% set minv   = sorted|first %}
        {% set maxv   = sorted|last %}
        {% set span   = (maxv - minv) == 0 ? 1 : (maxv - minv) %}
        {% set n      = v|length %}

        {# Couleur auto si non forcée #}
        {% if strokeColor is null %}
            {% set trend = (v|last) - (v|first) %}
            {% set strokeColor = trend > 0 ? colorSuccess : (trend < 0 ? colorDanger : colorSecondary) %}
        {% endif %}

        {% set step = n < 2 ? (w - 6) : (w - 6) / (n - 1) %}
        {% set pts = [] %}
        {% for i, val in v %}
            {% set x = 3 + i * step %}
            {% set y = 3 + (1 - ((val - minv)/span)) * (h - 6) %}
            {% set pts = pts|merge([x ~ ',' ~ y]) %}
        {% endfor %}

        {% set lastX = 3 + (n - 1) * step %}
        {% set lastY = 3 + (1 - ((v|last - minv)/span)) * (h - 6) %}
        {% set baseY = h - 3 %}
        {% set areaPts = (pts|join(' ')) ~ ' ' ~ lastX ~ ',' ~ baseY ~ ' ' ~ 3 ~ ',' ~ baseY %}

        {# id de dégradé simple pour éviter les collisions courantes #}
        {% set gid = 'grad-' ~ w ~ '-' ~ h ~ '-' ~ n %}

        <svg width="{{ w }}" height="{{ h }}" role="img" aria-label="sparkline area">
            <defs>
                <linearGradient id="{{ gid }}" x1="0" y1="0" x2="0" y2="1">
                    {# Utilise la même couleur que le trait ; on joue sur l’opacité #}
                    <stop offset="0%"  style="stop-color: {{ strokeColor }}; stop-opacity: 0.26;" />
                    <stop offset="100%" style="stop-color: {{ strokeColor }}; stop-opacity: 0.04;" />
                </linearGradient>
            </defs>

            {# Ligne (courbe) #}
            {% if n == 1 %}
                {% set y = 3 + (1 - ((v|first - minv)/span)) * (h - 6) %}
                <line x1="3" y1="{{ y }}" x2="{{ w - 3 }}" y2="{{ y }}"
                      stroke="{{ strokeColor }}" stroke-width="{{ strokeWidth }}" stroke-linecap="round"/>
                {% if showDot %}
                    <circle r="2.6" fill="{{ strokeColor }}" cx="{{ w/2 }}" cy="{{ y }}" />
                {% endif %}
            {% else %}
                {# Aire sous la courbe #}
                <polygon points="{{ areaPts }}" fill="url(#{{ gid }})" />

                {# Trait #}
                <polyline fill="none" stroke="{{ strokeColor }}" stroke-width="{{ strokeWidth }}"
                          stroke-linecap="round" stroke-linejoin="round"
                          points="{{ pts|join(' ') }}" />

                {% if showDot %}
                    <circle r="2.6" fill="{{ strokeColor }}" cx="{{ lastX }}" cy="{{ lastY }}" />
                {% endif %}
            {% endif %}
        </svg>
    {% endif %}
{% endmacro %}

{% macro gantt_svg(activities, width = 794, height = 200, BAR_HEIGHT = 10, ROW_GAP = 6) %}
    {% if activities is empty %}
        <div class="muted small" style="text-align: center; padding: 10px;">
            Aucune activité avec des dates définies
        </div>
    {% else %}
        {# ----- Paramètres dérivés ----- #}
        {% set ROW_SPACING = BAR_HEIGHT + ROW_GAP %}
        {% set actLen = activities|length %}
        {% set rows = actLen < 8 ? actLen : 8 %}
        {% set dynamicHeight = 80 + (rows * ROW_SPACING) %}
        {% set H = height > dynamicHeight ? height : dynamicHeight %}

        {# ----- Recherche min/max via comparaisons (sans min/max) ----- #}
        {% set minTs = null %}
        {% set maxTs = null %}
        {% for activity in activities %}
            {% if activity.startDate %}
                {% set ts = activity.startDate|date('U') %}
                {% set minTs = minTs is null ? ts : (ts < minTs ? ts : minTs) %}
            {% endif %}
            {% if activity.endDate %}
                {% set te = activity.endDate|date('U') %}
                {% set maxTs = maxTs is null ? te : (te > maxTs ? te : maxTs) %}
            {% endif %}
        {% endfor %}

        {# Fallback si pas de dates #}
        {% if minTs is null or maxTs is null %}
            {% set fallbackMin = ('now'|date('Y-m-01'))|date('U') %}
            {% set fallbackMax = ('now'|date_modify('+3 months')|date('Y-m-d'))|date('U') %}
            {% set minTs = minTs is null ? fallbackMin : minTs %}
            {% set maxTs = maxTs is null ? fallbackMax : maxTs %}
        {% endif %}

        {% set totalDuration = maxTs - minTs %}
        {% set today = "now"|date('U') %}
        {% set graphWidth = width - 160 %}
        {% set todayPosition = totalDuration > 0 ? (((today - minTs) / totalDuration) * graphWidth)|round(2) + 160 : 160 %}

        {# Couleurs par statut #}
        {% set colorMap = {
            'completed': '#10c469',
            'in_progress': '#4f46e5',
            'delayed': '#ef4444',
            'not_started': '#94a3b8'
        } %}

        <svg width="{{ width }}" height="{{ H }}" viewBox="0 0 {{ width }} {{ H }}" xmlns="http://www.w3.org/2000/svg" style="display: block; margin: 15px 0;">
            {# Titre #}
            <text x="10" y="20" fill="#374151" font-size="12" font-weight="600">Timeline des activités</text>

            {# Ligne de temps #}
            <line x1="160" y1="{{ H - 30 }}" x2="{{ width }}" y2="{{ H - 30 }}" stroke="#cbd5e1" stroke-width="2" stroke-linecap="round" />

            {# Marqueur du jour #}
            <line x1="{{ todayPosition }}" y1="40" x2="{{ todayPosition }}" y2="{{ H - 35 }}" stroke="#ef4444" stroke-width="2" stroke-dasharray="4,2" />
            <circle cx="{{ todayPosition }}" cy="35" r="6" fill="#ef4444" />
            <text x="{{ todayPosition }}" y="25" text-anchor="middle" fill="#ef4444" font-size="10" font-weight="bold">Aujourd'hui</text>

            {# Grille (5 repères) #}
            {% for i in 0..4 %}
                {% set xPos = 160 + (i * (graphWidth / 4)) %}
                <line x1="{{ xPos }}" y1="40" x2="{{ xPos }}" y2="{{ H - 30 }}" stroke="#e2e8f0" stroke-width="1" />
                <text x="{{ xPos }}" y="{{ H - 15 }}" text-anchor="middle" fill="#64748b" font-size="9">
                    {% set intervalTs = minTs + (i * (totalDuration / 4)) %}
                    {{ intervalTs|date('M')|trans }}
                </text>
            {% endfor %}

            {# Activités (max 8) #}
            {% for activity in activities|slice(0, 8) %}
                {% if activity.startDate and activity.endDate %}
                    {% set sTs = activity.startDate|date('U') %}
                    {% set eTs = activity.endDate|date('U') %}

                    {% set startPos = 160 + (((sTs - minTs) / totalDuration) * graphWidth)|round(2) %}
                    {% set endPos = 160 + (((eTs - minTs) / totalDuration) * graphWidth)|round(2) %}
                    {% set activityWidth = endPos - startPos %}
                    {% set activityWidth = activityWidth < 4 ? 4 : activityWidth %}

                    {% set color = colorMap[activity.status|default('not_started')] ?? '#94a3b8' %}
                    {% set yPos = 50 + (loop.index0 * ROW_SPACING) %}

                    {# Label gauche #}
                    <text x="155" y="{{ yPos + (BAR_HEIGHT * 0.8) }}" text-anchor="end" fill="#374151" font-size="10" font-weight="500">
                        {{ activity.name|slice(0, 20) }}{% if activity.name|length > 20 %}...{% endif %}
                    </text>

                    {# Barre #}
                    <rect x="{{ startPos }}" y="{{ yPos }}" width="{{ activityWidth }}" height="{{ BAR_HEIGHT }}" rx="2" fill="{{ color }}" opacity="0.9" />

                    {# Progression #}
                    {% set progressWidth = activityWidth * (activity.progress|default(0) / 100) %}
                    {% if progressWidth > 0 %}
                        <rect x="{{ startPos }}" y="{{ yPos }}" width="{{ progressWidth }}" height="{{ BAR_HEIGHT }}" rx="2" fill="white" opacity="0.3" />
                    {% endif %}

                    {# % progression #}
                    {% if activity.progress|default(0) > 0 %}
                        <text x="{{ startPos + 5 }}" y="{{ yPos + (BAR_HEIGHT * 0.7) }}" fill="white" font-size="{{ (BAR_HEIGHT * 0.45)|round(0, 'floor') }}" font-weight="lighter">
                            {{ activity.progress|default(0) }}%
                        </text>
                    {% endif %}
                {% endif %}
            {% endfor %}

            {# Années min/max (dérivées des timestamps) #}
            <text x="140" y="{{ H }}" fill="#64748b" font-size="9">{{ minTs|date('Y') }}</text>
            <text x="{{ width }}" y="{{ H }}" text-anchor="end" fill="#64748b" font-size="9">{{ maxTs|date('Y') }}</text>
        </svg>
    {% endif %}
{% endmacro %}