{#
 # ============================================================================
 # MOLECULE: PROGRESS RING
 # ============================================================================
 #
 # Cercle de progression SVG avec pourcentage central.
 # Utilisé pour afficher des métriques de complétion.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/typography/typography.html.twig (optionnel)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | value         | number  | 0         | Pourcentage (0-100)               |
 # | size          | string  | 'md'      | xs, sm, md, lg, xl                |
 # | variant       | string  | 'primary' | primary, success, warning, error, info, cohorts, muted |
 # | showLabel     | bool    | true      | Afficher le pourcentage central   |
 # | thickness     | string  | 'normal'  | thin, normal, thick               |
 # | animate       | bool    | true      | Animation au chargement           |
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Cercle simple:
 # {% include '_molecules/progress-ring/progress-ring.html.twig' with {
 #     value: 75
 # } %}
 #
 # Grande taille sans label:
 # {% include '_molecules/progress-ring/progress-ring.html.twig' with {
 #     value: 50,
 #     size: 'xl',
 #     showLabel: false,
 #     variant: 'success'
 # } %}
 #
 # ============================================================================
 #}

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

{% set value = value ?? 0 %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'primary' %}
{% set showLabel = showLabel ?? true %}
{% set label = label ?? null %}
{% set thickness = thickness ?? 'normal' %}
{% set animate = animate ?? true %}
{% set class = class ?? '' %}

{# ============================================================================
   CONFIGURATION DES TAILLES
   ============================================================================ #}

{% set sizeConfig = {
    'xs': { 'size': 32, 'text': 'text-[8px]', 'fontWeight': 'font-semibold' },
    'sm': { 'size': 48, 'text': 'text-xs', 'fontWeight': 'font-semibold' },
    'md': { 'size': 64, 'text': 'text-sm', 'fontWeight': 'font-bold' },
    'lg': { 'size': 96, 'text': 'text-lg', 'fontWeight': 'font-bold' },
    'xl': { 'size': 128, 'text': 'text-2xl', 'fontWeight': 'font-bold' }
} %}

{% set thicknessConfig = {
    'thin': 2,
    'normal': 4,
    'thick': 6
} %}

{% set variantConfig = {
    'primary': { 'color': 'stroke-primary', 'text': 'text-primary' },
    'success': { 'color': 'stroke-success', 'text': 'text-success' },
    'warning': { 'color': 'stroke-warning', 'text': 'text-warning' },
    'error': { 'color': 'stroke-error', 'text': 'text-error' },
    'info': { 'color': 'stroke-info', 'text': 'text-info' },
    'cohorts': { 'color': 'stroke-cohorts', 'text': 'text-cohorts' },
    'muted': { 'color': 'stroke-gray-400', 'text': 'text-gray-500' }
} %}

{% set sConfig = sizeConfig[size] ?? sizeConfig['md'] %}
{% set tConfig = thicknessConfig[thickness] ?? thicknessConfig['normal'] %}
{% set vConfig = variantConfig[variant] ?? variantConfig['primary'] %}

{# Calculs SVG #}
{% set svgSize = sConfig.size %}
{% set strokeWidth = tConfig %}
{% set radius = (svgSize - strokeWidth) / 2 %}
{% set circumference = 2 * 3.14159 * radius %}
{% set offset = circumference - (value / 100 * circumference) %}

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

<div class="relative inline-flex items-center justify-center {{ class }}" style="width: {{ svgSize }}px; height: {{ svgSize }}px;">
    <svg
        class="transform -rotate-90"
        width="{{ svgSize }}"
        height="{{ svgSize }}"
        viewBox="0 0 {{ svgSize }} {{ svgSize }}"
    >
        {# Cercle de fond #}
        <circle
            class="stroke-gray-200"
            cx="{{ svgSize / 2 }}"
            cy="{{ svgSize / 2 }}"
            r="{{ radius }}"
            fill="none"
            stroke-width="{{ strokeWidth }}"
        />
        {# Cercle de progression #}
        <circle
            class="{{ vConfig.color }} {{ animate ? 'transition-all duration-1000 ease-out' : '' }}"
            cx="{{ svgSize / 2 }}"
            cy="{{ svgSize / 2 }}"
            r="{{ radius }}"
            fill="none"
            stroke-width="{{ strokeWidth }}"
            stroke-linecap="round"
            stroke-dasharray="{{ circumference }}"
            stroke-dashoffset="{{ offset }}"
        />
    </svg>

    {# Label central #}
    {% if showLabel %}
        {% if label %}
            <span class="absolute inset-0 flex items-center justify-center {{ sConfig.text }} {{ sConfig.fontWeight }} {{ vConfig.text }}">
                {{ label }}
            </span>
        {% else %}
            <span class="absolute inset-0 flex items-center justify-center {{ sConfig.text }} {{ sConfig.fontWeight }} {{ vConfig.text }}">
                {{ value }}%
            </span>
        {% endif %}
    {% endif %}
</div>