@inject('renderer', 'App\Domains\Encyclopedia\Services\ContentRenderer')
@php
    // Maillage interne automatique : les notions citées pointent vers leur fiche de glossaire.
    $renderer->linkGlossaryTerms(true);
    $faq = collect($entry->faq ?? [])->filter(fn ($q) => ! empty($q['q']) && ! empty($q['a']))->values();

    // 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));
    }
@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
            $jsonldGraph = \App\Support\StructuredData::graph(
                \App\Support\StructuredData::article(
                    $entry->title,
                    $entry->summary,
                    route('encyclopedie.show', $entry),
                    $entry->created_at,
                    $version?->verified_at ?? $entry->updated_at,
                ),
                \App\Support\StructuredData::breadcrumb([
                    'Encyclopédie' => route('encyclopedie.index'),
                    $entry->title => route('encyclopedie.show', $entry),
                ]),
                \App\Support\StructuredData::faq($faq),
            );
        @endphp
        <x-jsonld :graph="$jsonldGraph" />
    </x-slot:jsonld>
    <div class="mx-auto max-w-6xl 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-10 lg:grid-cols-[1fr_300px]">
            {{-- 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
                </div>

                {{-- 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" 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>

                <div class="prose-legal mt-6">
                    @forelse ($blocks as $block)
                        <x-content-block :block="$block" />
                    @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">
                {{-- 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" 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>