{#
 # ============================================================================
 # ATOM: CHECKBOX
 # ============================================================================
 #
 # Case à cocher paramétrable utilisant 100% Tailwind CSS.
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre   | Type    | Défaut    | Description                              |
 # |-------------|---------|-----------|------------------------------------------|
 # | label       | string  | null      | Label de la checkbox                     |
 # | checked     | bool    | false     | État coché                               |
 # | name        | string  | null      | Attribut name                            |
 # | id          | string  | null      | Attribut id (auto-généré si absent)      |
 # | value       | string  | '1'       | Valeur quand coché                       |
 # | disabled    | bool    | false     | Désactivée                               |
 # | required    | bool    | false     | Obligatoire                              |
 # | error       | string  | null      | Message d'erreur                         |
 # | hint        | string  | null      | Texte d'aide                             |
 # | size        | string  | 'md'      | Taille: sm, md, lg                       |
 # | variant     | string  | 'default' | Style: default, card                     |
 # | class       | string  | ''        | Classes additionnelles                   |
 # | attr        | object  | {}        | Attributs HTML additionnels              |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Checkbox simple:
 # {% include '_atoms/form/checkbox.html.twig' with {
 #     label: 'Se souvenir de moi',
 #     name: 'remember_me'
 # } %}
 #
 # Checkbox cochée avec hint:
 # {% include '_atoms/form/checkbox.html.twig' with {
 #     label: 'Accepter les CGU',
 #     checked: true,
 #     hint: 'Vous devez accepter pour continuer',
 #     required: true
 # } %}
 #
 # Checkbox style card:
 # {% include '_atoms/form/checkbox.html.twig' with {
 #     label: 'Option premium',
 #     variant: 'card',
 #     hint: 'Accès à toutes les fonctionnalités'
 # } %}
 #
 # ============================================================================
 #}

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

{% set label = label ?? null %}
{% set labelHtml = labelHtml ?? null %}
{% set checked = checked ?? false %}
{% set name = name ?? null %}
{% set id = id ?? (name ? 'checkbox-' ~ name : 'checkbox-' ~ random()) %}
{% set value = value ?? '1' %}
{% set disabled = disabled ?? false %}
{% set required = required ?? false %}
{% set error = error ?? null %}
{% set hint = hint ?? null %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'default' %}
{% set class = class ?? '' %}
{% set attr = attr ?? {} %}

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

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

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

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

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

{% set wrapperVariantClasses = {
    'default': '',
    'card': 'p-4 bg-white border border-gray-200 rounded-lg hover:border-primary/30 hover:bg-primary/5 transition-all cursor-pointer'
} %}

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

{% set disabledClasses = disabled ? 'opacity-50 cursor-not-allowed' : 'cursor-pointer' %}
{% set errorBorderClasses = error ? 'border-error' : 'border-gray-300' %}

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

<div class="{{ class ?: 'w-full' }}">

    <label
        for="{{ id }}"
        class="flex items-start gap-3 {{ wrapperVariantClasses[variant] ?? '' }} {{ disabledClasses }}"
    >
        {# ----- Checkbox custom ----- #}
        <div class="relative flex-shrink-0 mt-0.5 {{ checkboxSizeClasses[size] ?? checkboxSizeClasses['md'] }}">
            {# Input caché #}
            <input
                type="checkbox"
                id="{{ id }}"
                {% if name %}name="{{ name }}"{% endif %}
                value="{{ value }}"
                {% if checked %}checked{% endif %}
                {% if disabled %}disabled{% endif %}
                {% if required %}required{% endif %}
                class="peer absolute inset-0 opacity-0 cursor-pointer z-10"
                {% for key, val in attr %}{{ key }}="{{ val }}"{% endfor %}
            >

            {# Checkbox visuelle #}
            <div class="
                {{ checkboxSizeClasses[size] ?? checkboxSizeClasses['md'] }}
                border-2 rounded
                {{ errorBorderClasses }}
                bg-white
                transition-all duration-150
                peer-checked:bg-primary peer-checked:border-primary
                peer-focus:ring-2 peer-focus:ring-primary/20 peer-focus:ring-offset-1
                peer-disabled:bg-gray-100 peer-disabled:border-gray-200
                flex items-center justify-center
            ">
                {# Checkmark #}
                <svg
                    class="{{ checkmarkSizes[size] ?? checkmarkSizes['md'] }} text-white opacity-0 transition-opacity"
                    fill="none"
                    stroke="currentColor"
                    viewBox="0 0 24 24"
                    stroke-width="3"
                >
                    <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
                </svg>
            </div>

            {# Checkmark overlay (visible quand coché) #}
            <svg
                class="absolute inset-0 m-auto {{ checkmarkSizes[size] ?? checkmarkSizes['md'] }} text-white opacity-0 peer-checked:opacity-100 transition-opacity pointer-events-none"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
                stroke-width="3"
            >
                <path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/>
            </svg>
        </div>

        {# ----- Label et hint ----- #}
        {% if label or labelHtml 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 }}
                        {% if required %}
                            <span class="text-error ml-0.5">*</span>
                        {% endif %}
                    </span>
                {% elseif labelHtml %}
                    <span class="block font-medium text-gray-700 {{ labelSizeClasses[size] ?? labelSizeClasses['md'] }} {{ disabled ? 'text-gray-400' : '' }}">
                        {{ labelHtml|raw }}
                    </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 ml-8">
            <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>