@php
    $briefComments = $brief->comments ?? collect();
    $canComment = auth()->user()->hasRole('admin') || auth()->user()->employer;
    $myInitials = collect(explode(' ', (string) (auth()->user()->name ?? 'U')))->filter()->take(2)->map(fn ($w) => mb_strtoupper(mb_substr($w, 0, 1)))->implode('') ?: 'U';
@endphp

<div id="comments" class="flex h-full min-h-[320px] w-full flex-col rounded-xl border border-slate-200 bg-white shadow-sm">
    <div class="border-b border-slate-100 px-4 py-3">
        <h3 class="text-sm font-semibold text-slate-900">Commentaires</h3>
        <p class="text-xs text-slate-500">{{ $briefComments->count() }} publication(s)</p>
    </div>

    @if($canComment)
        <form method="POST" action="{{ route('employer-briefs.comments.store', $brief) }}" enctype="multipart/form-data"
              class="border-b border-slate-100 px-3 py-3">
            @csrf
            <div class="flex items-start gap-2">
                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-[#E83646] text-[10px] font-bold text-white">
                    {{ $myInitials }}
                </div>
                <div class="min-w-0 flex-1">
                    <div class="flex items-center gap-2 rounded-full bg-slate-100 px-3 py-1.5 ring-1 ring-slate-200 focus-within:bg-white focus-within:ring-[#E83646]/40">
                        <textarea name="comment" rows="1" placeholder="Ecrire un commentaire..."
                                  class="max-h-24 min-h-[32px] flex-1 resize-none border-0 bg-transparent py-1 text-sm text-slate-800 placeholder:text-slate-400 focus:outline-none focus:ring-0">{{ old('comment') }}</textarea>
                        <label for="comment-images" class="shrink-0 cursor-pointer rounded-full p-1 text-slate-500 hover:bg-slate-200/80 hover:text-[#E83646]" title="Ajouter une image">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z"/></svg>
                            <input id="comment-images" name="images[]" type="file" multiple accept="image/*" class="sr-only">
                        </label>
                    </div>
                    <x-input-error :messages="$errors->get('comment')" class="mt-1" />
                    <x-input-error :messages="$errors->get('images')" class="mt-1" />
                    <x-input-error :messages="$errors->get('images.*')" class="mt-1" />
                    <div class="mt-2 flex justify-end">
                        <button type="submit" class="rounded-full bg-[#E83646] px-3 py-1 text-xs font-semibold text-white hover:bg-rose-600">
                            Publier
                        </button>
                    </div>
                </div>
            </div>
        </form>
    @endif

    <div class="flex-1 space-y-3 overflow-y-auto px-3 py-3" style="max-height: 420px;">
        @forelse($briefComments as $comment)
            @php
                $authorName = $comment->employer?->user?->name ?? 'Employe';
                $commentInitials = collect(explode(' ', $authorName))->filter()->take(2)->map(fn ($w) => mb_strtoupper(mb_substr($w, 0, 1)))->implode('') ?: 'E';
            @endphp
            <article class="flex gap-2">
                <div class="flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-slate-300 text-[10px] font-bold text-white">
                    {{ $commentInitials }}
                </div>
                <div class="min-w-0 flex-1">
                    <div class="inline-block max-w-full rounded-2xl rounded-tl-sm bg-slate-100 px-3 py-2">
                        <p class="text-xs font-semibold leading-tight text-slate-900">{{ $authorName }}</p>
                        @if($comment->comment)
                            <p class="mt-0.5 whitespace-pre-wrap text-sm text-slate-800">{{ $comment->comment }}</p>
                        @endif
                        @if($comment->images && $comment->images->isNotEmpty())
                            <div class="mt-2 flex flex-wrap gap-1">
                                @foreach($comment->images as $image)
                                    @php $imgUrl = route('employer-briefs.comments.images.show', ['brief' => $brief, 'image' => $image]); @endphp
                                    <button type="button" class="comment-image-preview overflow-hidden rounded-lg" data-image-url="{{ $imgUrl }}">
                                        <img src="{{ $imgUrl }}" alt="" class="h-16 w-16 object-cover">
                                    </button>
                                @endforeach
                            </div>
                        @endif
                    </div>
                    <p class="mt-0.5 px-1 text-[11px] text-slate-400">{{ $comment->created_at?->diffForHumans() }}</p>
                </div>
            </article>
        @empty
            <p class="py-6 text-center text-xs text-slate-400">Aucun commentaire. Soyez le premier a reagir.</p>
        @endforelse
    </div>
</div>

<div id="comment-image-modal" class="fixed inset-0 z-50 hidden items-center justify-center bg-slate-900/80 p-4">
    <button type="button" id="comment-image-close" class="absolute right-4 top-4 rounded-full bg-white/10 p-2 text-white hover:bg-white/20">
        <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
    </button>
    <img id="comment-image-full" src="" alt="" class="max-h-[90vh] max-w-full rounded-lg object-contain shadow-2xl">
</div>

<script>
(function () {
    const modal = document.getElementById('comment-image-modal');
    const fullImg = document.getElementById('comment-image-full');
    if (!modal || !fullImg) return;

    document.querySelectorAll('.comment-image-preview').forEach((btn) => {
        btn.addEventListener('click', () => {
            fullImg.src = btn.dataset.imageUrl;
            modal.classList.remove('hidden');
            modal.classList.add('flex');
        });
    });

    function closeModal() {
        modal.classList.add('hidden');
        modal.classList.remove('flex');
        fullImg.src = '';
    }

    document.getElementById('comment-image-close')?.addEventListener('click', closeModal);
    modal.addEventListener('click', (e) => { if (e.target === modal) closeModal(); });

    document.querySelectorAll('#comments textarea[name="comment"]').forEach((ta) => {
        ta.addEventListener('input', () => {
            ta.style.height = 'auto';
            ta.style.height = Math.min(ta.scrollHeight, 96) + 'px';
        });
    });
})();
</script>