{#
 # ============================================================================
 # MOLECULE: SECTION ACCORDION ITEM
 # ============================================================================
 #
 # Affiche une section de formation dans un accordéon avec ses activités.
 # Utilisé dans les pages de détail utilisateur et de détail de formation SAM.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre       | Type   | Défaut   | Description                          |
 # |-----------------|--------|----------|--------------------------------------|
 # | section         | object | (requis) | Entité section (id, name, position)  |
 # | sectionProgress | object | (requis) | {completed, total}                   |
 # | activities      | array  | []       | Tableau d'actData :                  |
 # |                 |        |          |   activity: entité activité          |
 # |                 |        |          |   isTrackable: bool                  |
 # |                 |        |          |   completed: bool                    |
 # |                 |        |          |   score: float|null                  |
 # |                 |        |          |   attempts: int|null                 |
 # |                 |        |          |   timeSpent: int                     |
 # |                 |        |          |   timeFormatted: string              |
 # |                 |        |          |   completedAt: DateTime|null         |
 # | controllerScope | string | 'sam--accordion' | Nom du controller Stimulus  |
 #
 # ============================================================================
 # EXEMPLE D'UTILISATION
 # ============================================================================
 #
 # {% include '_molecules/section-accordion-item/section-accordion-item.html.twig' with {
 #     section: sectionData.section,
 #     sectionProgress: sectionData.progress,
 #     activities: sectionData.activities
 # } only %}
 #
 # ============================================================================
 #}

{% set section = section %}
{% set sectionProgress = sectionProgress|default({completed: 0, total: 0}) %}
{% set activities = activities|default([]) %}
{% set controllerScope = controllerScope|default('sam--accordion') %}

{% set completedCount = sectionProgress.completed|default(0) %}
{% set totalCount = sectionProgress.total|default(0) %}
{% set hasTracked = completedCount > 0 %}

<div class="border border-gray-100 rounded-xl overflow-hidden bg-white shadow-sm">

    {# ── Section header (accordion toggle) ─────────────────────────────────── #}
    <button type="button"
            class="w-full flex items-center gap-3 px-4 py-3.5 hover:bg-gray-50/80 transition-colors text-left sam-accordion__header"
            data-action="click->{{ controllerScope }}#toggle"
            data-item-id="section-{{ section.id }}"
            data-level="section"
            data-{{ controllerScope }}-target="sectionToggle">

        {# Position badge #}
        <span class="w-7 h-7 rounded-lg bg-primary/10 text-xs font-bold text-primary flex items-center justify-center shrink-0">
            {{ section.position }}
        </span>

        {# Title + meta #}
        <div class="flex-1 min-w-0">
            <span class="text-sm font-semibold text-gray-800 block truncate">
                {{ section.name|default('Section ' ~ section.position) }}
            </span>
            {% if totalCount > 0 %}
                <span class="text-xs text-gray-400 mt-0.5 block">{{ totalCount }} activité{{ totalCount > 1 ? 's' : '' }}</span>
            {% endif %}
        </div>

        {# Progress ring #}
        {% if totalCount > 0 %}
            {% set progressPercent = ((completedCount / totalCount) * 100)|round %}
            {% set ringVariant = progressPercent >= 75 ? 'success' : (progressPercent >= 40 ? 'warning' : 'error') %}
            {% include '_molecules/progress-ring/progress-ring.html.twig' with {
                value: progressPercent,
                size: 'sm',
                variant: ringVariant,
                thickness: 'normal',
                animate: false,
            } only %}
        {% endif %}

        {# Chevron toggle #}
        <span class="w-7 h-7 rounded-lg bg-gray-100 flex items-center justify-center shrink-0 text-gray-400 sam-accordion__icon" style="transition:transform .3s ease">
            <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
                <polyline points="6 9 12 15 18 9"/>
            </svg>
        </span>
    </button>

    {# ── Activities list (collapsed by default) ────────────────────────────── #}
    <div class="sam-accordion__content border-t border-gray-100"
         data-content-id="section-{{ section.id }}"
         data-level="section"
         style="overflow:hidden;max-height:0;transition:max-height .3s ease">

        {% if activities|length == 0 %}
            <div class="px-5 py-4 text-xs text-gray-400 flex items-center gap-2">
                {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'xs', color: 'gray' } only %}
                Aucune activité dans cette section
            </div>
        {% else %}
            <div class="divide-y divide-gray-50">
            {% for actData in activities %}
                {% set activity = actData.activity %}
                {% set isTrackable = actData.isTrackable|default(false) %}
                {% set isCompleted = actData.completed|default(false) %}

                <div class="flex items-center gap-3 px-4 py-3 {{ isCompleted ? 'bg-success/5' : '' }} hover:bg-gray-50/60 transition-colors">

                    {# Type icon — vert si validé, gris si non suivi, neutre sinon #}
                    {% if isCompleted %}
                        {% set iconBg = 'bg-success/15' %}
                        {% set iconColor = 'success' %}
                    {% elseif not isTrackable %}
                        {% set iconBg = 'bg-gray-100' %}
                        {% set iconColor = 'gray-300' %}
                    {% else %}
                        {% set iconBg = 'bg-gray-100' %}
                        {% set iconColor = 'gray-400' %}
                    {% endif %}
                    <div class="w-7 h-7 rounded-lg {{ iconBg }} flex items-center justify-center shrink-0">
                        {% include 'sam/_activity_icon.html.twig' with {type: activity.type, color: iconColor} only %}
                    </div>

                    {# Name + type #}
                    <div class="flex-1 min-w-0">
                        <span class="text-sm font-medium text-gray-800 truncate block">{{ activity.name }}</span>
                        <span class="text-xs text-gray-400 capitalize">{{ activity.type }}</span>
                    </div>

                    {# Right metadata & badge #}
                    <div class="flex items-center gap-1.5 shrink-0">
                        {% if not isTrackable %}
                            <span class="text-xs text-gray-400 bg-gray-100 border border-gray-200 px-2 py-0.5 rounded-full">Non suivi</span>
                        {% else %}
                            {# Quiz score #}
                            {% if activity.type == 'quiz' and actData.score is defined and actData.score is not null %}
                                <span class="inline-flex items-center gap-1 text-xs font-semibold text-primary bg-primary/10 border border-primary/20 px-2 py-0.5 rounded-full">
                                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="12" cy="12" r="10"/><line x1="12" y1="8" x2="12" y2="12"/><line x1="12" y1="16" x2="12.01" y2="16"/></svg>
                                    {{ actData.score|number_format(0) }}%
                                </span>
                                {% if actData.attempts is defined and actData.attempts %}
                                    <span class="text-xs text-gray-400 bg-gray-50 border border-gray-100 px-1.5 py-0.5 rounded-full">
                                        {{ actData.attempts }}×
                                    </span>
                                {% endif %}
                            {% endif %}
                            {# Completion date #}
                            {% if actData.completedAt is defined and actData.completedAt %}
                                <span class="text-xs text-gray-400 bg-gray-50 border border-gray-100 px-1.5 py-0.5 rounded-full">
                                    {{ actData.completedAt|date('d/m') }}
                                </span>
                            {% endif %}
                            {# Status badge #}
                            {% if isCompleted %}
                                <span class="inline-flex items-center gap-1 text-xs text-success bg-success/10 border border-success/20 px-2 py-0.5 rounded-full font-medium">
                                    <svg width="8" height="8" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="20 6 9 17 4 12"/></svg>
                                    Validé
                                </span>
                            {% endif %}
                        {% endif %}

                        {% if activity.url is defined and activity.url %}
                            <a href="{{ activity.url }}" target="_blank" rel="noopener"
                               class="text-gray-300 hover:text-primary transition-colors" data-tooltip="Ouvrir sur Moodle">
                                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/>
                                    <polyline points="15 3 21 3 21 9"/>
                                    <line x1="10" y1="14" x2="21" y2="3"/>
                                </svg>
                            </a>
                        {% endif %}
                    </div>
                </div>
            {% endfor %}
            </div>
        {% endif %}
    </div>
</div>