@inject('renderer', 'App\Domains\Encyclopedia\Services\ContentRenderer')
@php
    // Maillage interne automatique : les notions citées pointent vers leur fiche de glossaire.
    $renderer->linkGlossaryTerms(true);
    // La FAQ suit le niveau de lecture : les questions d'un dirigeant qui
    // découvre la procédure ne sont pas celles d'un praticien. Le balisage
    // FAQPage, lui, déclare TOUTES les questions de la page : un moteur n'a
    // pas de niveau, et a tout intérêt à voir la couverture complète.
    $faq = collect(\App\Support\FaqParNiveau::pour($entry->faq, $level));
    $faqBalisee = collect(\App\Support\FaqParNiveau::toutes($entry->faq));

    // Temps de lecture indicatif par niveau (~180 mots/minute), affiché en regard
    // de chaque niveau pour que le lecteur choisisse en connaissance de cause.
    $texteDeBlocs = function ($blocs) {
        $texte = '';
        foreach ((array) $blocs as $bloc) {
            foreach ($bloc as $valeur) {
                $texte .= ' '.(is_array($valeur) ? implode(' ', array_map('strval', $valeur)) : (string) $valeur);
            }
        }
        return $texte;
    };
    $version = $entry->publishedVersion;
    $minutesParNiveau = [];
    foreach (['debutant' => 'content_beginner', 'standard' => 'content_standard', 'expert' => 'content_expert'] as $cle => $champ) {
        $mots = str_word_count(strip_tags($texteDeBlocs($version?->{$champ} ?? [])));
        $minutesParNiveau[$cle] = max(1, (int) ceil($mots / 180));
    }

    // Sommaire « Sur cette page » : les titres de sections du niveau courant.
    $sommaire = [];
    foreach ($blocks as $iBloc => $bloc) {
        if (($bloc['type'] ?? '') === 'section' && ! empty($bloc['title'])) {
            $sommaire['bloc-'.$iBloc] = $bloc['title'];
        }
    }
    if ($faq->isNotEmpty()) {
        $sommaire['faq'] = 'Questions fréquentes';
    }
@endphp
<x-layout :title="$entry->title" :description="$entry->summary" og-type="article"
    :published-time="optional($entry->created_at)->toIso8601String()"
    :modified-time="optional($version?->verified_at ?? $entry->updated_at)->toIso8601String()">
    <x-slot:jsonld>
        @php
            $article = array_filter([
                '@type' => 'Article',
                'headline' => $entry->title,
                'description' => $entry->summary,
                'inLanguage' => 'fr-FR',
                'mainEntityOfPage' => route('encyclopedie.show', $entry),
                'datePublished' => optional($entry->created_at)->toIso8601String(),
                'dateModified' => optional($version?->verified_at ?? $entry->updated_at)->toIso8601String(),
                'author' => [
                    '@type' => 'Person',
                    'name' => $version?->author?->name ?? 'Alexandre Baumberger',
                    'description' => 'Ancien juge au tribunal de commerce de Bordeaux (2018-2026) : juge du contentieux, juge des procédures collectives et juge-commissaire.',
                    'url' => route('page.apropos'),
                ],
                'publisher' => [
                    '@type' => 'Organization',
                    'name' => 'SauverMonEntreprise.fr',
                    'url' => route('home'),
                    'logo' => ['@type' => 'ImageObject', 'url' => asset('img/og-default.png')],
                ],
            ]);
            $breadcrumb = [
                '@type' => 'BreadcrumbList',
                'itemListElement' => [
                    ['@type' => 'ListItem', 'position' => 1, 'name' => 'Accueil', 'item' => route('home')],
                    ['@type' => 'ListItem', 'position' => 2, 'name' => 'Encyclopédie', 'item' => route('encyclopedie.index')],
                    ['@type' => 'ListItem', 'position' => 3, 'name' => $entry->title],
                ],
            ];
            $graph = [$article, $breadcrumb];
            if ($faqBalisee->isNotEmpty()) {
                $graph[] = [
                    '@type' => 'FAQPage',
                    'mainEntity' => $faqBalisee->map(fn ($q) => [
                        '@type' => 'Question',
                        'name' => $q['q'],
                        'acceptedAnswer' => ['@type' => 'Answer', 'text' => $q['a']],
                    ])->all(),
                ];
            }
            $jsonldGraph = ['@context' => 'https://schema.org', '@graph' => $graph];
        @endphp
        <script type="application/ld+json">{!! json_encode($jsonldGraph, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE) !!}</script>
    </x-slot:jsonld>
    <div class="mx-auto max-w-7xl px-4 py-10">
        <nav class="mb-4 text-sm text-muted" aria-label="Fil d'Ariane">
            <a href="{{ route('home') }}" class="link-blue">Accueil</a> <span aria-hidden="true">›</span>
            <a href="{{ route('encyclopedie.index') }}" class="link-blue">Encyclopédie</a> <span aria-hidden="true">›</span>
            @if($entry->procedure)<span>{{ $entry->procedure->familyLabel() }}</span> <span aria-hidden="true">›</span>@endif
            <span class="text-ink">{{ $entry->title }}</span>
        </nav>

        <div class="grid gap-8 lg:grid-cols-[230px_minmax(0,1fr)_300px] xl:gap-10">
            {{-- ══ Colonne gauche : le sommaire, seul, navigation pure ══ --}}
            <aside class="relative z-0 hidden lg:block">
                <div class="lg:sticky lg:top-6 lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto lg:pr-1">
                @if ($sommaire !== [])
                    <div class="reveal-scale rounded-lg border border-line bg-surface p-4">
                        <div class="text-xs font-bold uppercase tracking-wider text-title-2">Sur cette page</div>
                        <ul class="mt-3 space-y-1.5">
                            @foreach ($sommaire as $ancreId => $libelle)
                                <li class="flex gap-2 text-sm">
                                    <span class="mt-[9px] h-1 w-1 flex-none rounded-full bg-line" aria-hidden="true"></span>
                                    <a href="#{{ $ancreId }}" class="text-ink no-underline hover:text-rep-blue">{{ $libelle }}</a>
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif
                </div>
            </aside>

            {{-- Colonne contenu --}}
            <article class="relative z-10">
                <h1 class="font-sans text-3xl font-bold text-title">{{ $entry->title }}</h1>
                <p class="mt-2 text-lg text-muted">{{ $entry->summary }}</p>

                <div class="mt-3 flex flex-wrap items-center gap-2 text-xs">
                    <span class="pastille pastille--vigueur">
                        <span aria-hidden="true">●</span> Validé
                    </span>
                    @if($version?->verified_at)
                        <span class="rounded-full bg-paper px-2.5 py-1 text-muted ring-1 ring-line">Vérifié le {{ $version->verified_at->format('d/m/Y') }}</span>
                    @endif
                    <x-partager class="ml-auto" :titre="$entry->title" />
                </div>

                <x-signature class="mt-3" :date="$version?->verified_at ?? $entry->updated_at" />

                {{-- Sélecteur de niveau compact (mobile uniquement, la sidebar le porte sur desktop) --}}
                <div class="mt-6 inline-flex rounded-lg border border-line bg-paper p-1 lg:hidden" data-niveau-nav role="tablist" aria-label="Niveau de lecture">
                    @foreach (['debutant' => 'Débutant', 'standard' => 'Standard', 'expert' => 'Expert'] as $key => $label)
                        <a href="{{ route('encyclopedie.show', $entry) }}?niveau={{ $key }}"
                           role="tab" aria-selected="{{ $level === $key ? 'true' : 'false' }}"
                           class="rounded-md px-4 py-1.5 text-sm font-semibold no-underline transition {{ $level === $key ? 'bg-primary text-white' : 'text-ink hover:bg-surface' }}">
                            {{ $label }} <span class="text-[11px] font-normal opacity-80">≈ {{ $minutesParNiveau[$key] }} min</span>
                        </a>
                    @endforeach
                </div>

                <x-ou-en-parle-t-on :intitule="$entry->title" surface="encyclopedie" :procedure-id="$entry->procedure_id" />

                <div class="prose-legal mt-6">
                    @forelse ($blocks as $iBloc => $block)
                        @if (($block['type'] ?? '') === 'section' && ! empty($block['title']))
                            <div id="bloc-{{ $iBloc }}" class="scroll-mt-24"><x-content-block :block="$block" /></div>
                        @else
                            <x-content-block :block="$block" />
                        @endif
                    @empty
                        <p class="text-muted">Contenu indisponible pour ce niveau.</p>
                    @endforelse
                </div>

                @if ($faq->isNotEmpty())
                    <section id="faq" class="reveal mt-10 scroll-mt-24">
                        <h2 class="font-sans text-xl font-bold text-rep-red">Questions fréquentes</h2>
                        <div class="mt-3 divide-y divide-line rounded-lg border border-line bg-surface">
                            @foreach ($faq as $item)
                                <details class="group px-4 py-3">
                                    <summary class="cursor-pointer list-none font-semibold text-title marker:content-['']">
                                        <span class="mr-2 text-rep-blue" aria-hidden="true">▸</span>{{ $item['q'] }}
                                    </summary>
                                    <p class="mt-2 pl-5 text-[15px] leading-relaxed text-ink">{{ $renderer->html($item['a']) }}</p>
                                </details>
                            @endforeach
                        </div>
                    </section>
                @endif

                {{-- Pied de fiche : auteur et date visibles (crédibilité, citabilité IA). --}}
                <div class="mt-10 border-t border-line pt-5 text-sm text-muted">
                    <div class="grid gap-2 sm:grid-cols-2">
                        <div>
                            <span class="font-semibold text-ink">Auteur&nbsp;:</span>
                            <a href="{{ route('page.apropos') }}" class="link-blue" rel="author">{{ $version?->author?->name ?? 'Alexandre Baumberger' }}</a>
                        </div>
                        <div><span class="font-semibold text-ink">Relecteur&nbsp;:</span> {{ $version?->reviewer?->name ?? '-' }}</div>
                        @if ($entry->created_at)
                            <div><span class="font-semibold text-ink">Publié le&nbsp;:</span>
                                <time datetime="{{ $entry->created_at->toDateString() }}">{{ $entry->created_at->translatedFormat('j F Y') }}</time>
                            </div>
                        @endif
                        @php $maj = $version?->verified_at ?? $entry->updated_at; @endphp
                        @if ($maj)
                            <div><span class="font-semibold text-ink">Mis à jour le&nbsp;:</span>
                                <time datetime="{{ $maj->toDateString() }}">{{ $maj->translatedFormat('j F Y') }}</time>
                            </div>
                        @endif
                    </div>
                    <p class="mt-3 text-xs">Contenu de démonstration destiné à illustrer la structure éditoriale. Toute information doit être vérifiée avant usage.</p>
                </div>
            </article>

            {{-- Colonne latérale --}}
            <aside class="relative z-0 space-y-6 lg:sticky lg:top-6 lg:self-start lg:max-h-[calc(100vh-3rem)] lg:overflow-y-auto lg:pr-1">
                {{-- Expliquez-moi selon mon profil (mémorisé sur tout le site) --}}
                @php
                    $profilCourant = \App\Support\ReadingProfile::current(request());
                @endphp
                <details open class="reveal-scale hidden rounded-lg border border-line bg-surface p-4 lg:block">
                    <summary class="cursor-pointer select-none text-xs font-bold uppercase tracking-wider text-title-2 hover:text-rep-blue">Expliquez-moi selon mon profil</summary>
                    <div class="mt-3 flex flex-wrap gap-1.5">
                        @foreach (\App\Support\ReadingProfile::PROFILES as $pcle => [$plabel, $pniveau])
                            <a href="{{ route('encyclopedie.show', $entry) }}?profil={{ $pcle }}"
                               class="rounded-full border px-3 py-1 text-xs font-semibold no-underline transition {{ $profilCourant === $pcle ? 'border-rep-blue bg-paper text-rep-blue' : 'border-line text-ink hover:border-rep-blue' }}">{{ $plabel }}</a>
                        @endforeach
                    </div>
                    <p class="mt-2 text-[11px] text-muted">{{ $profilCourant ? 'Profil mémorisé : le niveau de lecture s\'adapte sur tout le site.' : 'Choisissez votre profil : le niveau s\'adaptera sur tout le site.' }}</p>
                </details>

                {{-- Niveau de lecture (desktop) --}}
                <div class="reveal-scale hidden rounded-lg border border-line bg-surface p-4 lg:block">
                    <div class="text-xs font-bold uppercase tracking-wider text-title-2">Niveau de lecture</div>
                    <div class="mt-3 space-y-1.5" data-niveau-nav role="tablist" aria-label="Niveau de lecture">
                        @foreach ([
                            'debutant' => ['Débutant', 'Comprendre en quelques minutes, sans jargon.'],
                            'standard' => ['Standard', 'Maîtriser la procédure et agir correctement.'],
                            'expert' => ['Expert', 'Analyse approfondie pour les professionnels.'],
                        ] as $key => [$label, $desc])
                            <a href="{{ route('encyclopedie.show', $entry) }}?niveau={{ $key }}"
                               role="tab" aria-selected="{{ $level === $key ? 'true' : 'false' }}"
                               class="block rounded-md border px-3 py-2 no-underline transition
                                   {{ $level === $key ? 'border-rep-blue bg-paper' : 'border-transparent hover:border-line hover:bg-paper' }}">
                                <span class="flex items-center gap-2 text-sm font-semibold {{ $level === $key ? 'text-title' : 'text-ink' }}">
                                    <span class="h-2 w-2 rounded-full {{ $level === $key ? 'bg-rep-red' : 'bg-line' }}" aria-hidden="true"></span>
                                    {{ $label }}
                                    <span class="ml-auto text-[11px] font-normal text-muted">≈ {{ $minutesParNiveau[$key] }} min</span>
                                </span>
                                <span class="mt-0.5 block pl-4 text-xs text-muted">{{ $desc }}</span>
                            </a>
                        @endforeach
                    </div>
                    <p class="mt-3 border-t border-line pt-2.5 text-[11px] text-muted">Votre choix est mémorisé pour toutes les fiches.</p>
                </div>


                @if ($entry->articles->isNotEmpty())
                    <div class="reveal-scale rounded-lg border border-line bg-surface p-4">
                        <div class="text-xs font-bold uppercase tracking-wider text-title-2">Articles applicables</div>
                        <ul class="mt-3 space-y-2 text-sm">
                            @foreach ($entry->articles as $article)
                                <li>
                                    <a href="{{ route('livre6.show',$article) }}" class="link-blue font-medium">Article {{ $article->number }}</a>
                                    @if($article->currentVersion)
                                        <span class="ml-1 text-xs text-muted">· {{ $article->currentVersion->statusLabel() }}</span>
                                    @endif
                                </li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                @if ($entry->relatedEntries->isNotEmpty())
                    <div class="reveal-scale rounded-lg border border-line bg-surface p-4">
                        <div class="text-xs font-bold uppercase tracking-wider text-title-2">Fiches liées</div>
                        <ul class="mt-3 space-y-2 text-sm">
                            @foreach ($entry->relatedEntries as $related)
                                <li><a href="{{ route('encyclopedie.show',$related) }}" class="link-blue">{{ $related->title }}</a></li>
                            @endforeach
                        </ul>
                    </div>
                @endif

                <div class="reveal-scale rounded-lg border border-line bg-paper p-4 text-sm">
                    <a href="{{ route('urgence') }}" class="link-blue font-semibold">Faire le diagnostic d'urgence →</a>
                </div>

                <x-error-report :context="'Fiche : '.$entry->title" />
            </aside>
        </div>
    </div>
</x-layout>