{#
 # ============================================================================
 # MOLECULE: CHART CARD
 # ============================================================================
 #
 # Carte enveloppant un graphique : en-tête (pastille d'icône, titre,
 # sous-titre), bloc d'actions à droite, corps portant le canvas et l'état vide.
 #
 # Elle ne dessine rien elle-même : le rendu est le travail d'un contrôleur
 # Stimulus, branché par le paramètre `attr`. La molécule ne connaît donc ni
 # Chart.js ni le domaine — seulement la boîte.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - icon (pastille d'en-tête et état vide)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type    | Défaut        | Description                          |
 # |-------------|---------|---------------|--------------------------------------|
 # | title       | string  | 'Graphique'   | Titre de la carte                    |
 # | subtitle    | string  | null          | Ligne de contexte sous le titre      |
 # | icon        | string  | null          | Nom d'icône de la pastille           |
 # | iconColor   | string  | 'primary'     | primary, info, success, warning,     |
 # |             |         |               | error, cohorts                       |
 # | height      | string  | 'md'          | sm, md, lg (hauteur de la zone)      |
 # | emptyText   | string  | 'Aucune…'     | Texte de l'état vide                 |
 # | emptyIcon   | string  | 'chart'       | Icône de l'état vide                 |
 # | attr        | object  | {}            | Attributs HTML du conteneur          |
 # | class       | string  | ''            | Classes additionnelles               |
 #
 # Blocs (via {% embed %}) : actions, body, aside
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # {% embed '_molecules/chart-card/chart-card.html.twig' with {
 #     title: 'Commissions', subtitle: 'Douze mois', icon: 'chart',
 #     attr: { 'data-controller': 'shared--trend-chart' }
 # } only %}
 #     {% block actions %}…pastilles de période…{% endblock %}
 # {% endembed %}
 #
 # ============================================================================
 #}

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

{% set title = title ?? 'Graphique' %}
{% set subtitle = subtitle ?? null %}
{% set icon = icon ?? null %}
{% set iconColor = iconColor ?? 'primary' %}
{% set height = height ?? 'md' %}
{% set emptyText = emptyText ?? 'Aucune donnée' %}
{% set emptyIcon = emptyIcon ?? 'chart' %}
{% set attr = attr ?? {} %}
{% set class = class ?? '' %}

{# ============================================================================
   CLASSES TAILWIND
   Classes complètes dans chaque branche : une classe construite dynamiquement
   (`bg-{{ iconColor }}/10`) serait purgée au build.
   ============================================================================ #}

{% set bgMap = {
    'primary': 'bg-primary/10',
    'info': 'bg-info/10',
    'success': 'bg-success/10',
    'warning': 'bg-warning/10',
    'error': 'bg-error/10',
    'cohorts': 'bg-cohorts/10'
} %}

{% set heightMap = { 'sm': 'h-40', 'md': 'h-56', 'lg': 'h-72' } %}

{% set iconBg = bgMap[iconColor] ?? bgMap['primary'] %}
{% set zoneHeight = heightMap[height] ?? heightMap['md'] %}

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

<section class="bg-white rounded-2xl border border-gray-200 shadow-sm flex flex-col {{ class }}"
         {% for key, value in attr %}{{ key }}="{{ value }}" {% endfor %}>

    <div class="px-5 pt-4 pb-3 flex items-start justify-between gap-4 border-b border-gray-100">
        <div class="flex items-center gap-2.5 min-w-0">
            {% if icon %}
                <div class="w-7 h-7 rounded-lg {{ iconBg }} flex items-center justify-center shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with { name: icon, size: 'xs', color: iconColor } only %}
                </div>
            {% endif %}
            <div class="min-w-0">
                <p class="text-sm font-semibold text-gray-900 truncate">{{ title }}</p>
                {% if subtitle %}
                    <p class="text-xs text-gray-400 mt-0.5 truncate">{{ subtitle }}</p>
                {% endif %}
            </div>
        </div>

        <div class="shrink-0">
            {% block actions %}{% endblock %}
        </div>
    </div>

    <div class="p-5 flex-1 min-h-0">
        {% block body %}
            <div class="{{ zoneHeight }} relative">
                <canvas data-chart-card-target="canvas" class="w-full h-full"></canvas>

                {# Révélé par le contrôleur quand la série est vide. Rendu masqué :
                   sans données, un canvas vide ne dit rien, et sans JS la carte
                   reste muette plutôt que d'annoncer à tort une absence. #}
                <div data-chart-card-target="empty"
                     class="hidden absolute inset-0 flex flex-col items-center justify-center text-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 %}{% endblock %}
    </div>
</section>