{#
    Flowbite Components Macros

    Collection de macros Twig pour utiliser facilement les composants Flowbite
    dans vos templates.

    Usage:
    {% import 'flowbite_components/macros.html.twig' as flowbite %}
    {{ flowbite.alert('success', 'Opération réussie!') }}
#}

{#
    Alert Component

    @param type string - Type d'alerte: 'info', 'success', 'warning', 'error'
    @param message string - Message à afficher
    @param dismissible boolean - Si l'alerte peut être fermée
    @param icon boolean - Afficher l'icône
#}
{% macro alert(type = 'info', message = '', dismissible = false, icon = true) %}
    {% set colors = {
        'info': {'bg': 'bg-blue-50', 'text': 'text-blue-800', 'border': 'border-blue-300', 'icon': 'fa-info-circle'},
        'success': {'bg': 'bg-green-50', 'text': 'text-green-800', 'border': 'border-green-300', 'icon': 'fa-check-circle'},
        'warning': {'bg': 'bg-yellow-50', 'text': 'text-yellow-800', 'border': 'border-yellow-300', 'icon': 'fa-exclamation-triangle'},
        'error': {'bg': 'bg-red-50', 'text': 'text-red-800', 'border': 'border-red-300', 'icon': 'fa-times-circle'}
    } %}
    {% set color = colors[type] ?? colors.info %}

    <div class="flex items-center p-4 mb-4 text-sm {{ color.text }} rounded-lg {{ color.bg }} {% if dismissible %}border {{ color.border }}{% endif %}" role="alert" {% if dismissible %}id="alert-{{ random() }}"{% endif %}>
        {% if icon %}
            <i class="fas {{ color.icon }} flex-shrink-0 inline w-4 h-4 me-3"></i>
        {% endif %}
        <div class="flex-1">{{ message|raw }}</div>
        {% if dismissible %}
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 {{ color.bg }} {{ color.text }} rounded-lg focus:ring-2 focus:ring-{{ type }}-400 p-1.5 hover:bg-{{ type }}-200 inline-flex items-center justify-center h-8 w-8" data-dismiss-target="#alert-{{ random() }}" aria-label="Close">
                <i class="fas fa-times"></i>
            </button>
        {% endif %}
    </div>
{% endmacro %}

{#
    Button Component

    @param label string - Texte du bouton
    @param type string - Type de bouton: 'primary', 'secondary', 'success', 'danger', 'warning'
    @param size string - Taille: 'sm', 'md', 'lg'
    @param icon string - Classe Font Awesome de l'icône (optionnel)
    @param attributes string - Attributs HTML supplémentaires
#}
{% macro button(label, type = 'primary', size = 'md', icon = null, attributes = '') %}
    {% set colors = {
        'primary': 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300',
        'secondary': 'text-gray-900 bg-white border border-gray-300 hover:bg-gray-100 focus:ring-gray-200',
        'success': 'text-white bg-green-700 hover:bg-green-800 focus:ring-green-300',
        'danger': 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300',
        'warning': 'text-white bg-yellow-400 hover:bg-yellow-500 focus:ring-yellow-300'
    } %}
    {% set sizes = {
        'sm': 'px-3 py-2 text-xs',
        'md': 'px-5 py-2.5 text-sm',
        'lg': 'px-5 py-3 text-base'
    } %}

    <button type="button" class="{{ colors[type] ?? colors.primary }} {{ sizes[size] ?? sizes.md }} focus:ring-4 focus:outline-none font-medium rounded-lg text-center" {{ attributes|raw }}>
        {% if icon %}
            <i class="fas {{ icon }} mr-2"></i>
        {% endif %}
        {{ label }}
    </button>
{% endmacro %}

{#
    Badge Component

    @param label string - Texte du badge
    @param color string - Couleur: 'blue', 'gray', 'red', 'green', 'yellow', 'indigo', 'purple', 'pink'
    @param icon string - Classe Font Awesome de l'icône (optionnel)
#}
{% macro badge(label, color = 'blue', icon = null) %}
    <span class="bg-{{ color }}-100 text-{{ color }}-800 text-xs font-medium {% if icon %}inline-flex items-center{% endif %} px-2.5 py-0.5 rounded">
        {% if icon %}
            <i class="fas {{ icon }} me-1.5"></i>
        {% endif %}
        {{ label }}
    </span>
{% endmacro %}

{#
    Input Component

    @param name string - Nom de l'input
    @param label string - Label de l'input
    @param type string - Type d'input: 'text', 'email', 'password', 'number', etc.
    @param placeholder string - Placeholder
    @param value string - Valeur par défaut
    @param required boolean - Champ requis
    @param error string - Message d'erreur (optionnel)
    @param icon string - Classe Font Awesome de l'icône (optionnel)
#}
{% macro input(name, label, type = 'text', placeholder = '', value = '', required = false, error = null, icon = null) %}
    <div>
        <label for="{{ name }}" class="block mb-2 text-sm font-medium {% if error %}text-red-700{% else %}text-gray-900{% endif %}">
            {{ label }}{% if required %} <span class="text-red-500">*</span>{% endif %}
        </label>

        {% if icon %}
        <div class="relative">
            <div class="absolute inset-y-0 start-0 flex items-center ps-3.5 pointer-events-none">
                <i class="fas {{ icon }} text-gray-500"></i>
            </div>
            <input type="{{ type }}" id="{{ name }}" name="{{ name }}"
                   class="{% if error %}bg-red-50 border-red-500 text-red-900 placeholder-red-700{% else %}bg-gray-50 border-gray-300 text-gray-900{% endif %} border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full ps-10 p-2.5"
                   placeholder="{{ placeholder }}" value="{{ value }}" {% if required %}required{% endif %}>
        </div>
        {% else %}
        <input type="{{ type }}" id="{{ name }}" name="{{ name }}"
               class="{% if error %}bg-red-50 border-red-500 text-red-900 placeholder-red-700{% else %}bg-gray-50 border-gray-300 text-gray-900{% endif %} border text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
               placeholder="{{ placeholder }}" value="{{ value }}" {% if required %}required{% endif %}>
        {% endif %}

        {% if error %}
            <p class="mt-2 text-sm text-red-600">
                <i class="fas fa-times-circle mr-1"></i>{{ error }}
            </p>
        {% endif %}
    </div>
{% endmacro %}

{#
    Select Component

    @param name string - Nom du select
    @param label string - Label du select
    @param options array - Options [{value: '', label: ''}]
    @param selected string - Valeur sélectionnée
    @param required boolean - Champ requis
#}
{% macro select(name, label, options = [], selected = '', required = false) %}
    <div>
        <label for="{{ name }}" class="block mb-2 text-sm font-medium text-gray-900">
            {{ label }}{% if required %} <span class="text-red-500">*</span>{% endif %}
        </label>
        <select id="{{ name }}" name="{{ name }}"
                class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5"
                {% if required %}required{% endif %}>
            {% for option in options %}
                <option value="{{ option.value }}" {% if option.value == selected %}selected{% endif %}>
                    {{ option.label }}
                </option>
            {% endfor %}
        </select>
    </div>
{% endmacro %}

{#
    Card Component

    @param title string - Titre de la card
    @param content string - Contenu de la card
    @param footer string - Pied de page (optionnel)
    @param icon string - Classe Font Awesome de l'icône (optionnel)
#}
{% macro card(title, content, footer = null, icon = null) %}
    <div class="max-w-sm p-6 bg-white border border-gray-200 rounded-lg shadow hover:shadow-lg transition-shadow">
        {% if icon %}
            <i class="fas {{ icon }} text-blue-500 text-3xl mb-3"></i>
        {% endif %}
        <h5 class="mb-2 text-2xl font-bold tracking-tight text-gray-900">{{ title }}</h5>
        <div class="mb-3 font-normal text-gray-700">{{ content|raw }}</div>
        {% if footer %}
            <div class="mt-4">{{ footer|raw }}</div>
        {% endif %}
    </div>
{% endmacro %}

{#
    Modal Trigger Button

    @param modalId string - ID du modal à ouvrir
    @param label string - Texte du bouton
    @param type string - Type de bouton
    @param icon string - Classe Font Awesome de l'icône (optionnel)
#}
{% macro modalButton(modalId, label, type = 'primary', icon = null) %}
    {% set colors = {
        'primary': 'text-white bg-blue-700 hover:bg-blue-800 focus:ring-blue-300',
        'danger': 'text-white bg-red-700 hover:bg-red-800 focus:ring-red-300'
    } %}

    <button data-modal-target="{{ modalId }}" data-modal-toggle="{{ modalId }}"
            class="block {{ colors[type] ?? colors.primary }} focus:ring-4 focus:outline-none font-medium rounded-lg text-sm px-5 py-2.5 text-center"
            type="button">
        {% if icon %}
            <i class="fas {{ icon }} mr-2"></i>
        {% endif %}
        {{ label }}
    </button>
{% endmacro %}

{#
    Toast Notification

    @param type string - Type: 'success', 'error', 'warning', 'info'
    @param message string - Message à afficher
    @param dismissible boolean - Si le toast peut être fermé
#}
{% macro toast(type = 'success', message = '', dismissible = true) %}
    {% set icons = {
        'success': {'icon': 'fa-check', 'color': 'text-green-500 bg-green-100'},
        'error': {'icon': 'fa-times', 'color': 'text-red-500 bg-red-100'},
        'warning': {'icon': 'fa-exclamation-triangle', 'color': 'text-orange-500 bg-orange-100'},
        'info': {'icon': 'fa-info-circle', 'color': 'text-blue-500 bg-blue-100'}
    } %}
    {% set config = icons[type] ?? icons.success %}

    <div id="toast-{{ type }}-{{ random() }}" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow" role="alert">
        <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 {{ config.color }} rounded-lg">
            <i class="fas {{ config.icon }}"></i>
        </div>
        <div class="ms-3 text-sm font-normal">{{ message }}</div>
        {% if dismissible %}
            <button type="button" class="ms-auto -mx-1.5 -my-1.5 bg-white text-gray-400 hover:text-gray-900 rounded-lg focus:ring-2 focus:ring-gray-300 p-1.5 hover:bg-gray-100 inline-flex items-center justify-center h-8 w-8"
                    data-dismiss-target="#toast-{{ type }}-{{ random() }}" aria-label="Close">
                <i class="fas fa-times"></i>
            </button>
        {% endif %}
    </div>
{% endmacro %}

{#
    Breadcrumb Component

    @param items array - Éléments du breadcrumb [{label: '', url: ''}]
#}
{% macro breadcrumb(items = []) %}
    <nav class="flex" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
            {% for item in items %}
                {% if loop.first %}
                    <li class="inline-flex items-center">
                        <a href="{{ item.url ?? '#' }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
                            <i class="fas fa-home mr-2"></i>
                            {{ item.label }}
                        </a>
                    </li>
                {% elseif loop.last %}
                    <li aria-current="page">
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-1"></i>
                            <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2">{{ item.label }}</span>
                        </div>
                    </li>
                {% else %}
                    <li>
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-1"></i>
                            <a href="{{ item.url ?? '#' }}" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2">{{ item.label }}</a>
                        </div>
                    </li>
                {% endif %}
            {% endfor %}
        </ol>
    </nav>
{% endmacro %}

{#
    Progress Bar

    @param label string - Label de la barre
    @param percentage int - Pourcentage de progression (0-100)
    @param color string - Couleur: 'blue', 'green', 'red', 'yellow', 'purple'
    @param showPercentage boolean - Afficher le pourcentage
#}
{% macro progressBar(label, percentage, color = 'blue', showPercentage = true) %}
    <div>
        {% if label or showPercentage %}
            <div class="flex justify-between mb-1">
                {% if label %}
                    <span class="text-base font-medium text-{{ color }}-700">{{ label }}</span>
                {% endif %}
                {% if showPercentage %}
                    <span class="text-sm font-medium text-{{ color }}-700">{{ percentage }}%</span>
                {% endif %}
            </div>
        {% endif %}
        <div class="w-full bg-gray-200 rounded-full h-2.5">
            <div class="bg-{{ color }}-600 h-2.5 rounded-full" style="width: {{ percentage }}%"></div>
        </div>
    </div>
{% endmacro %}

{#
    Avatar Component

    @param initials string - Initiales à afficher
    @param color string - Couleur: 'blue', 'green', 'purple', 'gray'
    @param online boolean - Afficher l'indicateur en ligne
#}
{% macro avatar(initials, color = 'blue', online = false) %}
    <div class="relative{% if online %} inline-flex{% endif %}">
        <div class="relative inline-flex items-center justify-center w-10 h-10 overflow-hidden bg-{{ color }}-100 rounded-full">
            <span class="font-medium text-{{ color }}-600">{{ initials }}</span>
        </div>
        {% if online %}
            <span class="top-0 left-7 absolute w-3.5 h-3.5 bg-green-400 border-2 border-white rounded-full"></span>
        {% endif %}
    </div>
{% endmacro %}

{#
    Breadcrumb Component (Macro version)

    @param items array - Éléments du breadcrumb [{label: '', url: ''}]
                        Le dernier élément (sans url) représente la page courante

    Exemple:
    {{ flowbite.breadcrumb([
        {label: 'Accueil', url: path('app_home')},
        {label: 'Utilisateurs', url: path('users_list')},
        {label: 'Profil'}
    ]) }}
#}
{% macro breadcrumb(items = []) %}
    {% if items|length > 0 %}
    <nav class="flex mb-4" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
            {% for item in items %}
                {% if loop.first %}
                    <li class="inline-flex items-center">
                        {% if item.url is defined %}
                            <a href="{{ item.url }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
                                <i class="fas fa-home mr-2"></i>
                                {{ item.label }}
                            </a>
                        {% else %}
                            <span class="inline-flex items-center text-sm font-medium text-gray-500">
                                <i class="fas fa-home mr-2"></i>
                                {{ item.label }}
                            </span>
                        {% endif %}
                    </li>
                {% elseif loop.last %}
                    <li aria-current="page">
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-1"></i>
                            <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2">{{ item.label }}</span>
                        </div>
                    </li>
                {% else %}
                    <li>
                        <div class="flex items-center">
                            <i class="fas fa-chevron-right text-gray-400 mx-1"></i>
                            {% if item.url is defined %}
                                <a href="{{ item.url }}" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2">{{ item.label }}</a>
                            {% else %}
                                <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2">{{ item.label }}</span>
                            {% endif %}
                        </div>
                    </li>
                {% endif %}
            {% endfor %}
        </ol>
    </nav>
    {% endif %}
{% endmacro %}

{#
    Company Logo Component

    @param company Company - Entité Company
    @param size string - Taille: 'small' (40px), 'medium' (48px), 'large' (80px), 'xlarge' (96px)
    @param rounded string - Type d'arrondi: 'rounded' (léger), 'rounded-lg' (moyen), 'rounded-full' (cercle)
    @param classes string - Classes CSS supplémentaires

    Exemple:
    {{ flowbite.company_logo(company, 'large', 'rounded-lg') }}
#}
{% macro company_logo(company, size = 'medium', rounded = 'rounded-lg', classes = '') %}
    {% set sizes = {
        'small': 'h-10 w-10',
        'medium': 'h-12 w-12',
        'large': 'h-20 w-20',
        'xlarge': 'h-24 w-24'
    } %}
    {% set sizeClass = sizes[size] ?? sizes.medium %}

    <img src="{{ company.logo|company_logo_url }}"
         alt="{{ company.name }}"
         class="{{ sizeClass }} {{ rounded }} object-cover border-2 border-gray-200 shadow-md {{ classes }}">
{% endmacro %}

{#
    User Avatar Component

    @param user User - Entité User
    @param size string - Taille: 'small' (32px), 'medium' (40px), 'large' (48px), 'xlarge' (64px)
    @param showOnline boolean - Afficher l'indicateur en ligne
    @param classes string - Classes CSS supplémentaires

    Exemple:
    {{ flowbite.user_avatar(user, 'medium', true) }}
#}
{% macro user_avatar(user, size = 'medium', showOnline = false, classes = '') %}
    {% set sizes = {
        'small': 'h-8 w-8 text-xs',
        'medium': 'h-10 w-10 text-sm',
        'large': 'h-12 w-12 text-base',
        'xlarge': 'h-16 w-16 text-lg'
    } %}
    {% set sizeClass = sizes[size] ?? sizes.medium %}

    <div class="relative{% if showOnline %} inline-flex{% endif %}">
        {% if user.profilePhoto %}
            <img src="{{ user.profilePhoto|profile_picture_url }}"
                 alt="{{ user.firstName ~ ' ' ~ user.lastName }}"
                 class="{{ sizeClass }} rounded-full object-cover border border-gray-200 {{ classes }}">
        {% else %}
            <div class="{{ sizeClass }} rounded-full bg-gradient-to-br from-indigo-500 to-purple-600 flex items-center justify-center text-white font-semibold {{ classes }}">
                {{ user.firstName|slice(0, 1)|upper }}{{ user.lastName|slice(0, 1)|upper }}
            </div>
        {% endif %}
        {% if showOnline and user.isActive %}
            <span class="absolute bottom-0 right-0 w-3 h-3 bg-green-400 border-2 border-white rounded-full"></span>
        {% endif %}
    </div>
{% endmacro %}