{% extends 'base.html.twig' %}

{% set maxPerUser = stats.defaultAllocation * 6 %}

{% block title %}Distribution des tokens - {{ company.name }}{% endblock %}

{% block body %}
<div class="max-w-[1400px] mx-auto px-6 min-h-[calc(100vh-120px)]">

    {# ================================================================
       BREADCRUMB - Adapté selon le rôle (Admin vs Manager)
       ================================================================ #}
    <div class="mb-6">
        {% if is_granted('ROLE_ADMIN') %}
            {# Admin : voit la liste des entreprises #}
            {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
                homeHref: path('app_dashboard'),
                items: [
                    { label: 'Entreprises', href: path('admin_company_list') },
                    { label: company.name, href: path('admin_company_show', {uuid: company.uuid}) },
                    { label: 'Distribution des tokens' }
                ]
            } only %}
        {% else %}
            {# Manager : accès direct à son entreprise #}
            {% include '_molecules/breadcrumb/breadcrumb.html.twig' with {
                homeHref: path('app_dashboard'),
                items: [
                    { label: 'Mon entreprise', href: path('admin_company_show', {uuid: company.uuid}) },
                    { label: 'Distribution des tokens' }
                ]
            } only %}
        {% endif %}
    </div>

    {# ================================================================
       HEADER
       ================================================================ #}
    <div class="bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden mb-8">
        <div class="p-8 flex flex-col md:flex-row md:items-center md:justify-between gap-6">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-xl bg-primary/10 flex items-center justify-center flex-shrink-0">
                    {% include '_atoms/icon/icon.html.twig' with {
                        name: 'token',
                        size: 'xl',
                        color: 'primary'
                    } only %}
                </div>
                <div class="min-w-0">
                    <h1 class="text-2xl font-bold text-gray-900 font-secondary">Distribution des tokens</h1>
                    <p class="text-gray-500 mt-1">
                        Gérez l'allocation mensuelle des tokens pour <strong class="text-gray-700">{{ company.name }}</strong>.
                        Répartissez le budget entre les membres de l'équipe selon leurs besoins.
                        {% if maxPerUser > 0 %}
                            Le contrat autorise un stockage maximum de <strong class="text-gray-700">{{ maxPerUser|number_format(0, ',', ' ') }} tokens</strong> par utilisateur (6 mois d'accumulation).
                        {% endif %}
                    </p>
                </div>
            </div>

            <div class="flex items-center gap-3 flex-shrink-0">
                {% include '_atoms/button/button.html.twig' with {
                    label: 'Retour',
                    variant: 'ghost',
                    size: 'lg',
                    icon: 'arrow-left',
                    href: path('admin_company_show', {uuid: company.uuid})
                } only %}
            </div>
        </div>
    </div>

    {# ================================================================
       LAYOUT GRID : Sidebar (1 col) + Main (2 cols)
       Hauteur synchronisée avec scroll interne
       ================================================================ #}
    {% set allocatedPercent = stats.monthlyBudget > 0 ? (stats.totalAllocated / stats.monthlyBudget * 100)|round : 0 %}

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 lg:h-[calc(100vh-280px)] lg:min-h-[500px]">

        {# =============================================================
           SIDEBAR GAUCHE (1 col) - Design amélioré
           ============================================================= #}
        <aside class="lg:col-span-1 flex flex-col">
            <div class="flex-1 bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden flex flex-col">

                {# ----- Hero : Cercle de progression ----- #}
                <div class="bg-gradient-to-br from-primary/5 via-primary/3 to-transparent p-8 flex flex-col items-center border-b border-gray-100">
                    <div class="relative w-32 h-32 mb-4">
                        <svg class="w-full h-full transform -rotate-90" viewBox="0 0 120 120">
                            <defs>
                                <linearGradient id="budget-gradient" x1="0%" y1="0%" x2="100%" y2="0%">
                                    <stop offset="0%" stop-color="var(--color-gradient-start)"/>
                                    <stop offset="50%" stop-color="var(--color-gradient-middle)"/>
                                    <stop offset="100%" stop-color="var(--color-gradient-end)"/>
                                </linearGradient>
                            </defs>
                            <circle cx="60" cy="60" r="52" fill="none" stroke-width="8" class="stroke-gray-100"/>
                            <circle
                                id="budget-ring-fill"
                                cx="60" cy="60" r="52"
                                fill="none"
                                stroke="url(#budget-gradient)"
                                stroke-width="8"
                                stroke-linecap="round"
                                stroke-dasharray="326.73"
                                stroke-dashoffset="{{ 326.73 - (stats.monthlyBudget > 0 ? (stats.totalAllocated / stats.monthlyBudget * 326.73) : 0) }}"
                                class="transition-all duration-500 ease-out"
                            />
                        </svg>
                        <div class="absolute inset-0 flex flex-col items-center justify-center">
                            <span class="text-3xl font-bold text-gray-900" id="budget-percentage">
                                {{ allocatedPercent }}<span class="text-base text-gray-400">%</span>
                            </span>
                            <span class="text-[10px] text-gray-400 font-medium uppercase tracking-wider">alloués</span>
                        </div>
                    </div>
                    <p class="text-xs text-gray-500">du budget distribué</p>
                </div>

                {# ----- Stats compactes ----- #}
                <div class="p-4 space-y-2 flex-1">
                    {# Budget mensuel #}
                    <div class="flex items-center gap-3 p-3 rounded-xl bg-gray-50/80 hover:bg-gray-100/80 transition-colors">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-primary/20 to-primary/10 flex items-center justify-center flex-shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'wallet', size: 'md', color: 'primary' } only %}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Budget mensuel</p>
                            <p class="text-base font-bold text-gray-900 tabular-nums">{{ stats.monthlyBudget|number_format(0, ',', ' ') }}</p>
                        </div>
                    </div>

                    {# Tokens alloués #}
                    <div class="flex items-center gap-3 p-3 rounded-xl bg-gray-50/80 hover:bg-gray-100/80 transition-colors" id="stat-allocated-card">
                        <div class="w-10 h-10 rounded-lg bg-gradient-to-br from-info/20 to-info/10 flex items-center justify-center flex-shrink-0">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'users-group', size: 'md', color: 'info' } only %}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Alloués</p>
                            <p class="text-base font-bold text-gray-900 tabular-nums" id="stat-allocated-value">{{ stats.totalAllocated|number_format(0, ',', ' ') }}</p>
                            <div class="mt-1.5 h-1 bg-gray-200 rounded-full overflow-hidden">
                                <div class="h-full bg-gradient-to-r from-primary to-info rounded-full transition-all duration-300" id="stat-allocated-bar" style="width: {{ max(0, min(100, allocatedPercent)) }}%"></div>
                            </div>
                        </div>
                    </div>

                    {# Tokens disponibles #}
                    <div class="flex items-center gap-3 p-3 rounded-xl transition-colors {{ stats.remainingBudget > 0 ? 'bg-success/5 hover:bg-success/10' : 'bg-warning/5 hover:bg-warning/10' }}" id="stat-remaining-card">
                        <div class="w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 transition-colors duration-300 {{ stats.remainingBudget > 0 ? 'bg-gradient-to-br from-success/20 to-success/10' : 'bg-gradient-to-br from-warning/20 to-warning/10' }}" id="stat-remaining-icon-bg">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'token', size: 'md', color: stats.remainingBudget > 0 ? 'success' : 'warning' } only %}
                        </div>
                        <div class="flex-1 min-w-0">
                            <p class="text-[10px] text-gray-400 font-semibold uppercase tracking-wider">Disponibles</p>
                            <p class="text-base font-bold tabular-nums transition-colors duration-300 {{ stats.remainingBudget > 0 ? 'text-success' : 'text-warning' }}" id="stat-remaining-value">{{ stats.remainingBudget|number_format(0, ',', ' ') }}</p>
                        </div>
                    </div>
                </div>

                {# ----- Note informative ----- #}
                <div class="p-4 border-t border-gray-100 bg-gray-50/50 mt-auto">
                    <p class="text-[11px] text-gray-500 leading-relaxed flex items-start gap-2">
                        {% include '_atoms/icon/icon.html.twig' with { name: 'info', size: 'xs', color: 'gray' } only %}
                        <span>Les tokens non alloués seront répartis automatiquement lors du renouvellement mensuel.</span>
                    </p>
                </div>
            </div>
        </aside>

        {# =============================================================
           ZONE PRINCIPALE (2 cols) - Même hauteur avec scroll
           ============================================================= #}
        <main class="lg:col-span-2 flex flex-col">
            <div class="flex-1 bg-white rounded-2xl border border-gray-200 shadow-sm overflow-hidden flex flex-col">
                {# Header fixe avec titre + recherche + actions #}
                <div class="px-6 py-4 border-b border-gray-100 flex-shrink-0 space-y-3">
                    {# Ligne 1 : Titre + Actions #}
                    <div class="flex items-center justify-between">
                        <div class="flex items-center gap-3">
                            <div class="w-10 h-10 rounded-lg bg-primary/10 flex items-center justify-center">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'users-group', size: 'md', color: 'primary' } only %}
                            </div>
                            <div>
                                <h3 class="font-semibold text-gray-900">Équipe</h3>
                                <p class="text-xs text-gray-500" id="team-count">{{ stats.users|length }} membre{{ stats.users|length > 1 ? 's' : '' }}</p>
                            </div>
                        </div>

                        {# Actions #}
                        <div class="flex items-center gap-2">
                            {% include '_atoms/button/button.html.twig' with {
                                label: 'Tout remettre à 0',
                                variant: 'soft-error',
                                size: 'sm',
                                icon: 'refresh',
                                radius: 'lg',
                                attr: { id: 'reset-all-btn' }
                            } only %}

                            <form action="{{ path('admin_company_tokens_distribute', {uuid: company.uuid}) }}" method="POST" class="flex">
                                <input type="hidden" name="_token" value="{{ csrf_token('distribute-tokens') }}">
                                {% include '_atoms/button/button.html.twig' with {
                                    label: 'Répartir équitablement',
                                    variant: 'soft-primary',
                                    size: 'sm',
                                    icon: 'users-group',
                                    radius: 'lg',
                                    type: 'submit'
                                } only %}
                            </form>
                        </div>
                    </div>

                    {# Ligne 2 : Barre de recherche (composition d'atomes : icon) #}
                    <div class="relative flex items-center" id="member-search-bar">
                        <div class="absolute left-3 inset-y-0 flex items-center pointer-events-none">
                            {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'sm', color: 'muted' } only %}
                        </div>
                        <input
                            type="text"
                            id="member-search-input"
                            placeholder="Rechercher un membre..."
                            autocomplete="off"
                            class="w-full h-9 pl-9 pr-9 text-sm bg-gray-50/80 border border-gray-200 rounded-lg placeholder-gray-400 transition-all focus:outline-none focus:bg-white focus:border-primary focus:ring-2 focus:ring-primary/15"
                        >
                        <button
                            type="button"
                            id="member-search-clear"
                            class="absolute right-2.5 inset-y-0 flex items-center text-gray-400 hover:text-gray-600 transition-opacity opacity-0 pointer-events-none"
                            aria-label="Effacer"
                        >
                            {% include '_atoms/icon/icon.html.twig' with { name: 'x', size: 'sm' } only %}
                        </button>
                    </div>
                </div>

                {# Corps scrollable #}
                <div class="flex-1 overflow-y-auto">
                    {% if stats.users|length > 0 %}
                        <div class="divide-y divide-gray-100">
                            {% for userStat in stats.users|sort((a, b) => a.user.fullName <=> b.user.fullName) %}
                                {% set member = userStat.user %}
                                {% set allocation = userStat.monthlyAllocation %}
                                {% set percentage = stats.monthlyBudget > 0 ? (allocation / stats.monthlyBudget * 100)|round : 0 %}

                                <div class="member-card px-6 py-4 transition-colors duration-150 hover:bg-gray-50/70"
                                     data-uuid="{{ member.uuid }}"
                                     data-csrf="{{ csrf_token('allocation-' ~ member.uuid) }}"
                                     data-allocation="{{ allocation }}"
                                     data-member-name="{{ member.fullName|lower }}">

                                    <div class="flex flex-col sm:flex-row sm:items-center gap-4">
                                        {# Infos utilisateur #}
                                        <div class="flex items-center gap-3 sm:w-48 flex-shrink-0">
                                            {% include '_atoms/avatar/avatar.html.twig' with {
                                                name: member.fullName,
                                                size: 'sm'
                                            } only %}
                                            <div class="min-w-0">
                                                <span class="block text-sm font-medium text-gray-900 truncate">{{ member.fullName }}</span>
                                                <span class="block text-[11px] text-gray-400">
                                                    Solde : <strong class="text-gray-600">{{ userStat.currentBalance|number_format(0, ',', ' ') }}</strong>
                                                </span>
                                            </div>
                                        </div>

                                        {# Slider + Input #}
                                        <div class="flex-1 flex items-center gap-3">
                                            <div class="flex-1 relative h-7 flex items-center group">
                                                <input type="range"
                                                       class="member-slider__input absolute w-full h-full opacity-0 cursor-grab active:cursor-grabbing z-10"
                                                       min="0"
                                                       max="{{ maxPerUser }}"
                                                       step="100"
                                                       value="{{ allocation }}">
                                                <div class="absolute left-0 right-0 h-1.5 bg-gray-200 rounded-full overflow-visible">
                                                    <div class="member-slider__fill h-full bg-gradient-to-r from-primary to-info rounded-full relative transition-[width] duration-75"
                                                         style="width: {{ percentage }}%;">
                                                        <div class="absolute -right-2 top-1/2 -translate-y-1/2 w-4 h-4 bg-white border-2 border-primary rounded-full shadow transition-transform group-hover:scale-110"></div>
                                                    </div>
                                                </div>
                                            </div>

                                            <div class="flex items-center gap-2 flex-shrink-0">
                                                <input type="number"
                                                       class="member-value__input w-20 px-2 py-1.5 bg-gray-50 border border-gray-200 rounded-lg text-sm font-semibold text-gray-900 text-right hover:border-primary focus:border-primary focus:ring-2 focus:ring-primary/15 focus:bg-white outline-none transition-all [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
                                                       value="{{ allocation }}"
                                                       min="0"
                                                       max="{{ maxPerUser }}"
                                                       step="100">
                                                <span class="text-[10px] text-gray-400 whitespace-nowrap hidden sm:inline w-12">tok/mois</span>
                                                <span class="member-status__indicator w-2 h-2 rounded-full flex-shrink-0 transition-colors duration-base"></span>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            {% endfor %}
                        </div>

                        {# Message "aucun résultat" (caché par défaut, affiché par JS) #}
                        <div id="search-no-results" class="hidden py-12 text-center">
                            <div class="text-gray-300 mb-3">
                                {% include '_atoms/icon/icon.html.twig' with { name: 'search', size: 'xl', color: 'muted' } only %}
                            </div>
                            <p class="text-sm text-gray-500 font-medium">Aucun membre trouvé</p>
                            <p class="text-xs text-gray-400 mt-1">Essayez avec un autre nom</p>
                        </div>
                    {% else %}
                        {% include '_molecules/empty-state/empty-state.html.twig' with {
                            title: 'Aucun utilisateur actif',
                            description: "Il n'y a pas d'utilisateur actif dans cette entreprise.",
                            icon: 'users',
                            size: 'md'
                        } only %}
                    {% endif %}
                </div>
            </div>
        </main>
    </div>
</div>

{# ================================================================
   JAVASCRIPT : Interactions sliders + budget
   ================================================================ #}
{% block javascripts %}
{{ parent() }}
<script>
(function() {
    const BUDGET = {{ stats.monthlyBudget }};
    const MAX_PER_USER = {{ maxPerUser }};
    const CIRCUMFERENCE = 326.73; // 2 * PI * 52 (rayon)
    const COMPANY_UUID = '{{ company.uuid }}';

    const members = document.querySelectorAll('.member-card');
    const ringFill = document.getElementById('budget-ring-fill');
    const percentageEl = document.getElementById('budget-percentage');

    // Éléments des stats dynamiques
    const allocatedValueEl = document.getElementById('stat-allocated-value');
    const allocatedBarEl = document.getElementById('stat-allocated-bar');
    const remainingValueEl = document.getElementById('stat-remaining-value');
    const remainingIconBgEl = document.getElementById('stat-remaining-icon-bg');

    let saveTimers = {};

    function formatNumber(n) {
        return new Intl.NumberFormat('fr-FR').format(n);
    }

    function getTotalAllocated() {
        let total = 0;
        members.forEach(m => {
            total += parseInt(m.dataset.allocation) || 0;
        });
        return total;
    }

    function getRemaining() {
        return BUDGET - getTotalAllocated();
    }

    function updateBudgetDisplay() {
        const total = getTotalAllocated();
        const remaining = BUDGET - total;
        const percentage = BUDGET > 0 ? Math.round(total / BUDGET * 100) : 0;

        // Cercle SVG
        const offset = CIRCUMFERENCE - (BUDGET > 0 ? (total / BUDGET * CIRCUMFERENCE) : 0);
        ringFill.style.strokeDashoffset = Math.max(0, offset);

        // Pourcentage central
        percentageEl.innerHTML = percentage + '<span class="text-lg">%</span>';

        // Stats - Tokens alloués
        if (allocatedValueEl) {
            allocatedValueEl.textContent = formatNumber(total);
        }
        if (allocatedBarEl) {
            allocatedBarEl.style.width = Math.min(percentage, 100) + '%';
        }

        // Stats - Tokens disponibles
        if (remainingValueEl) {
            remainingValueEl.textContent = formatNumber(remaining);
            // Changer la couleur selon le reste
            if (remaining > 0) {
                remainingValueEl.classList.remove('text-warning');
                remainingValueEl.classList.add('text-success');
            } else {
                remainingValueEl.classList.remove('text-success');
                remainingValueEl.classList.add('text-warning');
            }
        }
        if (remainingIconBgEl) {
            if (remaining > 0) {
                remainingIconBgEl.classList.remove('from-warning/20', 'to-warning/10');
                remainingIconBgEl.classList.add('from-success/20', 'to-success/10');
            } else {
                remainingIconBgEl.classList.remove('from-success/20', 'to-success/10');
                remainingIconBgEl.classList.add('from-warning/20', 'to-warning/10');
            }
        }

        // Update le background du card remaining
        const remainingCard = document.getElementById('stat-remaining-card');
        if (remainingCard) {
            if (remaining > 0) {
                remainingCard.classList.remove('bg-warning/5', 'hover:bg-warning/10');
                remainingCard.classList.add('bg-success/5', 'hover:bg-success/10');
            } else {
                remainingCard.classList.remove('bg-success/5', 'hover:bg-success/10');
                remainingCard.classList.add('bg-warning/5', 'hover:bg-warning/10');
            }
        }

        // Update slider fill pour chaque membre
        members.forEach(m => {
            const currentAlloc = parseInt(m.dataset.allocation) || 0;
            const percentage = BUDGET > 0 ? (currentAlloc / BUDGET * 100) : 0;
            const sliderFill = m.querySelector('.member-slider__fill');
            if (sliderFill) sliderFill.style.width = percentage + '%';
        });
    }

    function saveAllocation(member) {
        const uuid = member.dataset.uuid;
        const allocation = member.dataset.allocation;
        const csrf = member.dataset.csrf;
        const status = member.querySelector('.member-status__indicator');

        status.className = 'member-status__indicator w-2 h-2 rounded-full flex-shrink-0 transition-colors duration-base bg-primary animate-pulse';

        const formData = new FormData();
        formData.append('allocation', allocation);
        formData.append('_token', csrf);

        fetch('/admin/company/' + COMPANY_UUID + '/users/' + uuid + '/allocation', {
            method: 'POST',
            body: formData
        })
        .then(r => r.json())
        .then(data => {
            if (data.success) {
                status.className = 'member-status__indicator w-2 h-2 rounded-full flex-shrink-0 transition-colors duration-base bg-success';
                setTimeout(() => {
                    status.className = 'member-status__indicator w-2 h-2 rounded-full flex-shrink-0 transition-colors duration-base';
                }, 2000);
            } else {
                status.className = 'member-status__indicator w-2 h-2 rounded-full flex-shrink-0 transition-colors duration-base bg-error';
            }
        })
        .catch(() => {
            status.className = 'member-status__indicator w-2 h-2 rounded-full flex-shrink-0 transition-colors duration-base bg-error';
        });
    }

    function updateMemberValue(member, newValue, save = true) {
        const currentAlloc = parseInt(member.dataset.allocation) || 0;
        const remaining = getRemaining();
        const maxAllowed = Math.min(remaining + currentAlloc, MAX_PER_USER);

        let value = Math.max(0, Math.min(maxAllowed, parseInt(newValue) || 0));

        // Arrondir au step de 100 (sauf si < 100)
        if (value >= 100) {
            value = Math.round(value / 100) * 100;
        }

        member.dataset.allocation = value;

        // Sync input et slider
        const input = member.querySelector('.member-value__input');
        const slider = member.querySelector('.member-slider__input');
        const sliderFill = member.querySelector('.member-slider__fill');

        input.value = value;
        if (slider) slider.value = value;

        // Mise a jour visuelle du slider
        const percentage = BUDGET > 0 ? (value / BUDGET * 100) : 0;
        if (sliderFill) sliderFill.style.width = percentage + '%';

        // Update global
        updateBudgetDisplay();

        // Debounced save
        if (save) {
            const uuid = member.dataset.uuid;
            if (saveTimers[uuid]) clearTimeout(saveTimers[uuid]);
            const status = member.querySelector('.member-status__indicator');
            status.className = 'member-status__indicator w-2 h-2 rounded-full flex-shrink-0 transition-colors duration-base bg-warning';
            saveTimers[uuid] = setTimeout(() => saveAllocation(member), 600);
        }
    }

    members.forEach(member => {
        const input = member.querySelector('.member-value__input');
        const slider = member.querySelector('.member-slider__input');
        const uuid = member.dataset.uuid;

        // Slider
        if (slider) {
            slider.addEventListener('input', () => updateMemberValue(member, slider.value));
        }

        // Input direct
        input.addEventListener('input', () => updateMemberValue(member, input.value));
        input.addEventListener('blur', () => {
            if (saveTimers[uuid]) {
                clearTimeout(saveTimers[uuid]);
                saveAllocation(member);
            }
        });

        // Keyboard shortcuts
        input.addEventListener('keydown', (e) => {
            const currentValue = parseInt(member.dataset.allocation) || 0;
            if (e.key === 'ArrowUp') {
                e.preventDefault();
                updateMemberValue(member, currentValue + (e.shiftKey ? 1000 : 100));
            } else if (e.key === 'ArrowDown') {
                e.preventDefault();
                updateMemberValue(member, currentValue - (e.shiftKey ? 1000 : 100));
            }
        });
    });

    // Reset all to 0
    document.getElementById('reset-all-btn').addEventListener('click', () => {
        members.forEach(member => {
            updateMemberValue(member, 0);
        });
    });

    // ================================================================
    // RECHERCHE / FILTRAGE DES MEMBRES
    // ================================================================
    const searchInput = document.getElementById('member-search-input');
    const searchClearBtn = document.getElementById('member-search-clear');
    const noResultsEl = document.getElementById('search-no-results');
    const teamCountEl = document.getElementById('team-count');
    const totalMembers = members.length;

    function normalize(str) {
        return str.normalize('NFD').replace(/[\u0300-\u036f]/g, '').toLowerCase().trim();
    }

    function filterMembers(query) {
        const normalizedQuery = normalize(query);
        let visibleCount = 0;

        members.forEach(member => {
            const name = normalize(member.dataset.memberName || '');
            const isMatch = !normalizedQuery || name.includes(normalizedQuery);
            member.style.display = isMatch ? '' : 'none';
            if (isMatch) visibleCount++;
        });

        if (noResultsEl) {
            noResultsEl.classList.toggle('hidden', visibleCount > 0);
        }

        if (teamCountEl) {
            if (visibleCount === totalMembers) {
                teamCountEl.textContent = totalMembers + ' membre' + (totalMembers > 1 ? 's' : '');
            } else {
                teamCountEl.textContent = visibleCount + ' / ' + totalMembers + ' membre' + (totalMembers > 1 ? 's' : '');
            }
        }
    }

    if (searchInput) {
        // Filtrage instantané à chaque frappe
        searchInput.addEventListener('input', () => {
            filterMembers(searchInput.value);

            // Toggle bouton clear
            const hasValue = searchInput.value.length > 0;
            if (searchClearBtn) {
                searchClearBtn.classList.toggle('opacity-0', !hasValue);
                searchClearBtn.classList.toggle('pointer-events-none', !hasValue);
            }
        });

        // Empêcher le submit si l'input est dans un form parent
        searchInput.addEventListener('keydown', (e) => {
            if (e.key === 'Enter') e.preventDefault();
        });
    }

    if (searchClearBtn) {
        searchClearBtn.addEventListener('click', () => {
            searchInput.value = '';
            searchInput.focus();
            filterMembers('');
            searchClearBtn.classList.add('opacity-0', 'pointer-events-none');
        });
    }

    // Initial display update
    updateBudgetDisplay();
})();
</script>
{% endblock %}
{% endblock %}