{{-- Tout doit rester DANS l'élément racine : une directive placée avant lui
     empêche Livewire d'hydrater le composant. --}}
<div class="mx-auto max-w-3xl px-4 py-10">
    @inject('renderer', 'App\Domains\Encyclopedia\Services\ContentRenderer')

    @push('jsonld')
        <x-jsonld-collection
            titre="Tuteur : être guidé pas à pas dans ses difficultés"
            description="Un dialogue guidé qui situe votre situation et vous oriente vers l'action adaptée, sans enregistrer aucune donnée."
            :url="route('tuteur')"
            :fil="['Tuteur' => route('tuteur')]"
            cle="tuteur" />
    @endpush
    <div class="mb-6">
        <h1 class="font-sans text-3xl font-bold text-title">Votre tuteur</h1>
        <p class="mt-2 text-muted">
            Quelques questions pour comprendre où vous en êtes et vous orienter vers la bonne action.
            <strong class="text-ink">Rien n'est enregistré</strong> et aucune donnée n'est transmise.
        </p>
    </div>

    {{-- Fil de la conversation --}}
    <div class="space-y-4" aria-live="polite">
        @foreach ($fil as $message)
            @if ($message['role'] === 'vous')
                <div class="flex justify-end">
                    <p class="max-w-[80%] rounded-2xl rounded-br-sm bg-primary px-4 py-2.5 text-[15px] text-white">
                        {{ $message['texte'] }}
                    </p>
                </div>
            @else
                @php $passe = $this->noeud($message['noeud']); @endphp
                @if ($passe)
                    <div class="flex justify-start">
                        <div class="max-w-[85%] rounded-2xl rounded-bl-sm border border-line bg-surface px-4 py-3">
                            <p class="text-[15px] leading-relaxed text-ink">{{ $passe['message'] }}</p>
                        </div>
                    </div>
                @endif
            @endif
        @endforeach

        {{-- Message courant --}}
        @if ($noeudCourant)
            <div class="flex justify-start" wire:key="noeud-{{ $courant }}">
                <div class="w-full max-w-[95%] rounded-2xl rounded-bl-sm border border-line bg-surface px-5 py-4">
                    <div class="flex items-start gap-3">
                        <span class="mt-0.5 grid h-8 w-8 flex-none place-items-center rounded-full text-sm font-bold text-white"
                              style="background: var(--color-primary)" aria-hidden="true">T</span>
                        <div class="min-w-0 flex-1">
                            <p class="text-[15.5px] leading-relaxed text-ink">{{ $noeudCourant['message'] }}</p>

                            @if (! empty($noeudCourant['aide']))
                                @php
                                    $niveau = $noeudCourant['alerte'] ?? 'info';
                                    $classe = ['info' => 'encart--info', 'attention' => 'encart--alerte', 'urgent' => 'encart--interdit'][$niveau] ?? 'encart--info';
                                    $titre = ['info' => 'À savoir', 'attention' => 'Point de vigilance', 'urgent' => 'À traiter en priorité'][$niveau] ?? 'À savoir';
                                @endphp
                                <div class="encart {{ $classe }} mt-3 px-4 py-3">
                                    <div class="encart-titre">{{ $titre }}</div>
                                    <p class="mt-1 text-[14.5px] leading-relaxed text-ink">{{ $renderer->html($noeudCourant['aide']) }}</p>
                                </div>
                            @endif

                            @if (! empty($noeudCourant['actions']))
                                <div class="mt-4">
                                    <div class="text-[11px] font-bold uppercase tracking-wide text-muted">Pour aller plus loin</div>
                                    <ul class="mt-2 space-y-1.5">
                                        @foreach ($noeudCourant['actions'] as $action)
                                            @php $url = $this->lien($action); @endphp
                                            @if ($url)
                                                <li><a href="{{ $url }}" class="link-blue text-sm">{{ $action['label'] }} →</a></li>
                                            @endif
                                        @endforeach
                                    </ul>
                                </div>
                            @endif
                        </div>
                    </div>
                </div>
            </div>

            {{-- Réponses proposées --}}
            @if (! empty($noeudCourant['choix']))
                <div class="flex flex-wrap justify-end gap-2 pt-1">
                    @foreach ($noeudCourant['choix'] as $index => $choix)
                        <button type="button" wire:click="repondre({{ $index }})"
                                class="rounded-full border border-rep-blue px-4 py-2 text-sm font-semibold text-rep-blue transition hover:bg-rep-blue/10">
                            {{ $choix['label'] }}
                        </button>
                    @endforeach
                </div>
            @endif
        @endif
    </div>

    <div class="mt-8 flex flex-wrap items-center justify-between gap-3 border-t border-line pt-5">
        <button type="button" wire:click="recommencer" class="text-sm link-blue">↺ Recommencer</button>
        <a href="{{ route('urgence') }}" class="rounded-md bg-rep-red px-4 py-2 text-sm font-semibold text-white no-underline hover:opacity-90">
            Diagnostic d'urgence
        </a>
    </div>

    <p class="mt-5 text-xs leading-relaxed text-muted">
        Ce tuteur oriente vers de l'information générale sourcée sur les textes du Livre VI du Code de commerce.
        Il <strong>ne remplace pas un conseil juridique personnalisé</strong> : pour une décision engageant votre
        entreprise, consultez un professionnel.
        <a href="{{ route('avocats') }}" class="link-blue">Trouver un avocat</a>.
    </p>
</div>