{{-- * Modal Vue Détail Post avec galerie d'images --}}
{{-- ! Utilise selectedPost du composant feed --}}
<div x-show="selectedPost !== null"
     x-transition.opacity.duration.300ms
     @click.self="selectedPost = null"
     @keydown.escape.window="selectedPost = null"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/60 px-4 overflow-y-auto py-8"
     x-cloak>
    <div class="bg-white rounded-2xl shadow-2xl max-w-3xl w-full max-h-[90vh] overflow-y-auto">

        {{-- Header avec auteur et meta --}}
        <div class="sticky top-0 bg-white z-10 p-5 border-b border-gray-100 flex items-center justify-between">
            <div class="flex items-center gap-3">
                <div class="w-12 h-12 rounded-full bg-boulanger-orange/10 flex items-center justify-center">
                    <span class="text-boulanger-orange font-bold text-lg"
                          x-text="initials(selectedPost?.author)"></span>
                </div>
                <div>
                    <p class="font-semibold text-gray-900"
                       x-text="selectedPost?.author?.first_name + ' ' + selectedPost?.author?.last_name"></p>
                    <p class="text-xs text-gray-500">
                        <span x-text="selectedPost?.store?.name"></span>
                        <span x-show="selectedPost?.created_at"> • </span>
                        <span x-text="selectedPost?.created_at ? new Date(selectedPost.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : ''"></span>
                    </p>
                </div>
            </div>
            <button @click="selectedPost = null"
                    class="text-gray-400 hover:text-gray-600 transition">
                <i data-lucide="x" class="w-6 h-6"></i>
            </button>
        </div>

        {{-- Badges catégorie + urgent + épinglé --}}
        <div class="px-5 pt-4 flex items-center gap-2 flex-wrap">
            <span :class="{
                'bg-red-100 text-red-600': selectedPost?.category === 'Prime',
                'bg-orange-100 text-orange-600': selectedPost?.category === 'Zimm',
                'bg-green-100 text-green-600': selectedPost?.category === 'Nouveauté',
                'bg-blue-100 text-blue-600': selectedPost?.category === 'Vie Mag',
            }" class="px-2 py-1 rounded text-xs font-bold uppercase">
                <span x-text="selectedPost?.emoji"></span>
                <span x-text="selectedPost?.category"></span>
            </span>
            <template x-if="selectedPost?.is_urgent">
                <span class="px-2 py-1 rounded text-xs font-bold uppercase bg-red-500 text-white">
                    🔥 URGENT
                </span>
            </template>
            <template x-if="selectedPost?.is_pinned">
                <span class="px-2 py-1 rounded text-xs font-bold uppercase bg-boulanger-orange text-white">
                    📌 Épinglé
                </span>
            </template>
        </div>

        {{-- Contenu texte --}}
        <div class="px-5 py-4">
            <p class="text-gray-800 text-base leading-relaxed whitespace-pre-wrap"
               x-text="selectedPost?.content"></p>
        </div>

        {{-- Galerie d'images (Carrousel ou Grid selon nombre) --}}
        <template x-if="selectedPost?.images && selectedPost.images.length > 0">
            <div class="px-5 pb-4">
                {{-- 1 image : Pleine largeur --}}
                <template x-if="selectedPost.images.length === 1">
                    <img :src="selectedPost.images[0].url"
                         class="w-full max-h-96 object-contain rounded-xl bg-gray-50"
                         alt="Image du post">
                </template>

                {{-- 2 images : Grid 2 colonnes --}}
                <template x-if="selectedPost.images.length === 2">
                    <div class="grid grid-cols-2 gap-2">
                        <template x-for="img in selectedPost.images" :key="img.id">
                            <img :src="img.url"
                                 class="w-full h-64 object-cover rounded-xl"
                                 alt="Image du post">
                        </template>
                    </div>
                </template>

                {{-- 3 images : Grid mosaïque (1 grande + 2 petites) --}}
                <template x-if="selectedPost.images.length === 3">
                    <div class="grid grid-cols-2 gap-2">
                        <div class="col-span-2">
                            <img :src="selectedPost.images[0].url"
                                 class="w-full h-64 object-cover rounded-xl"
                                 alt="Image du post">
                        </div>
                        <template x-for="img in selectedPost.images.slice(1)" :key="img.id">
                            <img :src="img.url"
                                 class="w-full h-40 object-cover rounded-xl"
                                 alt="Image du post">
                        </template>
                    </div>
                </template>

                {{-- 4 images : Grid 2x2 --}}
                <template x-if="selectedPost.images.length === 4">
                    <div class="grid grid-cols-2 gap-2">
                        <template x-for="img in selectedPost.images" :key="img.id">
                            <img :src="img.url"
                                 class="w-full h-48 object-cover rounded-xl"
                                 alt="Image du post">
                        </template>
                    </div>
                </template>

                {{-- 5 images : Grid mosaïque (2 grandes + 3 petites) --}}
                <template x-if="selectedPost.images.length === 5">
                    <div class="grid grid-cols-3 gap-2">
                        <template x-for="(img, index) in selectedPost.images" :key="img.id">
                            <div :class="index < 2 ? 'col-span-3 sm:col-span-3/2' : 'col-span-1'">
                                <img :src="img.url"
                                     :class="index < 2 ? 'h-64' : 'h-32'"
                                     class="w-full object-cover rounded-xl"
                                     alt="Image du post">
                            </div>
                        </template>
                    </div>
                </template>
            </div>
        </template>

        {{-- Stats et actions --}}
        <div class="px-5 pb-4 flex items-center gap-4 text-sm border-t border-gray-100 pt-4">
            <button @click="toggleLike(selectedPost.id)"
                    :aria-label="selectedPost?.is_liked ? 'Retirer mon like' : 'Liker ce post'"
                    class="flex items-center gap-2 px-3 py-2 rounded-full border hover:border-boulanger-orange transition"
                    :class="selectedPost?.is_liked ? 'text-boulanger-orange bg-orange-50 border-orange-200' : 'text-gray-500 border-gray-200'">
                <i data-lucide="thumbs-up" class="w-5 h-5" :class="selectedPost?.is_liked ? 'fill-current' : ''"></i>
                <span x-text="selectedPost?.likes_count || 0"></span>
            </button>

            <div class="flex items-center gap-2 px-3 py-2 rounded-full border border-gray-200 text-gray-500">
                <i data-lucide="message-circle" class="w-5 h-5"></i>
                <span x-text="selectedPost?.comments_count || 0"></span>
            </div>

            <template x-if="selectedPost?.expires_at">
                <div class="flex items-center gap-2 px-3 py-2 rounded-full border border-gray-200 text-gray-500">
                    <i data-lucide="clock" class="w-5 h-5"></i>
                    <span class="text-xs" x-text="'Expire ' + remainingTime(selectedPost.expires_at)"></span>
                </div>
            </template>
        </div>

        {{-- Section commentaires (reprendre la logique existante du feed) --}}
        <div class="px-5 pb-5 border-t border-gray-100 pt-4">
            <button @click="commentsOpen[selectedPost?.id] ? commentsOpen[selectedPost.id] = !commentsOpen[selectedPost.id] : fetchComments(selectedPost.id)"
                    class="text-sm font-semibold text-boulanger-orange hover:text-orange-600 transition">
                <span x-text="commentsOpen[selectedPost?.id] ? 'Masquer les commentaires' : 'Voir les commentaires (' + (selectedPost?.comments_count || 0) + ')'"></span>
            </button>

            {{-- Zone commentaires (template simplifié) --}}
            <div x-show="commentsOpen[selectedPost?.id]"
                 x-collapse
                 class="mt-4 space-y-3">
                <template x-if="comments[selectedPost?.id]">
                    <template x-for="comment in comments[selectedPost.id]" :key="comment.id">
                        <div class="bg-gray-50 rounded-lg p-3">
                            <p class="text-xs font-semibold text-gray-900" x-text="comment.user?.first_name + ' ' + comment.user?.last_name"></p>
                            <p class="text-sm text-gray-700 mt-1" x-text="comment.content"></p>
                        </div>
                    </template>
                </template>

                {{-- Formulaire nouveau commentaire --}}
                <div class="flex gap-2 mt-3">
                    <input type="text"
                           x-model="commentDrafts[selectedPost?.id]"
                           @keydown.enter="submitComment(selectedPost.id)"
                           placeholder="Ajouter un commentaire..."
                           class="flex-1 px-3 py-2 text-sm border border-gray-200 rounded-lg focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                    <button @click="submitComment(selectedPost.id)"
                            class="px-4 py-2 bg-boulanger-orange text-white text-sm font-semibold rounded-lg hover:bg-orange-600 transition">
                        Envoyer
                    </button>
                </div>
            </div>
        </div>
    </div>
</div>