{#
    SAM Progress Ring Component - Circular progress indicator (SVG)

    Parameters:
    - value: number (required) - Progress percentage (0-100)
    - size: number - Ring size in pixels (default: 50)
    - strokeWidth: number - Stroke width (default: 4)
    - entity: string - Entity type for color: 'users', 'cohorts', 'courses', 'success', 'warning', 'danger'
    - showValue: bool - Show percentage value in center (default: true)
    - label: string - Optional label below value

    Usage:
    {% include 'sam/_components/progress_ring.html.twig' with {value: 75, entity: 'courses'} %}
    {% include 'sam/_components/progress_ring.html.twig' with {value: 45, size: 80, strokeWidth: 6} %}
#}

{% set progressValue = value|default(0)|round %}
{% set ringSize = size|default(50) %}
{% set stroke = strokeWidth|default(4) %}
{% set entityType = entity|default('courses') %}

{# Auto-detect status color based on value if not using entity colors #}
{% if entity is not defined %}
    {% if progressValue >= 70 %}
        {% set entityType = 'success' %}
    {% elseif progressValue >= 40 %}
        {% set entityType = 'warning' %}
    {% else %}
        {% set entityType = 'danger' %}
    {% endif %}
{% endif %}

{# Calculate SVG values #}
{% set radius = (ringSize / 2) - (stroke / 2) - 3 %}
{% set circumference = 2 * 3.14159 * radius %}
{% set dashOffset = circumference - (progressValue / 100 * circumference) %}

<div class="sam-progress-ring sam-progress-ring--{{ entityType }}" style="width: {{ ringSize }}px; height: {{ ringSize }}px;">
    <svg viewBox="0 0 {{ ringSize }} {{ ringSize }}" width="{{ ringSize }}" height="{{ ringSize }}">
        {# Background circle #}
        <circle
            cx="{{ ringSize / 2 }}"
            cy="{{ ringSize / 2 }}"
            r="{{ radius }}"
            fill="none"
            stroke="var(--sam-progress-ring-bg, #F0F2F5)"
            stroke-width="{{ stroke }}"
        />
        {# Progress circle #}
        <circle
            class="sam-progress-ring__circle"
            cx="{{ ringSize / 2 }}"
            cy="{{ ringSize / 2 }}"
            r="{{ radius }}"
            fill="none"
            stroke-width="{{ stroke }}"
            stroke-linecap="round"
            stroke-dasharray="{{ circumference }}"
            stroke-dashoffset="{{ dashOffset }}"
            transform="rotate(-90 {{ ringSize / 2 }} {{ ringSize / 2 }})"
        />
    </svg>
    {% if showValue|default(true) %}
    <span class="sam-progress-ring__value">{{ progressValue }}</span>
    {% endif %}
    {% if label is defined %}
    <span class="sam-progress-ring__label">{{ label }}</span>
    {% endif %}
</div>