{#
 # ============================================================================
 # ATOM: TEXTAREA
 # ============================================================================
 #
 # Champ de saisie multiligne paramétrable utilisant 100% Tailwind CSS.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre      | Type    | Défaut    | Description                              |
 # |----------------|---------|-----------|------------------------------------------|
 # | label          | string  | null      | Label du champ                           |
 # | placeholder    | string  | ''        | Placeholder                              |
 # | value          | string  | ''        | Valeur du champ                          |
 # | name           | string  | null      | Attribut name                            |
 # | id             | string  | null      | Attribut id (auto-généré si absent)      |
 # | rows           | number  | 4         | Nombre de lignes visibles                |
 # | required       | bool    | false     | Champ obligatoire                        |
 # | disabled       | bool    | false     | Champ désactivé                          |
 # | readonly       | bool    | false     | Champ en lecture seule                   |
 # | error          | string  | null      | Message d'erreur                         |
 # | hint           | string  | null      | Texte d'aide                             |
 # | size           | string  | 'md'      | Taille: sm, md, lg                       |
 # | variant        | string  | 'default' | Style: default, filled                   |
 # | resize         | string  | 'vertical'| Redimensionnement: none, vertical, both  |
 # | maxlength      | number  | null      | Nombre max de caractères                 |
 # | showCount      | bool    | false     | Afficher le compteur de caractères       |
 # | class          | string  | ''        | Classes additionnelles                   |
 # | attr           | object  | {}        | Attributs HTML additionnels              |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Textarea simple:
 # {% include '_atoms/form/textarea.html.twig' with {
 #     label: 'Description',
 #     placeholder: 'Décrivez votre projet...'
 # } %}
 #
 # Avec compteur de caractères:
 # {% include '_atoms/form/textarea.html.twig' with {
 #     label: 'Bio',
 #     maxlength: 280,
 #     showCount: true,
 #     hint: 'Présentez-vous brièvement'
 # } %}
 #
 # Non redimensionnable:
 # {% include '_atoms/form/textarea.html.twig' with {
 #     label: 'Commentaire',
 #     rows: 3,
 #     resize: 'none'
 # } %}
 #
 # ============================================================================
 #}

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

{% set label = label ?? null %}
{% set placeholder = placeholder ?? '' %}
{% set value = value ?? '' %}
{% set name = name ?? null %}
{% set id = id ?? (name ? 'textarea-' ~ name : 'textarea-' ~ random()) %}
{% set rows = rows ?? 4 %}
{% set required = required ?? false %}
{% set disabled = disabled ?? false %}
{% set readonly = readonly ?? false %}
{% set error = error ?? null %}
{% set hint = hint ?? null %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'default' %}
{% set resize = resize ?? 'vertical' %}
{% set maxlength = maxlength ?? null %}
{% set showCount = showCount ?? false %}
{% set class = class ?? '' %}
{% set attr = attr ?? {} %}

{# ============================================================================
   CLASSES TAILWIND - BASE
   ============================================================================ #}

{% set baseClasses = 'w-full font-primary transition-all duration-base ease-default border-2 outline-none focus:border-primary focus:ring-2 focus:ring-primary/20' %}

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

{% set variantClasses = {
    'default': 'bg-white border-gray-300 text-black placeholder-gray-400',
    'filled': 'bg-gray-100 border-transparent text-black placeholder-gray-500 focus:bg-white focus:border-primary'
} %}

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

{% set sizeClasses = {
    'sm': 'py-2.5 px-4 text-sm rounded-lg',
    'md': 'py-4 px-5 text-base rounded-lg',
    'lg': 'py-5 px-6 text-lg rounded-xl'
} %}

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

{# ============================================================================
   CLASSES TAILWIND - RESIZE
   ============================================================================ #}

{% set resizeClasses = {
    'none': 'resize-none',
    'vertical': 'resize-y',
    'both': 'resize'
} %}

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

{% set errorClasses = error ? 'border-error focus:ring-error/20 focus:border-error' : '' %}
{% set disabledClasses = disabled ? 'bg-gray-100 text-gray-400 cursor-not-allowed' : '' %}

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

{% set textareaClasses = [
    baseClasses,
    variantClasses[variant] ?? variantClasses['default'],
    sizeClasses[size] ?? sizeClasses['md'],
    resizeClasses[resize] ?? resizeClasses['vertical'],
    errorClasses,
    disabledClasses,
    class
]|join(' ')|trim %}

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

<div class="w-full"{% if showCount and maxlength %} data-controller="textarea"{% endif %}>

    {# ----- Label ----- #}
    {% if label %}
        <label for="{{ id }}" class="block font-medium text-gray-700 mb-1.5 {{ labelSizeClasses[size] ?? labelSizeClasses['md'] }}">
            {{ label }}
            {% if required %}
                <span class="text-error ml-0.5">*</span>
            {% endif %}
        </label>
    {% endif %}

    {# ----- Textarea ----- #}
    <textarea
        id="{{ id }}"
        {% if name %}name="{{ name }}"{% endif %}
        rows="{{ rows }}"
        {% if placeholder %}placeholder="{{ placeholder }}"{% endif %}
        {% if required %}required{% endif %}
        {% if disabled %}disabled{% endif %}
        {% if readonly %}readonly{% endif %}
        {% if maxlength %}maxlength="{{ maxlength }}"{% endif %}
        class="{{ textareaClasses }}"
        {% if showCount and maxlength %}data-textarea-target="input" data-action="input->textarea#updateCount"{% endif %}
        {% for key, val in attr %}{{ key }}="{{ val }}"{% endfor %}
    >{{ value }}</textarea>

    {# ----- Footer (hint, error, count) ----- #}
    <div class="flex items-start justify-between mt-1.5 gap-4">
        <div class="flex-1">
            {# ----- Hint ----- #}
            {% if hint and not error %}
                <p class="text-sm text-gray-500">{{ hint }}</p>
            {% endif %}

            {# ----- Error message ----- #}
            {% if error %}
                <p class="text-sm text-error flex items-center gap-1">
                    {% include '_atoms/icon/icon.html.twig' with { name: 'alert', size: 'sm', color: 'error' } only %}
                    {{ error }}
                </p>
            {% endif %}
        </div>

        {# ----- Character count ----- #}
        {% if showCount and maxlength %}
            <p class="text-sm text-gray-400 shrink-0" data-textarea-target="count">
                <span data-textarea-target="current">{{ value|length }}</span>/<span>{{ maxlength }}</span>
            </p>
        {% endif %}
    </div>

</div>