{{--
    v4.14.0 §C — L'APP-SHELL : l'en-tête, l'écran, et la barre d'onglets du bas.

    v4.16.0 §A — L'en-tête porte la marque de L'AGENCE QUI EXÉCUTE **CET ESPACE-CI**, jamais celle
    de l'installation : `logoDuPrestataire()` / `nomDuPrestataire()` du tableau de bord, qui
    replient déjà proprement sur l'identité du socle quand l'espace n'a rien posé. C'est ce que
    fait déjà l'e-mail depuis la v4.7.0 §E — la page disait autre chose que le message. Le client
    final, lui, reste figuré par son écusson à droite : son logo s'il en a téléversé un, ses
    initiales sinon.

    ⚠️ v4.17.0 §C — L'accent vient de l'espace (`couleur_primaire` / `couleur_accent`) QUAND il est
    posé, avec repli sur la palette de la maquette — mais il n'entre plus JAMAIS tel quel dans
    `--accent` / `--gold` / `--accent-ink`. La coquille pose les jetons PAR THÈME (`--accent-clair`,
    `--accent-sombre`, …), calculés par `PaletteTheme` avec un contraste mesuré ≥ 4,5 : 1 sur les
    fonds du thème, et c'est la feuille qui choisit la variante selon le thème actif. Avant ce lot,
    la couleur de marque écrasait les jetons dans les deux thèmes : indigo sur `#1c1e27`, les icônes
    des tuiles, les libellés, l'onglet actif et les pastilles disparaissaient en sombre.

    ⚠️ Toutes les valeurs d'identité sont lues ICI, au rendu, jamais à l'enregistrement d'un
    fournisseur : une base pas encore migrée ne doit pas faire tomber l'application.
--}}
@props([
    'dashboard' => null,
    'acces' => null,
    'espaces' => null,
    'aValider' => 0,
    'onglet' => 'accueil',
    'nonLus' => ['total' => 0, 'par_sujet' => []],
])
@php
    use App\Support\EspaceClient\AppClient;
    use App\Support\EspaceClient\PaletteTheme;
    use App\Support\Identite;

    $palette = PaletteTheme::style(PaletteTheme::deLEspace($dashboard));
    $espaces = $espaces ?? collect();

    // La marque de l'espace ouvert ; hors espace (le choix entre plusieurs marchés), celle de
    // l'installation — c'est le seul écran où aucune agence n'est encore désignée.
    $logoMaison = $dashboard?->logoDuPrestataire() ?? Identite::logoRecadre();
    $nomMaison = $dashboard?->nomDuPrestataire() ?? Identite::marque();
    $lien = fn (string $route): string => $dashboard === null
        ? route($route)
        : route($route, ['espace' => $dashboard->id]);

    // v4.17.0 §B2.4 — Les badges : ce qui attend une décision, plus les messages non lus du fil.
    $nonLusPar = fn (string $type): int => (int) collect($nonLus['par_sujet'] ?? [])
        ->filter(fn (int $n, string $cle): bool => str_starts_with($cle, $type.':'))
        ->sum();
    $onglets = [
        ['cle' => 'accueil', 'libelle' => 'Accueil', 'route' => 'espace-client.app.accueil', 'badge' => 0],
        ['cle' => 'publications', 'libelle' => 'Publications', 'route' => 'espace-client.app.publications', 'badge' => $aValider + $nonLusPar('PublicationClient')],
        ['cle' => 'livrables', 'libelle' => 'Livrables', 'route' => 'espace-client.app.livrables', 'badge' => $nonLusPar('Livrable')],
        ['cle' => 'documents', 'libelle' => 'Documents', 'route' => 'espace-client.app.documents', 'badge' => 0],
        ['cle' => 'compte', 'libelle' => 'Compte', 'route' => 'espace-client.app.compte', 'badge' => 0],
    ];
@endphp

<div class="app" data-palette style="{{ $palette }}">

    <header class="top">
        <div class="row1">
            <div class="brand">
                @if ($logoMaison)
                    {{-- v4.16.0 §B — LA PLAQUE. Un logo d'agence est dessiné pour du papier blanc :
                         posé nu sur le fond sombre de l'application, un glyphe sombre disparaît.
                         On le pose donc sur un aplat clair opaque, dans LES DEUX thèmes — sans
                         quoi il faudrait exiger de chaque agence une variante sombre. --}}
                    <span class="plaque"><img src="{{ $logoMaison }}" alt="{{ $nomMaison }}"></span>
                @else
                    <span class="wordmark">{{ $nomMaison }}</span>
                @endif
            </div>
            <div class="mini">
                {{-- v4.16.1 §F1 — La cloche : le centre de notifications du client, à côté de la
                     bascule de thème. Composant Livewire à part : il ne se rend qu'une session
                     ouverte, et ne coûte qu'un compte tant que son menu est fermé. --}}
                @auth
                    <livewire:espace-client.app.cloche :espace-id="$dashboard?->id" :key="'cloche-'.($dashboard?->id ?? 0)" />
                @endauth
                <button type="button" class="iconbtn" data-bascule-theme title="Thème" aria-label="Changer le thème">
                    <svg width="17" height="17" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
                </button>
                @if ($dashboard)
                    <span class="crest" aria-hidden="true">
                        @if ($dashboard->logoDuClient())
                            <img src="{{ $dashboard->logoDuClient() }}" alt="">
                        @else
                            {{ AppClient::initiales($dashboard->nomCourtDuClient()) }}
                        @endif
                    </span>
                @endif
            </div>
        </div>

        @if ($dashboard)
            <div class="row2">
                <h2>{{ $dashboard->nomCourtDuClient() }}</h2>

                @if (filled($dashboard->reference_marche))
                    <span class="chip">Marché {{ $dashboard->reference_marche }}</span>
                @endif

                {{-- Le sélecteur n'apparaît que pour qui a plusieurs marchés : un menu à une
                     entrée est un menu de trop. --}}
                @if ($espaces->count() > 1)
                    <form method="GET" class="chip select">
                        <label for="selecteur-espace" class="hide">Changer d'espace</label>
                        <select id="selecteur-espace" name="espace" onchange="this.form.submit()">
                            @foreach ($espaces as $autre)
                                <option value="{{ $autre->client_dashboard_id }}" @selected($autre->client_dashboard_id === $dashboard->id)>
                                    {{ $autre->dashboard?->nomCourtDuClient() }}
                                </option>
                            @endforeach
                        </select>
                    </form>
                @endif
            </div>
        @endif
    </header>

    {{-- v4.16.0 §J — Le fil de chargement : un aller-retour Livewire ne doit pas laisser croire
         que le bouton n'a pas pris. Deux clics sur « Valider », ce serait deux e-mails au
         client. --}}
    <div class="chargement" wire:loading aria-hidden="true"><i></i></div>

    <div class="scroll">
        @if ($dashboard)
            {{ $slot }}
        @else
            {{-- Plusieurs marchés et aucun choisi : on demande, on ne devine pas. --}}
            <section class="screen">
                <h1 class="h1">Vos espaces</h1>
                <p class="sub">Choisissez le marché que vous voulez suivre.</p>
                <div class="list">
                    @forelse ($espaces as $autre)
                        <a class="rowc" href="{{ route('espace-client.app.accueil', ['espace' => $autre->client_dashboard_id]) }}" wire:navigate>
                            <span class="fic">{{ AppClient::initiales($autre->dashboard?->nomCourtDuClient()) }}</span>
                            <span class="body">
                                <span class="nm">{{ $autre->dashboard?->nomCourtDuClient() }}</span>
                                <span class="mt">{{ $autre->dashboard?->reference_marche ?: $autre->dashboard?->nom }}</span>
                            </span>
                            <span class="chev">
                                <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m9 18 6-6-6-6"/></svg>
                            </span>
                        </a>
                    @empty
                        <p class="sub">Aucun espace ne vous est ouvert pour le moment.</p>
                    @endforelse
                </div>
            </section>
        @endif
    </div>

    @if ($dashboard)
        <nav class="nav" aria-label="Navigation principale">
            @foreach ($onglets as $entree)
                {{-- v4.17.3 §B1 — `wire:navigate` : l'onglet change SANS rechargement complet. La
                     page ne repasse plus par le service worker, la barre du bas ne se redessine
                     pas, et la barre de progression `.chargement` ci-dessus fait le reste. --}}
                <a href="{{ $lien($entree['route']) }}" wire:navigate class="{{ $onglet === $entree['cle'] ? 'on' : '' }}"
                   @if ($onglet === $entree['cle']) aria-current="page" @endif>
                    @if ($entree['badge'] > 0)
                        <span class="badge">{{ $entree['badge'] }}</span>
                    @endif
                    <x-espace-client-app.icone :nom="$entree['cle']" />
                    {{ $entree['libelle'] }}
                </a>
            @endforeach
        </nav>
    @endif
</div>