{#
 # ============================================================================
 # ORGANISM: DONUT PANEL
 # ============================================================================
 #
 # Doughnut et légende chiffrée : chart-card + le câblage du contrôleur
 # shared--donut-chart.
 #
 # La légende est rendue sous le canvas, jamais par Chart.js : la couleur ne doit
 # pas porter seule l'information — chaque part est nommée et chiffrée en texte.
 #
 # Pas de paramètre de hauteur : la taille du doughnut est fixée par la largeur
 # du canvas (140 px, cf. plus bas), pas par une zone verticale — contrairement
 # à trend-chart-panel, qui recalcule sa propre hauteur de zone.
 #
 # ============================================================================
 # COMPOSITION
 # ============================================================================
 #
 # - _molecules/chart-card
 # - _atoms/icon
 # - contrôleur Stimulus shared--donut-chart
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre  | Type   | Défaut      | Description                           |
 # |------------|--------|-------------|---------------------------------------|
 # | title      | string | 'Répartition'| Titre de la carte                    |
 # | subtitle   | string | null        | Ligne de contexte                     |
 # | labels     | array  | []          | Noms des parts                        |
 # | data       | array  | []          | Valeurs des parts                     |
 # | suffix     | string | ''          | Suffixe d'unité, ex. ' €'             |
 # | icon       | string | 'chart'     | Icône de la pastille d'en-tête        |
 # | iconColor  | string | 'primary'   | Couleur de la pastille                |
 # | tokens     | array  | null        | Variables CSS des parts, ex.          |
 # |            |        |             | ['--color-cohorts', '--color-pink']   |
 # | emptyIcon  | string | 'chart'     | Icône de l'état vide                  |
 # | emptyText  | string | 'Aucune…'   | Texte de l'état vide                  |
 # | attr       | object | {}          | Attributs additionnels, fusionnés     |
 #
 # ============================================================================
 #}

{% set title = title ?? 'Répartition' %}
{% set subtitle = subtitle ?? null %}
{% set labels = labels ?? [] %}
{% set data = data ?? [] %}
{% set suffix = suffix ?? '' %}
{% set icon = icon ?? 'chart' %}
{% set iconColor = iconColor ?? 'primary' %}
{% set emptyIcon = emptyIcon ?? 'chart' %}
{% set emptyText = emptyText ?? 'Aucune donnée' %}
{% set attr = attr ?? {} %}
{% set tokens = tokens ?? null %}

{# Le câblage du contrôleur gagne en cas de collision : l'appelant ne peut pas
   l'écraser, y compris par erreur. Il apporte ses propres attributs par-dessus
   — un attribut de test, par exemple —, jamais à la place. #}
{% set chartAttr = attr|merge({
    'data-controller': 'shared--donut-chart',
    'data-shared--donut-chart-labels-value': labels|json_encode,
    'data-shared--donut-chart-data-value': data|json_encode,
    'data-shared--donut-chart-suffix-value': suffix
}) %}

{# Omis quand l'appelant ne choisit rien : le contrôleur garde alors sa palette
   par défaut, plutôt que de recevoir un tableau vide et de ne rien colorer. #}
{% if tokens %}
    {% set chartAttr = chartAttr|merge({ 'data-shared--donut-chart-tokens-value': tokens|json_encode }) %}
{% endif %}

{% embed '_molecules/chart-card/chart-card.html.twig' with {
    title: title, subtitle: subtitle, icon: icon, iconColor: iconColor,
    emptyIcon: emptyIcon, emptyText: emptyText, attr: chartAttr
} only %}
    {% block body %}
        <div class="flex flex-col items-center">
            {# `width:140px` est une largeur de canvas, pas une valeur de charte :
               Chart.js dimensionne son rendu sur la boîte du canvas, et Tailwind
               n'a pas de classe équivalente. Même choix que sam/index.html.twig:273. #}
            <div style="width:140px">
                <canvas data-shared--donut-chart-target="canvas"></canvas>
            </div>
            <div data-shared--donut-chart-target="empty"
                 class="hidden py-6 flex flex-col items-center text-gray-400 gap-2">
                {% include '_atoms/icon/icon.html.twig' with { name: emptyIcon, size: '2xl', color: 'gray' } only %}
                <p class="text-sm">{{ emptyText }}</p>
            </div>
        </div>
    {% endblock %}

    {% block aside %}
        <div data-shared--donut-chart-target="legend" class="hidden mt-4 w-full"></div>
    {% endblock %}
{% endembed %}