{#
 # ============================================================================
 # ATOM: TAG
 # ============================================================================
 #
 # Étiquette supprimable utilisant 100% Tailwind CSS.
 # Similaire au Badge mais avec possibilité de suppression (filtres, tags).
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre      | Type    | Défaut    | Description                              |
 # |----------------|---------|-----------|------------------------------------------|
 # | label          | string  | (requis)  | Texte du tag                             |
 # | color          | string  | 'gray'    | Couleur: gray, primary, success, etc.    |
 # | size           | string  | 'md'      | Taille: sm, md, lg                       |
 # | removable      | bool    | false     | Afficher le bouton de suppression        |
 # | icon           | string  | null      | Icône avant le texte                     |
 # | href           | string  | null      | Lien (rend le tag cliquable)             |
 # | selected       | bool    | false     | État sélectionné (style différent)       |
 # | disabled       | bool    | false     | État désactivé                           |
 # | id             | string  | null      | ID pour le JavaScript                    |
 # | class          | string  | ''        | Classes additionnelles                   |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Tag simple:
 # {% include '_atoms/tag/tag.html.twig' with {
 #     label: 'JavaScript'
 # } %}
 #
 # Tag supprimable:
 # {% include '_atoms/tag/tag.html.twig' with {
 #     label: 'React',
 #     color: 'primary',
 #     removable: true
 # } %}
 #
 # Tag sélectionnable:
 # {% include '_atoms/tag/tag.html.twig' with {
 #     label: 'Moodia',
 #     color: 'moodia',
 #     selected: true,
 #     icon: 'bubul-moodia'
 # } %}
 #
 # ============================================================================
 #}

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

{% set label = label ?? '' %}
{% set color = color ?? 'gray' %}
{% set size = size ?? 'md' %}
{% set removable = removable ?? false %}
{% set icon = icon ?? null %}
{% set href = href ?? null %}
{% set selected = selected ?? false %}
{% set disabled = disabled ?? false %}
{% set id = id ?? null %}
{% set class = class ?? '' %}

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

{% set sizeClasses = {
    'sm': 'text-xs px-2 py-0.5 gap-1',
    'md': 'text-sm px-2.5 py-1 gap-1.5',
    'lg': 'text-sm px-3 py-1.5 gap-2'
} %}

{% set iconSizes = {
    'sm': 'xs',
    'md': 'xs',
    'lg': 'sm'
} %}

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

{# ============================================================================
   CLASSES TAILWIND - COULEURS (non sélectionné)
   ============================================================================ #}

{% set colorClasses = {
    'gray': 'bg-gray-100 text-gray-700 hover:bg-gray-200',
    'primary': 'bg-primary/10 text-primary hover:bg-primary/20',
    'success': 'bg-success/10 text-success hover:bg-success/20',
    'warning': 'bg-warning/10 text-warning-dark hover:bg-warning/20',
    'error': 'bg-error/10 text-error hover:bg-error/20',
    'info': 'bg-info/10 text-info hover:bg-info/20',
    'moodia': 'bg-[var(--color-moodia)]/10 text-[var(--color-moodia)] hover:bg-[var(--color-moodia)]/20',
    'serenia': 'bg-[var(--color-serenia)]/10 text-[var(--color-serenia)] hover:bg-[var(--color-serenia)]/20',
    'slidia': 'bg-[var(--color-slidia)]/10 text-[var(--color-slidia)] hover:bg-[var(--color-slidia)]/20',
    'sam': 'bg-[var(--color-sam)]/10 text-[var(--color-sam)] hover:bg-[var(--color-sam)]/20'
} %}

{# ============================================================================
   CLASSES TAILWIND - COULEURS (sélectionné)
   ============================================================================ #}

{% set selectedColorClasses = {
    'gray': 'bg-gray-700 text-white hover:bg-gray-800',
    'primary': 'bg-primary text-white hover:bg-primary-dark',
    'success': 'bg-success text-white hover:bg-success/90',
    'warning': 'bg-warning text-white hover:bg-warning/90',
    'error': 'bg-error text-white hover:bg-error/90',
    'info': 'bg-info text-white hover:bg-info/90',
    'moodia': 'bg-[var(--color-moodia)] text-white hover:bg-[var(--color-moodia)]/90',
    'serenia': 'bg-[var(--color-serenia)] text-white hover:bg-[var(--color-serenia)]/90',
    'slidia': 'bg-[var(--color-slidia)] text-white hover:bg-[var(--color-slidia)]/90',
    'sam': 'bg-[var(--color-sam)] text-white hover:bg-[var(--color-sam)]/90'
} %}

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

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

{# ============================================================================
   ASSEMBLAGE DES CLASSES
   ============================================================================ #}

{% set baseClasses = 'inline-flex items-center font-medium rounded-full transition-colors' %}
{% set currentColorClasses = selected ? (selectedColorClasses[color] ?? selectedColorClasses['gray']) : (colorClasses[color] ?? colorClasses['gray']) %}

{% set tagClasses = [
    baseClasses,
    sizeClasses[size] ?? sizeClasses['md'],
    currentColorClasses,
    disabledClasses,
    href ? 'cursor-pointer' : '',
    class
]|join(' ')|trim %}

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

{% set tagContent %}
    {# Icône #}
    {% if icon %}
        {% include '_atoms/icon/icon.html.twig' with {
            name: icon,
            size: iconSizes[size] ?? 'xs'
        } only %}
    {% endif %}

    {# Label #}
    <span>{{ label }}</span>

    {# Bouton de suppression #}
    {% if removable and not disabled %}
        <button type="button"
                class="ml-0.5 -mr-1 p-0.5 rounded-full hover:bg-black/10 transition-colors focus:outline-none focus:ring-2 focus:ring-offset-1 focus:ring-current"
                aria-label="Supprimer {{ label }}"
                data-action="click->tag#remove">
            <svg class="{{ closeSizes[size] ?? 'w-3.5 h-3.5' }}" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
            </svg>
        </button>
    {% endif %}
{% endset %}

{% if href and not disabled %}
    <a href="{{ href }}" {% if id %}id="{{ id }}"{% endif %} class="{{ tagClasses }}">
        {{ tagContent }}
    </a>
{% else %}
    <span {% if id %}id="{{ id }}"{% endif %} class="{{ tagClasses }}">
        {{ tagContent }}
    </span>
{% endif %}