{#
 # ============================================================================
 # ATOM: TOGGLE (Switch)
 # ============================================================================
 #
 # Interrupteur on/off paramétrable utilisant 100% Tailwind CSS.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type    | Défaut    | Description                              |
 # |-------------|---------|-----------|------------------------------------------|
 # | label       | string  | null      | Label du toggle                          |
 # | checked     | bool    | false     | État activé                              |
 # | name        | string  | null      | Attribut name                            |
 # | id          | string  | null      | Attribut id                              |
 # | value       | string  | '1'       | Valeur quand activé                      |
 # | disabled    | bool    | false     | Désactivé                                |
 # | error       | string  | null      | Message d'erreur                         |
 # | hint        | string  | null      | Texte d'aide                             |
 # | size        | string  | 'md'      | Taille: sm, md, lg                       |
 # | labelPosition | string | 'right' | Position label: left, right              |
 # | variant     | string  | 'primary' | Couleur: primary, success, warning       |
 # | class       | string  | ''        | Classes additionnelles                   |
 # | attr        | object  | {}        | Attributs HTML additionnels              |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Toggle simple:
 # {% include '_atoms/form/toggle.html.twig' with {
 #     label: 'Notifications',
 #     name: 'notifications'
 # } %}
 #
 # Toggle activé avec hint:
 # {% include '_atoms/form/toggle.html.twig' with {
 #     label: 'Mode sombre',
 #     checked: true,
 #     hint: 'Réduit la fatigue oculaire'
 # } %}
 #
 # Toggle success (pour statuts actif/inactif):
 # {% include '_atoms/form/toggle.html.twig' with {
 #     label: 'Compte actif',
 #     variant: 'success',
 #     checked: user.isActive
 # } %}
 #
 # ============================================================================
 #}

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

{% set label = label ?? null %}
{% set checked = checked ?? false %}
{% set name = name ?? null %}
{% set id = id ?? (name ? 'toggle-' ~ name : 'toggle-' ~ random()) %}
{% set value = value ?? '1' %}
{% set disabled = disabled ?? false %}
{% set error = error ?? null %}
{% set hint = hint ?? null %}
{% set size = size ?? 'md' %}
{% set labelPosition = labelPosition ?? 'right' %}
{% set variant = variant ?? 'primary' %}
{% set class = class ?? '' %}
{% set attr = attr ?? {} %}

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

{% set trackSizeClasses = {
    'sm': 'w-8 h-5',
    'md': 'w-11 h-6',
    'lg': 'w-14 h-8'
} %}

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

{% set thumbTranslateClasses = {
    'sm': 'peer-checked:translate-x-3.5',
    'md': 'peer-checked:translate-x-5',
    'lg': 'peer-checked:translate-x-6'
} %}

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

{# ============================================================================
   CLASSES TAILWIND - VARIANTES (couleur quand activé)
   ============================================================================ #}

{% set variantClasses = {
    'primary': 'peer-checked:bg-primary',
    'success': 'peer-checked:bg-success',
    'warning': 'peer-checked:bg-warning',
    'error': 'peer-checked:bg-error',
    'cohorts': 'peer-checked:bg-cohorts'
} %}

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

{% set disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' %}

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

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

    <label
        for="{{ id }}"
        class="flex items-center gap-3 {{ disabledClasses }} {{ labelPosition == 'left' ? 'flex-row-reverse justify-end' : '' }}"
    >
        {# ----- Toggle switch ----- #}
        <div class="relative flex-shrink-0">
            {# Input caché #}
            <input
                type="checkbox"
                id="{{ id }}"
                {% if name %}name="{{ name }}"{% endif %}
                value="{{ value }}"
                {% if checked %}checked{% endif %}
                {% if disabled %}disabled{% endif %}
                class="peer sr-only"
                {% for key, val in attr %}{{ key }}="{{ val }}"{% endfor %}
            >

            {# Track (fond) #}
            <div class="
                {{ trackSizeClasses[size] ?? trackSizeClasses['md'] }}
                bg-gray-300 rounded-full
                transition-colors duration-200
                {{ variantClasses[variant] ?? variantClasses['primary'] }}
                peer-focus:ring-2 peer-focus:ring-primary/20 peer-focus:ring-offset-1
                peer-disabled:bg-gray-200
            "></div>

            {# Thumb (bouton) #}
            <div class="
                absolute top-1 left-1
                {{ thumbSizeClasses[size] ?? thumbSizeClasses['md'] }}
                bg-white rounded-full shadow-sm
                transition-transform duration-200
                {{ thumbTranslateClasses[size] ?? thumbTranslateClasses['md'] }}
                peer-disabled:bg-gray-100
            "></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 }}
                    </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">
            <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>