{#
 # ============================================================================
 # MOLECULE: SEARCH BAR
 # ============================================================================
 #
 # ⚠️ DÉCONSEILLÉ — n'est utilisé que par la page de démonstration du design system.
 # Ce composant embarque un <script> inline avec un id aléatoire, incompatible avec
 # la navigation Turbo. Pour les bibliothèques d'outils, utiliser
 # _molecules/search-input/ + le contrôleur Stimulus shared--library-search.
 #
 # Barre de recherche avec icône, input et bouton optionnel.
 # Supporte la recherche instantanée et les raccourcis clavier.
 #
 # ============================================================================
 # COMPOSITION (Atomes utilisés)
 # ============================================================================
 #
 # - _atoms/icon/icon.html.twig
 # - _atoms/input/input.html.twig
 # - _atoms/button/button.html.twig
 # - _atoms/kbd/kbd.html.twig
 #
 # ============================================================================
 # PARAMÈTRES
 # ============================================================================
 #
 # | Paramètre     | Type    | Défaut        | Description                    |
 # |---------------|---------|---------------|--------------------------------|
 # | placeholder   | string  | 'Rechercher'  | Texte du placeholder           |
 # | value         | string  | ''            | Valeur initiale                |
 # | name          | string  | 'q'           | Nom du champ                   |
 # | action        | string  | null          | URL du formulaire (GET)        |
 # | showButton    | bool    | false         | Afficher un bouton submit      |
 # | buttonText    | string  | 'Rechercher'  | Texte du bouton                |
 # | showShortcut  | bool    | false         | Afficher raccourci clavier     |
 # | shortcut      | string  | '⌘K'          | Raccourci affiché              |
 # | instant       | bool    | false         | Recherche en temps réel        |
 # | clearable     | bool    | true          | Bouton pour effacer            |
 # | size          | string  | 'md'          | sm, md, lg                     |
 # | variant       | string  | 'default'     | default, bordered, filled      |
 # | class         | string  | ''            | Classes additionnelles         |
 # | id            | string  | auto          | ID du conteneur                |
 #
 # ============================================================================
 # EXEMPLES D'UTILISATION
 # ============================================================================
 #
 # Recherche simple:
 # {% include '_molecules/search-bar/search-bar.html.twig' with {
 #     placeholder: 'Rechercher un cours...',
 #     action: '/courses'
 # } %}
 #
 # Avec bouton et raccourci:
 # {% include '_molecules/search-bar/search-bar.html.twig' with {
 #     placeholder: 'Rechercher...',
 #     showButton: true,
 #     showShortcut: true,
 #     action: '/search'
 # } %}
 #
 # ============================================================================
 #}

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

{% set placeholder = placeholder ?? 'Rechercher...' %}
{% set value = value ?? '' %}
{% set name = name ?? 'q' %}
{% set action = action ?? null %}
{% set showButton = showButton ?? false %}
{% set buttonText = buttonText ?? 'Rechercher' %}
{% set showShortcut = showShortcut ?? false %}
{% set shortcut = shortcut ?? '⌘K' %}
{% set instant = instant ?? false %}
{% set clearable = clearable ?? true %}
{% set size = size ?? 'md' %}
{% set variant = variant ?? 'default' %}
{% set class = class ?? '' %}
{% set id = id ?? 'search-' ~ random() %}

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

{% set sizeConfig = {
    'sm': {
        'height': 'h-9',
        'padding': 'pl-9 pr-3',
        'paddingWithButton': 'pl-9 pr-20',
        'text': 'text-sm',
        'iconSize': 'sm',
        'iconLeft': 'left-2.5',
        'buttonPadding': 'px-3 py-1.5'
    },
    'md': {
        'height': 'h-10',
        'padding': 'pl-10 pr-4',
        'paddingWithButton': 'pl-10 pr-24',
        'text': 'text-sm',
        'iconSize': 'md',
        'iconLeft': 'left-3',
        'buttonPadding': 'px-4 py-2'
    },
    'lg': {
        'height': 'h-12',
        'padding': 'pl-12 pr-4',
        'paddingWithButton': 'pl-12 pr-28',
        'text': 'text-base',
        'iconSize': 'lg',
        'iconLeft': 'left-3.5',
        'buttonPadding': 'px-5 py-2.5'
    }
} %}

{% set variantConfig = {
    'default': 'bg-white border border-gray-200 focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20',
    'bordered': 'bg-transparent border-2 border-gray-300 focus-within:border-primary',
    'filled': 'bg-gray-100 border border-transparent focus-within:bg-white focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20'
} %}

{% set sConfig = sizeConfig[size] ?? sizeConfig['md'] %}
{% set vConfig = variantConfig[variant] ?? variantConfig['default'] %}

{% set containerClasses = [
    'relative flex items-center rounded-lg transition-all',
    sConfig.height,
    vConfig,
    class
]|join(' ')|trim %}

{% set inputPadding = (showButton or showShortcut or clearable) ? sConfig.paddingWithButton : sConfig.padding %}

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

<form {% if action %}action="{{ action }}" method="GET"{% endif %} class="{{ containerClasses }}" id="{{ id }}" role="search">
    {# Icône de recherche #}
    <div class="absolute {{ sConfig.iconLeft }} inset-y-0 flex items-center pointer-events-none text-gray-400">
        {% include '_atoms/icon/icon.html.twig' with {
            name: 'search',
            size: sConfig.iconSize,
            color: 'muted'
        } only %}
    </div>

    {# Input #}
    <input
        type="search"
        name="{{ name }}"
        value="{{ value }}"
        placeholder="{{ placeholder }}"
        class="flex-1 w-full {{ sConfig.height }} {{ inputPadding }} {{ sConfig.text }} bg-transparent border-none focus:outline-none focus:ring-0 placeholder-gray-400 [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden"
        {% if instant %}data-instant-search{% endif %}
        autocomplete="off"
    >

    {# Zone de droite #}
    <div class="absolute right-2 inset-y-0 flex items-center gap-2">
        {# Bouton clear #}
        {% if clearable %}
            <button
                type="button"
                class="h-full px-1 inline-flex items-center justify-center text-gray-400 hover:text-gray-600 transition-all opacity-0 pointer-events-none"
                data-search-clear
                aria-label="Effacer la recherche"
            >
                {% include '_atoms/icon/icon.html.twig' with { name: 'x', size: sConfig.iconSize } only %}
            </button>
        {% endif %}

        {# Raccourci clavier #}
        {% if showShortcut %}
            <span class="hidden sm:inline-flex">
                {% include '_atoms/kbd/kbd.html.twig' with { keys: shortcut, size: 'sm' } only %}
            </span>
        {% endif %}

        {# Bouton submit #}
        {% if showButton %}
            {% include '_atoms/button/button.html.twig' with {
                text: buttonText,
                type: 'submit',
                variant: 'primary',
                size: size == 'lg' ? 'md' : 'sm'
            } only %}
        {% endif %}
    </div>
</form>

{# Script pour fonctionnalités avancées #}
{% if clearable or instant %}
<script>
(function() {
    const container = document.getElementById('{{ id }}');
    if (!container) return;

    const input = container.querySelector('input[type="search"]');
    const clearBtn = container.querySelector('[data-search-clear]');

    {% if clearable %}
    // Afficher/masquer le bouton clear
    function toggleClearButton() {
        if (clearBtn) {
            const hasValue = input.value.length > 0;
            clearBtn.classList.toggle('opacity-0', !hasValue);
            clearBtn.classList.toggle('pointer-events-none', !hasValue);
            clearBtn.classList.toggle('opacity-100', hasValue);
            clearBtn.classList.toggle('pointer-events-auto', hasValue);
        }
    }

    input.addEventListener('input', toggleClearButton);
    toggleClearButton();

    if (clearBtn) {
        clearBtn.addEventListener('click', () => {
            input.value = '';
            input.focus();
            toggleClearButton();
            input.dispatchEvent(new Event('input', { bubbles: true }));
        });
    }
    {% endif %}

    {% if instant %}
    // Recherche instantanée avec debounce
    let debounceTimer;
    input.addEventListener('input', () => {
        clearTimeout(debounceTimer);
        debounceTimer = setTimeout(() => {
            container.dispatchEvent(new CustomEvent('instantSearch', {
                detail: { query: input.value }
            }));
        }, 300);
    });
    {% endif %}
})();
</script>
{% endif %}