{{--
    Fil de commentaires — un seul niveau de réponses (voir le docblock de
    Comment::replies()). Réutilisable tel quel pour un Projet ou un Élément
    (et plus tard Note/Document/CR de réunion) puisque le composant hôte ne
    connaît que `commentableType`/`commentableId`, jamais un modèle concret.
    Suit les mêmes conventions visuelles que les sous-tâches de la page
    dédiée : avatar rond (initiales + avatar_color), libellé de section en
    petites majuscules grises, actions révélées au survol (`group-hover`),
    `wire:confirm` sur la suppression.
--}}
@php
    $comments = $this->topLevelComments();
    $total = $comments->reduce(fn ($carry, $comment) => $carry + 1 + $comment->replies->count(), 0);
    $commentable = $this->commentable();
@endphp

<div>
    <div class="mb-2.5 flex items-center justify-between">
        <span class="text-xs font-bold tracking-wide text-gray-400 uppercase dark:text-gray-500">
            Commentaires
            @if ($total > 0)
                <span class="font-normal tabular-nums text-gray-400 dark:text-gray-500">({{ $total }})</span>
            @endif
        </span>

        @if ($comments->isNotEmpty())
            <button
                type="button"
                wire:click="toggleSort"
                class="flex items-center gap-1 text-xs font-semibold text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
            >
                <x-filament::icon icon="heroicon-o-arrows-up-down" class="h-3.5 w-3.5" />
                {{ $sortDirection === 'desc' ? 'Plus récent' : 'Plus ancien' }}
            </button>
        @endif
    </div>

    <div class="rounded-xl border border-gray-200 bg-white p-4 dark:border-white/10 dark:bg-gray-900">
        {{-- Nouveau commentaire --}}
        {{--
            L'autocomplétion des mentions. Elle n'est pas un confort : sans
            elle, il faudrait taper le nom exact d'une personne pour que
            `MentionParser` le reconnaisse, et une faute de frappe donnerait un
            commentaire qui *paraît* interpeller quelqu'un sans le notifier — le
            pire des deux mondes.

            La liste vient de `mentionablePeople()`, exactement celle contre
            laquelle l'analyse résoudra à l'enregistrement.
        --}}
        <div
            class="relative mb-2"
            x-data="{
                people: @js($this->mentionablePeople()),
                open: false,
                query: '',
                index: 0,
                get matches() {
                    const q = this.query.toLowerCase();
                    return this.people.filter(p => p.name.toLowerCase().includes(q)).slice(0, 6);
                },
                // Ne se déclenche qu'après un `@` en début de mot : sans le
                // test sur le caractère précédent, une adresse email ouvrirait
                // la liste au milieu de la saisie.
                detect(el) {
                    const upTo = el.value.slice(0, el.selectionStart);
                    const at = upTo.lastIndexOf('@');
                    if (at === -1 || (at > 0 && !/\s/.test(upTo[at - 1]))) { this.open = false; return; }
                    const after = upTo.slice(at + 1);
                    if (after.includes('\n')) { this.open = false; return; }
                    this.query = after;
                    this.index = 0;
                    this.open = this.matches.length > 0;
                },
                choose(el, person) {
                    const upTo = el.value.slice(0, el.selectionStart);
                    const at = upTo.lastIndexOf('@');
                    const before = el.value.slice(0, at);
                    const after = el.value.slice(el.selectionStart);
                    el.value = before + '@' + person.name + ' ' + after;
                    const caret = (before + '@' + person.name + ' ').length;
                    el.focus();
                    el.setSelectionRange(caret, caret);
                    this.open = false;
                },
            }"
        >
            <textarea
                x-ref="box"
                wire:ref="newCommentBody"
                rows="2"
                placeholder="Ajouter un commentaire… (@ pour mentionner)"
                @input="detect($el)"
                @keydown.arrow-down.prevent="open && (index = (index + 1) % matches.length)"
                @keydown.arrow-up.prevent="open && (index = (index - 1 + matches.length) % matches.length)"
                @keydown.enter="if (open) { $event.preventDefault(); choose($el, matches[index]); }"
                @keydown.escape="open = false"
                @click.outside="open = false"
                class="w-full resize-none rounded-lg border border-gray-200 bg-gray-50 px-3 py-2 text-sm text-gray-950 placeholder:text-gray-400 focus:border-primary-500 focus:bg-white focus:ring-1 focus:ring-primary-500 focus:outline-none dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:bg-gray-900"
            ></textarea>

            <div
                x-show="open"
                x-cloak
                class="absolute z-30 mt-1 w-64 overflow-hidden rounded-lg border border-gray-200 bg-white shadow-lg dark:border-white/10 dark:bg-gray-900"
            >
                <template x-for="(person, i) in matches" :key="person.id">
                    <button
                        type="button"
                        @click="choose($refs.box, person)"
                        :class="i === index ? 'bg-gray-100 dark:bg-white/10' : ''"
                        class="block w-full px-3 py-1.5 text-left text-[13px] text-gray-700 hover:bg-gray-50 dark:text-gray-200 dark:hover:bg-white/5"
                        x-text="person.name"
                    ></button>
                </template>
            </div>
            <div class="mt-1.5 flex justify-end">
                <button
                    type="button"
                    wire:click="addComment($refs.newCommentBody.value); $refs.newCommentBody.value = ''"
                    class="rounded-lg bg-primary-600 px-3 py-1.5 text-xs font-bold text-white hover:bg-primary-500"
                >
                    Publier
                </button>
            </div>
        </div>

        @forelse ($comments as $comment)
            <div
                wire:key="comment-{{ $comment->id }}"
                x-data="{ replying: false }"
                class="{{ ! $loop->first ? 'border-t border-gray-100 pt-4 dark:border-white/5' : '' }} mb-4 last:mb-0"
            >
                @include('livewire.comments.partials.comment-row', ['comment' => $comment, 'commentable' => $commentable])

                @if ($comment->replies->isNotEmpty())
                    <div class="mt-3 ml-9 space-y-3 border-l-2 border-gray-100 pl-3 dark:border-white/5">
                        @foreach ($comment->replies as $reply)
                            <div wire:key="comment-{{ $reply->id }}">
                                @include('livewire.comments.partials.comment-row', ['comment' => $reply, 'commentable' => $commentable])
                            </div>
                        @endforeach
                    </div>
                @endif

                {{--
                    Pas de réponse-à-réponse (voir Comment::replies()) — un seul
                    "Répondre" par fil, toujours après le dernier élément visible
                    (la racine s'il n'y a pas encore de réponse, sinon la dernière
                    réponse), câblé sur `addReply($comment->id, ...)` où
                    `$comment` est la racine du fil, jamais une réponse.
                --}}
                @can('create', [\App\Models\Comment::class, $commentable])
                    <div class="mt-2 ml-9">
                        <button
                            type="button"
                            x-show="! replying"
                            @click="replying = true; $nextTick(() => $refs['replyBody{{ $comment->id }}'].focus())"
                            class="text-xs font-semibold text-gray-400 hover:text-primary-600 dark:text-gray-500 dark:hover:text-primary-400"
                        >
                            Répondre
                        </button>

                        <div x-show="replying" x-cloak>
                            <textarea
                                x-ref="replyBody{{ $comment->id }}"
                                wire:ref="replyBody{{ $comment->id }}"
                                rows="2"
                                placeholder="Répondre…"
                                class="w-full resize-none rounded-lg border border-gray-200 bg-gray-50 px-2.5 py-1.5 text-sm text-gray-950 placeholder:text-gray-400 focus:border-primary-500 focus:bg-white focus:ring-1 focus:ring-primary-500 focus:outline-none dark:border-white/10 dark:bg-white/5 dark:text-white dark:focus:bg-gray-900"
                            ></textarea>
                            <div class="mt-1 flex justify-end gap-2">
                                <button type="button" @click="replying = false" class="text-xs font-semibold text-gray-500 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200">
                                    Annuler
                                </button>
                                <button
                                    type="button"
                                    wire:click="addReply({{ $comment->id }}, $refs['replyBody{{ $comment->id }}'].value); $refs['replyBody{{ $comment->id }}'].value = ''"
                                    @click="replying = false"
                                    class="rounded-lg bg-primary-600 px-2.5 py-1 text-xs font-bold text-white hover:bg-primary-500"
                                >
                                    Publier
                                </button>
                            </div>
                        </div>
                    </div>
                @endcan
            </div>
        @empty
            <p class="text-sm text-gray-400 dark:text-gray-500">Aucun commentaire pour l'instant.</p>
        @endforelse
    </div>
</div>