{% set byPartner  = financing.byPartner ?? [] %}
{% set timeSeries = financing.timeSeries ?? {} %}
{% set alerts     = financing.alerts ?? [] %}
{% set currency   = program.currency ?? 'XOF' %}
{% set _allocated = program.totalBudget|default(0) %}

{# ══════════════════════════════════════════════════════════════
   BLOC 1 — Alertes budgétaires
══════════════════════════════════════════════════════════════ #}
{% if alerts is not empty %}
    {% set dangerCount = alerts|filter(a => a.level == 'danger')|length %}
    {% set warnCount   = alerts|filter(a => a.level == 'warning')|length %}

    {% set bgMap   = {danger: 'bg-danger-subtle', warning: 'bg-warning-subtle', info: 'bg-success-subtle'} %}
    {% set textMap = {danger: 'text-danger',      warning: 'text-warning',      info: 'text-success'} %}

    {% set collapseId = 'budgetAlertsCollapse_' ~ (program.id ?? 'global') %}

    <div class="mb-3 bg-light-subtle border rounded p-1">

        {# Header (toggle collapse) #}
        <button class="btn w-100 p-0 my-2 text-start border-0"
                type="button"
                data-bs-toggle="collapse"
                data-bs-target="#{{ collapseId }}"
                aria-expanded="false"
                aria-controls="{{ collapseId }}">

            <div class="d-flex align-items-center justify-content-between">
                <div class="d-flex align-items-center gap-2 flex-wrap">
                    <span class="fw-semibold small text-body d-inline-flex align-items-center">
                        <i class="mdi mdi-alert-outline me-1 text-danger"></i>
                        Alertes budgétaires
                    </span>

                    {% if dangerCount > 0 %}
                        <span class="badge bg-danger rounded-pill px-2">{{ dangerCount }}</span>
                    {% endif %}
                    {% if warnCount > 0 %}
                        <span class="badge bg-warning text-dark rounded-pill px-2">{{ warnCount }}</span>
                    {% endif %}

                    <span class="badge bg-light text-muted border rounded-pill px-2">
                        {{ alerts|length }} total
                    </span>
                </div>

                <span class="btn-link btn small d-inline-flex align-items-center gap-1">
                    <span class="d-none d-sm-inline">Afficher</span>
                    <i class="mdi mdi-chevron-down"></i>
                </span>
            </div>
        </button>

        {# Collapse content #}
        <div id="{{ collapseId }}" class="collapse mt-2">
            <div class="vstack gap-2">
                {% for alert in alerts %}
                    {% set level = alert.level ?? 'info' %}
                    {% set pct = alert.value ?? 0 %}
                    {% if pct < 0 %}{% set pct = 0 %}{% endif %}
                    {% if pct > 100 %}{% set pct = 100 %}{% endif %}

                    <div class="d-flex align-items-start gap-2 p-2 rounded-3 border {{ bgMap[level] ?? 'bg-body-tertiary' }}">
                        <i class="mdi {{ alert.icon }} {{ textMap[level] ?? '' }} fs-6 mt-1 flex-shrink-0"></i>

                        <div class="flex-grow-1 min-w-0">
                            <div class="small fw-semibold text-body">
                                {{ alert.message }}
                            </div>

                            {% if pct > 0 %}
                                <div class="d-flex align-items-center gap-2 mt-1">
                                    <div class="progress flex-grow-1 rounded-pill" style="height:5px; max-width:220px;">
                                        <div class="progress-bar {{ level == 'info' ? 'bg-success' : 'bg-' ~ level }}"
                                             style="width:{{ pct }}%"></div>
                                    </div>
                                    <span class="small text-muted">{{ pct }}%</span>
                                </div>
                            {% endif %}
                        </div>
                    </div>
                {% endfor %}
            </div>
        </div>

    </div>
{% endif %}

{# ══════════════════════════════════════════════════════════════
   BLOC 2 — Bailleurs / Partenaires de financement
══════════════════════════════════════════════════════════════ #}
<div class="mb-4">
    <div class="d-flex align-items-center gap-2 mb-3">
        <span class="border-start border-4 border-primary ps-2 fw-bold text-primary-emphasis">
            Partenaires de financement
        </span>
        <span class="badge bg-primary-subtle text-primary rounded-pill">{{ byPartner|length }} bailleur{{ byPartner|length > 1 ? 's' : '' }}</span>
    </div>

    {% if byPartner is empty %}
        <div class="text-center py-5 text-muted">
            <i class="mdi mdi-handshake-outline d-block fs-2 mb-2"></i>
            <div class="small">Aucun partenaire renseigné sur les lignes budgétaires.</div>
        </div>
    {% else %}

        {# Barre de répartition globale #}
        <div class="card border-0 bg-light rounded-4 p-3 mb-3">
            <div class="small text-muted fw-semibold mb-2">Répartition du budget alloué</div>
            <div class="progress rounded-pill mb-2" style="height:18px;">
                {% set colors = ['bg-primary','bg-success','bg-info','bg-warning','bg-secondary','bg-danger'] %}
                {% for i, row in byPartner %}
                    <div class="progress-bar {{ colors[loop.index0 % colors|length] }} overflow-visible"
                         role="progressbar"
                         style="width:{{ row.share }}%"
                         data-bs-toggle="tooltip"
                         title="{{ row.partner }} — {{ row.share }}%">
                    </div>
                {% endfor %}
            </div>
            <div class="d-flex flex-wrap gap-3">
                {% for i, row in byPartner %}
                    <span class="d-flex align-items-center gap-1 small">
                        <span class="rounded-circle flex-shrink-0 {{ colors[loop.index0 % colors|length] }}"
                              style="width:9px;height:9px;display:inline-block;"></span>
                        <span class="fw-semibold">{{ row.partner }}</span>
                        <span class="text-muted">({{ row.share }}%)</span>
                    </span>
                {% endfor %}
            </div>
        </div>

        {# Tableau des bailleurs #}
        <div class="bg-light-subtle rounded-4 p-3">
            <div class="table-responsive">
                <table class="table table-hover table-sm align-middle mb-0">
                    <thead class="bg-body-tertiary">
                    <tr class="text-uppercase text-muted small">
                        <th class="fw-semibold">Bailleur</th>
                        <th class="fw-semibold text-end">Alloué</th>
                        <th class="fw-semibold text-end">Engagé</th>
                        <th class="fw-semibold text-end">Décaissé</th>
                        <th class="fw-semibold text-center">Taux engagement</th>
                        <th class="fw-semibold text-center">Taux décaissement</th>
                        <th class="fw-semibold text-center">Lignes</th>
                    </tr>
                    </thead>

                    <tbody class="small">
                    {% for row in byPartner %}
                        <tr>
                            {# Bailleur #}
                            <td class="py-2">
                                <div class="d-flex align-items-start gap-2">
                        <span class="badge bg-primary-subtle text-primary rounded-circle d-inline-flex align-items-center justify-content-center"
                              style="width:32px;height:32px;">
                            <i class="mdi mdi-domain"></i>
                        </span>

                                    <div class="min-w-0">
                                        <div class="fw-semibold text-body text-truncate" style="max-width: 320px;">
                                            {{ row.partner }}
                                        </div>

                                        <div class="d-flex align-items-center gap-2 flex-wrap">
                                            {% if row.fundingType %}
                                                <span class="badge bg-secondary-subtle text-secondary rounded-pill">
                                        {{ row.fundingType }}
                                    </span>
                                            {% endif %}
                                            <span class="text-muted small">
                                    {{ row.share }}% du total
                                </span>
                                        </div>
                                    </div>
                                </div>
                            </td>

                            {# Montants #}
                            <td class="text-end py-2">
                                <div class="fw-semibold text-primary">
                                    {{ row.allocated|minify_budget }} {{ row.currency }}
                                </div>
                            </td>

                            <td class="text-end py-2">
                                <div class="fw-semibold text-success">
                                    {{ row.committed|minify_budget }} {{ row.currency }}
                                </div>
                            </td>

                            <td class="text-end py-2">
                                <div class="fw-semibold text-warning">
                                    {{ row.disbursed|minify_budget }} {{ row.currency }}
                                </div>
                            </td>

                            {# Progress - Engagement #}
                            <td class="text-center py-2">
                                <input data-plugin="knobPercent"
                                       data-width="46" data-height="46"
                                       data-bgColor="#0000000D"
                                       data-fgColor="#10B981"
                                       value="{{ row.pctCommitted }}"
                                       data-skin="tron"
                                       data-angleOffset="245" data-angleArc="230"
                                       data-readOnly="true" data-thickness=".35"
                                       aria-label="Avancement global"
                                       style="cursor:default;"/>
                            </td>

                            {# Progress - Décaissement #}
                            <td class="text-center py-2">
                                <input data-plugin="knobPercent"
                                       data-width="46" data-height="46"
                                       data-bgColor="#0000000D"
                                       data-fgColor="#F2B705"
                                       value="{{ row.pctDisbursed }}"
                                       data-skin="tron"
                                       data-angleOffset="245" data-angleArc="230"
                                       data-readOnly="true" data-thickness=".35"
                                       aria-label="Avancement global"
                                       style="cursor:default;"/>
                            </td>

                            {# Lignes #}
                            <td class="text-center py-2">
                    <span class="badge bg-primary-subtle text-primary rounded-pill px-2">
                        {{ row.linesCount }}
                    </span>
                            </td>
                        </tr>
                    {% endfor %}
                    </tbody>

                    <tfoot class="bg-body-tertiary">
                    <tr class="fw-semibold">
                        <td>Total</td>
                        <td class="text-end text-primary">
                            {{ _allocated|minify_budget }} {{ program.currency }}
                        </td>
                        <td class="text-end text-success">
                            {{ program.getTotalCommittedBudget|minify_budget }} {{ program.currency }}
                        </td>
                        <td class="text-end text-warning">
                            {{ program.totalDisbursedBudget|minify_budget }} {{ program.currency }}
                        </td>
                        <td colspan="3"></td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>

    {% endif %}
</div>

{# ══════════════════════════════════════════════════════════════
   BLOC 3 — Prévisions vs Réalisations
══════════════════════════════════════════════════════════════ #}
<div>
    <div class="d-flex align-items-center gap-2 mb-3">
        <span class="border-start border-4 border-info ps-2 fw-bold text-primary-emphasis">
            Prévisions vs Réalisations
        </span>
        <span class="badge bg-info-subtle text-info rounded-pill">
            {% if timeSeries.granularity is defined and timeSeries.granularity == 'year' %}
                <i class="mdi mdi-calendar-year me-1"></i>par année
            {% else %}
                <i class="mdi mdi-calendar-month me-1"></i>par semestre
            {% endif %}
        </span>
    </div>

    {% if timeSeries.labels is defined and timeSeries.labels is not empty %}
        <div class="card border-0 bg-soft-light rounded-4 p-4">
            <div class="row g-3 mb-3">
                <div class="col-12 col-md-3">
                    <div class="d-flex align-items-center gap-2 small mb-1">
                        <span class="rounded-circle flex-shrink-0"
                              style="width:10px;height:10px;background:#10B981;display:inline-block;"></span>
                        <span class="fw-semibold">Engagement prévu</span>
                    </div>
                    <div class="text-muted" style="font-size:.7rem;">Autorisations d'engagement cumulées</div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="d-flex align-items-center gap-2 small mb-1">
                        <span class="rounded-circle flex-shrink-0"
                              style="width:10px;height:10px;background:#198754;display:inline-block;"></span>
                        <span class="fw-semibold">Engagement réel</span>
                    </div>
                    <div class="text-muted" style="font-size:.7rem;">Montants réellement engagés</div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="d-flex align-items-center gap-2 small mb-1">
                        <span class="rounded-circle flex-shrink-0"
                              style="width:10px;height:10px;background:#F2B705;display:inline-block;"></span>
                        <span class="fw-semibold">Décaissement prévu</span>
                    </div>
                    <div class="text-muted" style="font-size:.7rem;">Autorisations de paiement cumulées</div>
                </div>
                <div class="col-12 col-md-3">
                    <div class="d-flex align-items-center gap-2 small mb-1">
                        <span class="rounded-circle flex-shrink-0"
                              style="width:10px;height:10px;background:#D99E04;display:inline-block;"></span>
                        <span class="fw-semibold">Décaissement réel</span>
                    </div>
                    <div class="text-muted" style="font-size:.7rem;">Montants réellement décaissés</div>
                </div>
            </div>

            <div id="financingTimeSeriesChart"
                 data-labels='{{ timeSeries.labels|json_encode }}'
                 data-authorized-commitment='{{ timeSeries.authorizedCommitment|json_encode }}'
                 data-real-commitment='{{ timeSeries.realCommitment|json_encode }}'
                 data-authorized-disbursement='{{ timeSeries.authorizedDisbursement|json_encode }}'
                 data-real-disbursement='{{ timeSeries.realDisbursement|json_encode }}'
                 data-granularity="{{ timeSeries.granularity|default('semester') }}"
                 data-currency="{{ currency }}"
                 style="position:relative; height:320px;">
                <canvas id="financingTimeSeriesCanvas" class="w-100 h-100"></canvas>
            </div>
        </div>
    {% else %}
        <div class="text-center py-5 text-muted card border-0 bg-light rounded-4">
            <i class="mdi mdi-chart-timeline-variant d-block fs-2 mb-2"></i>
            <div class="small">Aucune allocation périodique renseignée sur les lignes budgétaires.</div>
        </div>
    {% endif %}
</div>