{{--
    One comment or reply row — no `$isReply`/`$commentable`-driven "Répondre"
    affordance here any more: replying to a whole thread lives once in
    comment-thread.blade.php, after the thread's last visible item, so it
    can't accidentally target a reply as its parent (CommentThread::addReply()
    only accepts a root comment id).

    The edit textarea carries BOTH `x-ref` and `wire:ref` with the same name —
    two separate systems, not a typo. `$refs` inside a plain Alpine `@click`
    handler (the focus-on-open call below) resolves against Alpine's own
    `x-ref` registry; `$refs` inside a `wire:click` expression (reading the
    textarea's value to send to the server) resolves against Livewire's own
    `wire:ref` registry instead. Using only `x-ref` fails silently from
    `wire:click` with "Ref not found in component".
--}}
<div x-data="{ editing: false }" class="group flex gap-2.5">
    <span
        class="flex h-7 w-7 shrink-0 items-center justify-center rounded-full text-[11px] font-bold text-white"
        style="background-color: {{ $comment->author?->avatar_color ?? '#9CA3AF' }}"
    >
        {{ $comment->author?->initials ?? '?' }}
    </span>

    <div class="min-w-0 flex-1">
        <div class="flex items-center gap-1.5">
            <span class="text-sm font-semibold text-gray-950 dark:text-white">{{ $comment->author?->full_name ?? 'Utilisateur supprimé' }}</span>
            <span class="text-xs text-gray-400 dark:text-gray-500">{{ $comment->created_at->translatedFormat('j M · H:i') }}</span>
            @if ($comment->wasEdited())
                <span class="text-xs text-gray-400 dark:text-gray-500">(modifié)</span>
            @endif

            <div class="ml-auto flex items-center gap-1 opacity-0 transition-opacity group-hover:opacity-100">
                @can('update', $comment)
                    <button
                        type="button"
                        @click="editing = true; $nextTick(() => $refs.editBody.focus())"
                        aria-label="Modifier"
                        class="rounded-md p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-700 dark:hover:bg-white/10 dark:hover:text-gray-200"
                    >
                        <x-filament::icon icon="heroicon-o-pencil" class="h-3.5 w-3.5" />
                    </button>
                @endcan
                @can('delete', $comment)
                    <button
                        type="button"
                        wire:click="deleteComment({{ $comment->id }})"
                        wire:confirm="{{ $comment->replies->isNotEmpty() ? 'Supprimer ce commentaire et toutes ses réponses ?' : 'Supprimer ce commentaire ?' }}"
                        aria-label="Supprimer"
                        class="rounded-md p-1 text-gray-400 hover:bg-danger-50 hover:text-danger-600 dark:hover:bg-danger-500/10"
                    >
                        <x-filament::icon icon="heroicon-o-trash" class="h-3.5 w-3.5" />
                    </button>
                @endcan
            </div>
        </div>

        <div x-show="! editing">
            {{-- `{!! !!}` volontaire : `MentionParser::highlight()` échappe le
                 texte lui-même et n'ajoute que son propre balisage. --}}
            <p class="text-sm whitespace-pre-line text-gray-700 dark:text-gray-200">{!! $this->renderedBody($comment) !!}</p>
        </div>

        <div x-show="editing" x-cloak class="mt-1">
            <textarea
                x-ref="editBody"
                wire:ref="editBody"
                rows="2"
                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 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"
            >{{ $comment->body }}</textarea>
            <div class="mt-1 flex justify-end gap-2">
                <button type="button" @click="editing = 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="updateComment({{ $comment->id }}, $refs.editBody.value)"
                    @click="editing = false"
                    class="rounded-lg bg-primary-600 px-2.5 py-1 text-xs font-bold text-white hover:bg-primary-500"
                >
                    Enregistrer
                </button>
            </div>
        </div>
    </div>
</div>