{{-- v4.11.0 §A — LA BARRE D'ONGLETS DU BAS (mobile, < 1024 px).

     Ce qu'elle remplace : huit liens qui s'enroulaient en pastilles sur un téléphone, sans menu.
     Ici, la grammaire d'une application : quatre raccourcis fixés en bas de l'écran, plus « Plus »
     qui ouvre une feuille avec TOUS les autres modules. Aucun module n'est perdu — c'est la règle,
     et un test la tient.

     **Data-driven, entièrement.** Les quatre premiers sont les quatre PREMIERS MODULES ACTIFS de
     l'espace, dans l'ordre que l'exploitant a choisi ; aucun libellé, aucun module n'est écrit en
     dur. Un espace qui n'active que trois modules affiche trois onglets et pas de « Plus ».

     ⚠️ **La feuille est un `<details>`, et c'est un choix.** La page de lecture n'a AUCUN framework
     JS — pas d'Alpine, pas de Livewire : c'est la moitié de sa raison d'être (un maître d'ouvrage
     qui ouvre un lien sur un réseau lent ne télécharge pas le thème du back-office). Un `<details>`
     s'ouvre au clavier, se ferme au clavier, et fonctionne sans une ligne de script. Les quelques
     lignes ci-dessous n'ajoutent que le confort — clic à l'extérieur, Échap — et leur absence ne
     casse rien.

     ⚠️ Le même composant sert la page de lecture ET l'espace connecté : c'est ce qui fait que les
     deux se ressemblent, et qu'ils changeront ensemble. --}}
@props(['modules', 'courant', 'lien', 'raccourcis' => 4])

@php
    $modules = array_values($modules);
    // Le module courant fait toujours partie des raccourcis : une barre qui n'indiquerait pas où
    // l'on est ne serait qu'une rangée d'icônes.
    $position = null;

    foreach ($modules as $index => $entree) {
        if ($entree['cle'] === $courant) {
            $position = $index;

            break;
        }
    }

    $visibles = array_slice($modules, 0, $raccourcis);
    $reste = array_slice($modules, $raccourcis);

    if ($position !== null && $position >= $raccourcis) {
        // Le courant prend la dernière place des raccourcis ; celui qu'il déloge passe sous « Plus ».
        $deloge = $visibles[$raccourcis - 1];
        $visibles[$raccourcis - 1] = $modules[$position];
        $reste = array_values(array_filter(
            array_merge([$deloge], $reste),
            fn (array $e): bool => $e['cle'] !== $modules[$position]['cle'],
        ));
    }
@endphp

{{-- La cale : sans elle, la barre fixe masquerait la fin de la page. --}}
<div class="h-[4.75rem] lg:hidden" aria-hidden="true"></div>

<div class="fixed inset-x-0 bottom-0 z-40 lg:hidden" data-barre-basse>
    @if ($reste !== [])
        <details class="group" data-feuille-modules>
            <summary class="sr-only">Tous les modules</summary>

            <div class="pointer-events-none fixed inset-0 z-0 bg-gray-950/30 opacity-0 transition-opacity group-open:pointer-events-auto group-open:opacity-100"
                 data-feuille-fond aria-hidden="true"></div>

            <div class="relative z-10 hidden border-t border-gray-200 bg-white px-2 pb-2 pt-3 shadow-2xl group-open:block dark:border-white/10 dark:bg-gray-900"
                 data-feuille-panneau>
                <p class="px-2 pb-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400">Tous les modules</p>
                <ul class="grid grid-cols-2 gap-1">
                    @foreach ($reste as $entree)
                        <li>
                            <a href="{{ $lien($entree['cle']) }}"
                               class="flex min-h-11 items-center gap-2.5 rounded-lg px-3 py-2 text-sm font-medium text-gray-700 hover:bg-gray-100 dark:text-gray-200 dark:hover:bg-white/5">
                                @svg($entree['module']->icone(), 'h-4 w-4 flex-none opacity-80')
                                <span class="min-w-0 truncate">{{ $entree['libelle'] }}</span>
                            </a>
                        </li>
                    @endforeach
                </ul>
            </div>
        </details>
    @endif

    <nav class="relative z-10 flex border-t border-gray-200 bg-white pb-[env(safe-area-inset-bottom)] dark:border-white/10 dark:bg-gray-900"
         aria-label="Modules de l'espace">
        @foreach ($visibles as $entree)
            @php $actif = $entree['cle'] === $courant; @endphp
            <a href="{{ $lien($entree['cle']) }}"
               @if ($actif) aria-current="page" @endif
               @class([
                   'flex min-h-[3.25rem] flex-1 flex-col items-center justify-center gap-1 px-1 py-2 text-[11px] font-semibold outline-offset-[-2px]',
                   'ec-accent' => $actif,
                   'text-gray-500 dark:text-gray-400' => ! $actif,
               ])>
                @svg($entree['module']->icone(), 'h-5 w-5 flex-none')
                <span class="max-w-full truncate">{{ $entree['libelle'] }}</span>
            </a>
        @endforeach

        @if ($reste !== [])
            {{-- « Plus » commande le <details> ci-dessus. Son `summary` est en lecteur d'écran
                 seulement : c'est lui qui porte l'ouverture au clavier, ce bouton-ci ne fait
                 qu'offrir une cible tactile à la bonne place dans la rangée d'onglets. --}}
            <button type="button" data-feuille-bouton
                    class="flex min-h-[3.25rem] flex-1 flex-col items-center justify-center gap-1 px-1 py-2 text-[11px] font-semibold text-gray-500 outline-offset-[-2px] dark:text-gray-400"
                    aria-expanded="false">
                @svg('heroicon-o-ellipsis-horizontal', 'h-5 w-5 flex-none')
                <span>Plus</span>
            </button>
        @endif
    </nav>

    @if ($reste !== [])
    @once
        <script>
            /* v4.11.0 §A — Le confort autour du <details> : ouvrir depuis « Plus », fermer au clic
               dehors et à Échap. Sans ce script, la feuille reste utilisable au clavier — c'est la
               raison d'être du <details>. Le garde global évite d'empiler un écouteur par
               navigation SPA dans le panneau Filament. */
            if (! window.__espaceClientBarreBasse) {
                window.__espaceClientBarreBasse = true;

                const feuille = () => document.querySelector('[data-feuille-modules]');

                document.addEventListener('click', (evenement) => {
                    const bloc = feuille();

                    if (! bloc) {
                        return;
                    }

                    const bouton = evenement.target.closest('[data-feuille-bouton]');

                    if (bouton) {
                        bloc.open = ! bloc.open;
                        bouton.setAttribute('aria-expanded', bloc.open ? 'true' : 'false');

                        return;
                    }

                    if (bloc.open && ! evenement.target.closest('[data-feuille-panneau]')) {
                        bloc.open = false;
                        document.querySelector('[data-feuille-bouton]')?.setAttribute('aria-expanded', 'false');
                    }
                });

                document.addEventListener('keydown', (evenement) => {
                    if (evenement.key !== 'Escape') {
                        return;
                    }

                    const bloc = feuille();

                    if (bloc?.open) {
                        bloc.open = false;
                        document.querySelector('[data-feuille-bouton]')?.setAttribute('aria-expanded', 'false');
                    }
                });
            }
        </script>
    @endonce
    @endif
</div>