{#
 # ============================================================================
 # MOLECULE: DATA ROW
 # ============================================================================
 #
 # Affichage standardisé d'une paire label:valeur.
 # Idéal pour les fiches détail, les métadonnées, les paramètres.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig (optionnel)
 # - _atoms/tag/tag.html.twig (optionnel)
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut    | Description                        |
 # |---------------|---------|-----------|-----------------------------------|
 # | label         | string  | (requis)  | Libellé du champ                  |
 # | value         | string  | null      | Valeur à afficher                 |
 # | valueColor    | string  | null      | Couleur de la valeur (success, error, etc.) |
 # | tag           | object  | null      | Tag au lieu de valeur {label, color, icon} |
 # | icon          | string  | null      | Icône avant le label              |
 # | size          | string  | 'md'      | sm, md, lg                        |
 # | layout        | string  | 'inline'  | inline, stacked                   |
 # | labelWidth    | string  | null      | Largeur fixe du label (ex: '120px')|
 # | truncate      | bool    | false     | Tronquer la valeur si trop longue |
 # | copyable      | bool    | false     | Afficher bouton copier            |
 # | completed     | bool    | null      | État complété (icône check verte) |
 # | action        | object  | null      | Lien d'action { label, href }     |
 # | class         | string  | ''        | Classes additionnelles            |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Simple:
 # {% include '_molecules/data-row/data-row.html.twig' with {
 #     label: 'Email',
 #     value: 'john@example.com'
 # } %}
 #
 # Avec couleur de valeur:
 # {% include '_molecules/data-row/data-row.html.twig' with {
 #     label: 'Statut',
 #     value: 'Actif',
 #     valueColor: 'success'
 # } %}
 #
 # Avec tag:
 # {% include '_molecules/data-row/data-row.html.twig' with {
 #     label: 'Rôle',
 #     tag: { label: 'Admin', color: 'primary' }
 # } %}
 #
 # Stacked (vertical):
 # {% include '_molecules/data-row/data-row.html.twig' with {
 #     label: 'Description',
 #     value: 'Texte long...',
 #     layout: 'stacked'
 # } %}
 #
 # ============================================================================
 #}

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

{% set label = label ?? 'Label' %}
{% set value = value ?? null %}
{% set valueColor = valueColor ?? null %}
{% set tag = tag ?? null %}
{% set icon = icon ?? null %}
{% set size = size ?? 'md' %}
{% set layout = layout ?? 'inline' %}
{% set labelWidth = labelWidth ?? null %}
{% set truncate = truncate ?? false %}
{% set copyable = copyable ?? false %}
{% set completed = completed ?? null %}
{% set action = action ?? null %}
{% set class = class ?? '' %}

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

{% set sizeConfig = {
    'sm': {
        'label': 'text-xs',
        'value': 'text-xs',
        'icon': 'sm',
        'gap': 'gap-1.5'
    },
    'md': {
        'label': 'text-sm',
        'value': 'text-sm',
        'icon': 'sm',
        'gap': 'gap-2'
    },
    'lg': {
        'label': 'text-base',
        'value': 'text-base',
        'icon': 'md',
        'gap': 'gap-3'
    }
} %}

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

{% set valueColorMap = {
    'primary': 'text-primary',
    'success': 'text-success',
    'error': 'text-error',
    'warning': 'text-warning',
    'info': 'text-info',
    'muted': 'text-gray-500',
    'moodia': 'text-[var(--color-moodia)]',
    'serenia': 'text-[var(--color-serenia)]',
    'slidia': 'text-[var(--color-slidia)]',
    'sam': 'text-[var(--color-sam)]'
} %}

{% set resolvedValueColor = valueColor ? (valueColorMap[valueColor] ?? 'text-gray-900') : 'text-gray-900' %}

{% set layoutConfig = {
    'inline': 'flex items-center justify-between',
    'stacked': 'flex flex-col'
} %}

{% set containerClasses = [
    layoutConfig[layout] ?? layoutConfig['inline'],
    sConfig.gap,
    class
]|join(' ')|trim %}

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

<div class="{{ containerClasses }}">
    {# Label avec icône de complétion optionnelle #}
    <div class="flex items-center gap-1.5 {{ sConfig.label }} text-gray-500 font-medium {% if layout == 'stacked' %}mb-1{% endif %}"
         {% if labelWidth %}style="min-width: {{ labelWidth }}; width: {{ labelWidth }};"{% endif %}>
        {% if completed is not null %}
            {# Icône de complétion #}
            {% include '_atoms/icon/icon.html.twig' with {
                name: completed ? 'check-circle' : 'clock',
                size: sConfig.icon,
                color: completed ? 'success' : 'muted'
            } only %}
        {% elseif icon %}
            {% include '_atoms/icon/icon.html.twig' with {
                name: icon,
                size: sConfig.icon,
                color: 'muted'
            } only %}
        {% endif %}
        <span class="{% if completed %}text-gray-700{% endif %}">{{ label }}</span>
    </div>

    {# Value / Tag / Action #}
    <div class="flex items-center gap-2 {{ sConfig.value }} {% if truncate %}truncate{% endif %}">
        {% if tag %}
            {# Afficher un tag #}
            {% include '_atoms/tag/tag.html.twig' with {
                label: tag.label ?? '',
                color: tag.color ?? 'gray',
                icon: tag.icon ?? null,
                size: size == 'lg' ? 'md' : 'sm'
            } only %}
        {% elseif action and not completed %}
            {# Afficher un lien d'action #}
            <a href="{{ action.href }}" class="text-primary hover:text-primary-dark hover:underline transition-colors">
                {{ action.label }} →
            </a>
        {% elseif value is not null and value != '' %}
            {# Afficher la valeur texte #}
            <span class="{{ resolvedValueColor }} {% if truncate %}truncate{% endif %}">{{ value }}</span>
            {% if copyable %}
                <button type="button"
                        class="text-gray-400 hover:text-primary transition-colors"
                        data-action="click->clipboard#copy"
                        data-clipboard-text="{{ value }}"
                        data-tooltip="Copier">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'copy',
                        size: 'xs',
                        color: 'current'
                    } only %}
                </button>
            {% endif %}
        {% elseif completed %}
            {# Message de complétion #}
            <span class="text-success">Complété</span>
        {% else %}
            <span class="text-gray-400 italic">—</span>
        {% endif %}
    </div>
</div>