{#
 # ============================================================================
 # ATOM: RADIO
 # ============================================================================
 #
 # Bouton radio paramétrable utilisant 100% Tailwind CSS.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type    | Défaut    | Description                              |
 # |-------------|---------|-----------|------------------------------------------|
 # | label       | string  | null      | Label du radio                           |
 # | checked     | bool    | false     | État sélectionné                         |
 # | name        | string  | null      | Attribut name (groupe)                   |
 # | id          | string  | null      | Attribut id                              |
 # | value       | string  | ''        | Valeur du radio                          |
 # | disabled    | bool    | false     | Désactivé                                |
 # | required    | bool    | false     | Obligatoire                              |
 # | error       | string  | null      | Message d'erreur                         |
 # | hint        | string  | null      | Texte d'aide                             |
 # | size        | string  | 'md'      | Taille: sm, md, lg                       |
 # | variant     | string  | 'default' | Style: default, card                     |
 # | class       | string  | ''        | Classes additionnelles                   |
 # | attr        | object  | {}        | Attributs HTML additionnels              |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Radio simple:
 # {% include '_atoms/form/radio.html.twig' with {
 #     label: 'Option 1',
 #     name: 'choix',
 #     value: 'option1'
 # } %}
 #
 # Groupe de radios:
 # {% for option in options %}
 #     {% include '_atoms/form/radio.html.twig' with {
 #         label: option.label,
 #         name: 'selection',
 #         value: option.value,
 #         checked: option.value == selectedValue
 #     } %}
 # {% endfor %}
 #
 # Radio style card:
 # {% include '_atoms/form/radio.html.twig' with {
 #     label: 'Plan Pro',
 #     hint: '29€/mois - Toutes les fonctionnalités',
 #     name: 'plan',
 #     value: 'pro',
 #     variant: 'card'
 # } %}
 #
 # ============================================================================
 #}

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

{% set label = label ?? null %}
{% set checked = checked ?? false %}
{% set name = name ?? null %}
{% set id = id ?? (name ? 'radio-' ~ name ~ '-' ~ random() : 'radio-' ~ random()) %}
{% set value = value ?? '' %}
{% set disabled = disabled ?? false %}
{% set required = required ?? false %}
{% set error = error ?? null %}
{% set hint = hint ?? null %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'default' %}
{% set class = class ?? '' %}
{% set attr = attr ?? {} %}

{# ============================================================================
   CLASSES TAILWIND - TAILLES RADIO
   ============================================================================ #}

{% set radioSizeClasses = {
    'sm': 'w-4 h-4',
    'md': 'w-5 h-5',
    'lg': 'w-6 h-6'
} %}

{% set dotSizeClasses = {
    'sm': 'w-2 h-2',
    'md': 'w-2.5 h-2.5',
    'lg': 'w-3 h-3'
} %}

{% set labelSizeClasses = {
    'sm': 'text-sm',
    'md': 'text-base',
    'lg': 'text-lg'
} %}

{# ============================================================================
   CLASSES TAILWIND - VARIANTES
   ============================================================================ #}

{% set wrapperVariantClasses = {
    'default': '',
    'card': 'p-4 bg-white border border-gray-200 rounded-lg hover:border-primary/30 hover:bg-primary/5 transition-all cursor-pointer has-[:checked]:border-primary has-[:checked]:bg-primary/5'
} %}

{# ============================================================================
   CLASSES TAILWIND - ÉTATS
   ============================================================================ #}

{% set disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' %}
{% set errorBorderClasses = error ? 'border-error' : 'border-gray-300' %}

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

<div class="w-full {{ class }}">

    <label
        for="{{ id }}"
        class="flex items-start gap-3 {{ wrapperVariantClasses[variant] ?? '' }} {{ disabledClasses }}"
    >
        {# ----- Radio custom ----- #}
        <div class="relative flex-shrink-0 mt-0.5 {{ radioSizeClasses[size] ?? radioSizeClasses['md'] }}">
            {# Input radio #}
            <input
                type="radio"
                id="{{ id }}"
                {% if name %}name="{{ name }}"{% endif %}
                value="{{ value }}"
                {% if checked %}checked{% endif %}
                {% if disabled %}disabled{% endif %}
                {% if required %}required{% endif %}
                class="peer absolute inset-0 opacity-0 cursor-pointer z-10"
                {% for key, val in attr %}{{ key }}="{{ val }}"{% endfor %}
            >

            {# Radio visuel #}
            <div class="
                {{ radioSizeClasses[size] ?? radioSizeClasses['md'] }}
                border-2 rounded-full
                {{ errorBorderClasses }}
                bg-white
                transition-all duration-150
                peer-checked:border-primary
                peer-focus:ring-2 peer-focus:ring-primary/20 peer-focus:ring-offset-1
                peer-disabled:bg-gray-100 peer-disabled:border-gray-200
                flex items-center justify-center
            ">
            </div>

            {# Dot (visible quand sélectionné) #}
            <div class="
                absolute inset-0 m-auto
                {{ dotSizeClasses[size] ?? dotSizeClasses['md'] }}
                bg-primary rounded-full
                opacity-0 peer-checked:opacity-100
                transition-opacity pointer-events-none
            "></div>
        </div>

        {# ----- Label et hint ----- #}
        {% if label or hint %}
            <div class="flex-1 min-w-0">
                {% if label %}
                    <span class="block font-medium text-gray-700 {{ labelSizeClasses[size] ?? labelSizeClasses['md'] }} {{ disabled ? 'text-gray-400' : '' }}">
                        {{ label }}
                        {% if required %}
                            <span class="text-error ml-0.5">*</span>
                        {% endif %}
                    </span>
                {% endif %}
                {% if hint %}
                    <span class="block text-sm text-gray-500 mt-0.5 {{ disabled ? 'text-gray-400' : '' }}">{{ hint }}</span>
                {% endif %}
            </div>
        {% endif %}

    </label>

    {# ----- Error message ----- #}
    {% if error %}
        <p class="mt-1.5 text-sm text-error flex items-center gap-1 ml-8">
            <svg class="w-4 h-4 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
            </svg>
            {{ error }}
        </p>
    {% endif %}

</div>