{#
 # ============================================================================
 # MOLECULE: TOOL TOGGLE
 # ============================================================================
 #
 # Élément interactif pour activer/désactiver un outil (Moodia, Serenia, etc.).
 # Intègre un bouton toggle avec confirmation via modal.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | name          | string  | (requis)  | Nom de l'outil (Moodia, Serenia)  |
 # | icon          | string  | null      | Icône de l'outil                  |
 # | enabled       | bool    | false     | État actuel (activé/désactivé)    |
 # | locked        | bool    | false     | Outil bloqué (pas le droit)       |
 # | toggleUrl     | string  | null      | URL pour le toggle (API)          |
 # | csrfToken     | string  | null      | Token CSRF pour la requête        |
 # | modalId       | string  | null      | ID de la modal de confirmation    |
 # | readonly      | bool    | false     | Affichage seul, pas de toggle     |
 # | size          | string  | 'md'      | sm, md, lg                        |
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Simple (affichage seul):
 # {% include '_molecules/tool-toggle/tool-toggle.html.twig' with {
 #     name: 'Moodia',
 #     icon: 'bubul-moodia',
 #     enabled: true,
 #     readonly: true
 # } %}
 #
 # Interactif avec toggle:
 # {% include '_molecules/tool-toggle/tool-toggle.html.twig' with {
 #     name: 'Serenia',
 #     icon: 'bubul-serenia',
 #     enabled: false,
 #     toggleUrl: '/admin/users/123/toggle-tool/serenia',
 #     csrfToken: csrf_token('toggle-tool'),
 #     modalId: 'modal-toggle-serenia'
 # } %}
 #
 # ============================================================================
 #}

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

{% set name = name ?? 'Outil' %}
{% set icon = icon ?? null %}
{% set enabled = enabled ?? false %}
{% set locked = locked ?? false %}
{% set toggleUrl = toggleUrl ?? null %}
{% set csrfToken = csrfToken ?? null %}
{% set modalId = modalId ?? null %}
{% set readonly = readonly ?? false %}
{% set size = size ?? 'md' %}
{% set class = class ?? '' %}

{# ============================================================================
   CLASSES TAILWIND
   ============================================================================ #}

{% set sizeConfig = {
    'sm': {
        'container': 'p-2 gap-2',
        'iconContainer': 'w-8 h-8',
        'icon': 'sm',
        'name': 'text-xs',
        'status': 'text-[10px]',
        'button': 'w-7 h-7'
    },
    'md': {
        'container': 'p-3 gap-3',
        'iconContainer': 'w-10 h-10',
        'icon': 'md',
        'name': 'text-sm',
        'status': 'text-[11px]',
        'button': 'w-8 h-8'
    },
    'lg': {
        'container': 'p-4 gap-4',
        'iconContainer': 'w-12 h-12',
        'icon': 'lg',
        'name': 'text-base',
        'status': 'text-xs',
        'button': 'w-10 h-10'
    }
} %}

{% set sConfig = sizeConfig[size] ?? sizeConfig['md'] %}

{# Couleurs selon l'état #}
{% if locked %}
    {% set stateClasses = 'bg-gray-50 border-gray-200 opacity-60' %}
    {% set resolvedIconBg = 'bg-gray-100' %}
    {% set resolvedIconColor = 'gray' %}
{% elseif enabled %}
    {% set stateClasses = 'bg-white border-gray-200 hover:border-gray-300' %}
    {% set resolvedIconBg = 'bg-primary/10' %}
    {% set resolvedIconColor = 'primary' %}
{% else %}
    {% set stateClasses = 'bg-gray-50 border-gray-200' %}
    {% set resolvedIconBg = 'bg-gray-100' %}
    {% set resolvedIconColor = 'gray' %}
{% endif %}

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

<div class="flex items-center {{ sConfig.container }} rounded-xl border {{ stateClasses }} transition-all {{ class }}"
     {% if toggleUrl and not readonly %}
         data-controller="tool-toggle"
         data-tool-toggle-url-value="{{ toggleUrl }}"
         {% if csrfToken %}data-tool-toggle-token-value="{{ csrfToken }}"{% endif %}
         data-tool-toggle-tool-name-value="{{ name }}"
         data-tool-toggle-enabled-value="{{ enabled ? 'true' : 'false' }}"
         {% if modalId %}data-tool-toggle-modal-id-value="{{ modalId }}"{% endif %}
         data-tool-toggle-target="item"
     {% endif %}>

    {# Icône de l'outil #}
    {% if icon %}
        <div class="flex items-center justify-center {{ sConfig.iconContainer }} rounded-lg {{ resolvedIconBg }} shrink-0">
            {% include '_atoms/icon/icon.html.twig' with {
                name: icon,
                size: sConfig.icon,
                color: resolvedIconColor
            } only %}
        </div>
    {% endif %}

    {# Informations #}
    <div class="flex-1 min-w-0">
        <span class="{{ sConfig.name }} font-medium {% if locked %}text-gray-400{% elseif enabled %}text-gray-900{% else %}text-gray-500{% endif %} block">
            {{ name }}
        </span>
        <span class="{{ sConfig.status }} {% if locked %}text-gray-400{% elseif enabled %}text-success{% else %}text-gray-400{% endif %}"
              {% if toggleUrl and not readonly and not locked %}data-tool-toggle-target="status"{% endif %}>
            {% if locked %}
                Non disponible
            {% else %}
                {{ enabled ? 'Activé' : 'Désactivé' }}
            {% endif %}
        </span>
    </div>

    {# Bouton toggle ou icône lock #}
    {% if locked %}
        <div class="flex items-center justify-center {{ sConfig.button }} rounded-lg bg-gray-100 shrink-0">
            {% include '_atoms/icon/icon.html.twig' with {
                name: 'lock',
                size: size == 'lg' ? 'md' : 'sm',
                color: 'gray'
            } only %}
        </div>
    {% elseif not readonly %}
        <button type="button"
                class="flex items-center justify-center {{ sConfig.button }} rounded-lg transition-colors shrink-0
                       {% if enabled %}
                           bg-success/10 text-success hover:bg-success/20
                       {% else %}
                           bg-error/10 text-error hover:bg-error/20
                       {% endif %}"
                {% if toggleUrl %}
                    data-tool-toggle-target="toggleBtn"
                    data-action="tool-toggle#openModal"
                {% endif %}
                data-tooltip="{{ enabled ? 'Désactiver' : 'Activer' }} {{ name }}">
            {% include '_atoms/icon/icon.html.twig' with {
                name: 'power',
                size: size == 'lg' ? 'md' : 'sm',
                color: 'current',
                opacitySecondary: '1'
            } only %}
        </button>
    {% endif %}
</div>