@inject('renderer', 'App\Domains\Encyclopedia\Services\ContentRenderer')

@php $renderer->linkGlossaryTerms(true); @endphp

<x-layout :title="$template->title" :description="$template->meta_description" og-type="article"
    :published-time="optional($template->created_at)->toIso8601String()"
    :modified-time="optional($template->updated_at)->toIso8601String()">
    <x-slot:jsonld>
        <x-jsonld :graph="\App\Support\StructuredData::graph(
            \App\Support\StructuredData::article(
                $template->title,
                $template->meta_description,
                route('modeles.show', $template),
                $template->created_at,
                $template->updated_at,
            ),
            \App\Support\StructuredData::breadcrumb([
                'Modèles de courriers' => route('modeles.index'),
                $template->title => route('modeles.show', $template),
            ]),
        )" />

    <div class="mx-auto max-w-3xl px-4 py-12">
        <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('modeles.index') }}" class="link-blue">Modèles</a> <span aria-hidden="true">›</span>
            <span class="text-ink">{{ $template->title }}</span>
        </nav>

        <span class="tricolore-tick"></span>
        <h1 class="mt-3 font-sans text-3xl font-bold leading-tight text-title">{{ $template->title }}</h1>
        @if ($template->recipient)
            <p class="mt-2 text-[12px] font-bold uppercase tracking-wide text-rep-blue">Destinataire : {{ $template->recipient }}</p>
        @endif
        <p class="mt-2 text-sm text-muted">Mis à jour le {{ $template->updated_at?->translatedFormat('j F Y') }}</p>

        {{-- Quand utiliser ce modèle --}}
        <section class="mt-6">
            <h2 class="font-sans text-xl font-bold text-rep-red">Quand utiliser ce modèle</h2>
            <p class="mt-2 leading-relaxed text-ink">{{ $renderer->html($template->context) }}</p>
        </section>

        {{-- Le courrier --}}
        <section class="mt-8">
            <div class="flex flex-wrap items-center justify-between gap-3">
                <h2 class="font-sans text-xl font-bold text-rep-red">Le modèle</h2>
                <div class="flex gap-2">
                    <button type="button" data-copy
                            class="rounded-md border border-line px-3.5 py-2 text-sm font-semibold text-ink hover:border-rep-blue">Copier</button>
                    <a href="{{ route('modeles.download', [$template, 'txt']) }}" class="rounded-md border border-line px-3.5 py-2 text-sm font-semibold text-ink no-underline hover:border-rep-blue">Texte (.txt)</a>
                    <a href="{{ route('modeles.download', [$template, 'pdf']) }}" class="rounded-md bg-primary px-3.5 py-2 text-sm font-semibold text-white no-underline hover:opacity-90">PDF</a>
                </div>
            </div>
            <p class="mt-1.5 text-xs text-muted">Remplacez les champs <span class="rounded bg-paper px-1.5 py-0.5 ring-1 ring-line">[ENTRE CROCHETS]</span> par vos informations.</p>
            <pre id="lettre" class="mt-3 whitespace-pre-wrap rounded-2xl border border-line bg-surface p-6 font-sans text-[15px] leading-relaxed text-ink">{{ $template->body }}</pre>
        </section>

        {{-- Pièces à joindre --}}
        @if (!empty($template->checklist))
            <section class="mt-8">
                <h2 class="font-sans text-xl font-bold text-rep-red">Pièces à joindre</h2>
                <ul class="mt-3 space-y-2">
                    @foreach ($template->checklist as $item)
                        <li class="flex gap-2 text-[15px] leading-relaxed text-ink"><span class="text-rep-blue" aria-hidden="true">☐</span><span>{{ $renderer->html($item) }}</span></li>
                    @endforeach
                </ul>
            </section>
        @endif

        {{-- Vigilance --}}
        @if (!empty($template->warnings))
            <section class="mt-8 rounded-lg border border-line bg-surface p-5">
                <h2 class="flex items-center gap-2 font-sans text-lg font-bold text-rep-red">
                    <span class="grid h-7 w-7 place-items-center rounded-md bg-alert-urgence text-xs font-bold text-white" aria-hidden="true">!</span>
                    Points de vigilance
                </h2>
                <ul class="mt-3 space-y-2 leading-relaxed">
                    @foreach ($template->warnings as $w)
                        <li class="flex gap-2"><span class="mt-1 text-alert-urgence" aria-hidden="true">▸</span><span>{{ $renderer->html($w) }}</span></li>
                    @endforeach
                </ul>
            </section>
        @endif

        {{-- Guides liés --}}
        @if (!empty($template->related_guides))
            @php $guides = \App\Domains\Editorial\Models\Guide::published()->whereIn('slug', $template->related_guides)->get(['title', 'slug']); @endphp
            @if ($guides->isNotEmpty())
                <section class="mt-8">
                    <h2 class="font-sans text-xl font-bold text-rep-red">Pour aller plus loin</h2>
                    <div class="mt-3 flex flex-wrap gap-2">
                        @foreach ($guides as $g)
                            <a href="{{ route('guides.show', $g) }}" class="inline-flex items-center gap-1 rounded-full border border-line bg-paper px-3 py-1 text-sm text-ink no-underline hover:border-rep-blue hover:text-rep-blue">{{ $g->title }} <span aria-hidden="true">→</span></a>
                        @endforeach
                    </div>
                </section>
            @endif
        @endif

        <div class="mt-12 border-t border-line pt-5 text-xs text-muted">
            Modèle indicatif rédigé sous la direction d'<a href="{{ route('page.apropos') }}" class="link-blue">Alexandre Baumberger</a>, ancien juge au tribunal de commerce de Bordeaux (2018-2026) et juge-commissaire en procédures collectives.
            À adapter à votre situation : il ne remplace pas un conseil personnalisé.
        </div>

        <div class="mt-6"><x-error-report :context="'Modèle : '.$template->title" /></div>
    </div>

    <script>
        (function () {
            var btn = document.querySelector('[data-copy]');
            var src = document.getElementById('lettre');
            if (!btn || !src || !navigator.clipboard) return;
            btn.addEventListener('click', function () {
                navigator.clipboard.writeText(src.textContent).then(function () {
                    var old = btn.textContent;
                    btn.textContent = 'Copié ✓';
                    setTimeout(function () { btn.textContent = old; }, 2000);
                });
            });
        })();
    </script>
</x-layout>