{{-- * VUE : Fil d'actualité (Homepage) --}}
{{-- ? Pattern Alpine.js API-First : feedComponent() gère 100% de la dynamique --}}
{{-- ! Cloisonnement magasin strict : un vendeur ne voit QUE les posts de son magasin --}}
@extends('layouts.base')

@section('title', 'Fil d\'actualités - Animation Vendeurs')

@section('x-data', "feedComponent({ canPin: " . json_encode(optional(auth()->user())->isAdmin()) . " })")

@section('content')
    {{-- * Conteneur principal avec détection scroll infini --}}
    <div class="max-w-3xl mx-auto p-4 pb-32 space-y-6"
         x-on:open-create-post.window="showCreateModal = true"
         x-on:scroll.window.throttle.500ms="
            if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight - 500) {
                loadMore();
            }
         ">
        {{-- * Widget Bienvenue + compteur expirations/épinglés --}}
        {{-- ? Ton "Pro, Simple, Sympa" de la charte : personnalisation avec prénom --}}
        <section class="bg-white rounded-2xl shadow-sm border border-orange-100 overflow-hidden" x-data="{ expanded: false }">
            {{-- Header compact toujours visible --}}
            <div class="p-3 flex items-center justify-between cursor-pointer" @click="expanded = !expanded">
                <div class="flex items-center gap-3 flex-1 min-w-0">
                    <div class="w-10 h-10 rounded-full bg-gradient-to-br from-boulanger-orange to-orange-600 flex items-center justify-center text-white font-bold flex-shrink-0">
                        {{ strtoupper(substr(optional(auth()->user())->first_name ?? 'M', 0, 1)) }}
                    </div>
                    <div class="flex-1 min-w-0">
                        <p class="text-sm font-semibold text-gray-800 truncate">
                            {{ optional(auth()->user())->first_name ?? 'Mous' }} 👋
                        </p>
                        <p class="text-xs text-gray-500">
                            <span x-show="!expanded">Filtres & infos</span>
                            <span x-show="expanded">Masquer les filtres</span>
                        </p>
                    </div>
                </div>
                <div class="flex items-center gap-2">
                    {{-- Compteurs rapides --}}
                    <div class="flex gap-1.5">
                        <button @click.stop="setFilter('expiring')"
                                x-show="expiringSoonCount > 0"
                                class="px-2 py-1 bg-orange-50 text-orange-700 rounded-lg text-xs font-bold hover:bg-orange-100 transition min-h-[32px]">
                            ⏰ <span x-text="expiringSoonCount"></span>
                        </button>
                        <button @click.stop="setFilter('pinned')"
                                x-show="pinned.length > 0"
                                class="px-2 py-1 bg-blue-50 text-blue-700 rounded-lg text-xs font-bold hover:bg-blue-100 transition min-h-[32px]">
                            📌 <span x-text="pinned.length"></span>
                        </button>
                    </div>
                    {{-- Chevron --}}
                    <i data-lucide="chevron-down"
                       class="w-5 h-5 text-gray-400 transition-transform duration-200"
                       :class="expanded && 'rotate-180'"></i>
                </div>
            </div>

            {{-- * Filtres rapides par catégorie (Prime, Zimm, Nouveauté, Vie Mag) --}}
            {{-- ? Arrondis généreux (rounded-full) selon charte B-Bloc --}}
            <div x-show="expanded"
                 x-collapse
                 class="border-t border-gray-100">
                <div class="p-3 relative">
                    {{-- Gradient fade edges pour affordance scroll --}}
                    <div class="absolute left-0 top-3 bottom-3 w-8 bg-gradient-to-r from-white to-transparent pointer-events-none z-10"></div>
                    <div class="absolute right-0 top-3 bottom-3 w-8 bg-gradient-to-l from-white to-transparent pointer-events-none z-10"></div>

                    {{-- Scroll container avec snap --}}
                    <div class="flex gap-2 overflow-x-auto scroll-smooth snap-x snap-mandatory pb-2"
                         style="scrollbar-width: none; -ms-overflow-style: none;">
                        <template x-for="filter in filters" :key="filter.id">
                            <button
                                @click="setFilter(filter.id); expanded = false"
                                :aria-label="'Filtrer par ' + filter.label"
                                :aria-pressed="currentFilter === filter.id ? 'true' : 'false'"
                                class="px-4 py-2.5 rounded-full whitespace-nowrap text-sm font-semibold transition border flex-shrink-0 snap-start min-h-[44px]"
                                :class="currentFilter === filter.id
                                    ? 'bg-boulanger-orange text-white border-boulanger-orange shadow-md scale-105'
                                    : 'bg-white border-gray-200 text-gray-600 hover:border-boulanger-orange hover:shadow-sm'">
                                <span x-text="filter.label"></span>
                            </button>
                        </template>
                    </div>
                </div>
            </div>
        </section>

        {{-- * Zone épinglée : Posts forcés en haut par les admins --}}
        {{-- ? Bordure dashed pour différenciation visuelle selon charte --}}
        {{-- ! Les posts épinglés restent visibles même après expiration --}}

        {{-- * Zone épinglée : Carrousel de posts forcés en haut par les admins --}}
        {{-- ? Bordure dashed pour différenciation visuelle selon charte --}}
        {{-- ! Les posts épinglés restent visibles même après expiration --}}
        <section class="bg-white border border-dashed border-orange-200 rounded-2xl p-4 shadow-sm" x-show="pinned.length">
            <div class="flex items-center justify-between mb-3">
                <div class="flex items-center gap-2">
                    <i data-lucide="pin" class="w-5 h-5 text-boulanger-orange"></i>
                    <p class="text-sm font-semibold text-boulanger-dark">Posts épinglés (admin)</p>
                </div>
                <div class="flex items-center gap-2" x-show="pinned.length > 1">
                    <button @click="prevPinned()" class="w-8 h-8 rounded-full bg-white border border-orange-200 hover:bg-orange-50 flex items-center justify-center transition">
                        <i data-lucide="chevron-left" class="w-4 h-4 text-boulanger-orange"></i>
                    </button>
                    <span class="text-xs text-gray-500" x-text="(currentPinnedIndex + 1) + ' / ' + pinned.length"></span>
                    <button @click="nextPinned()" class="w-8 h-8 rounded-full bg-white border border-orange-200 hover:bg-orange-50 flex items-center justify-center transition">
                        <i data-lucide="chevron-right" class="w-4 h-4 text-boulanger-orange"></i>
                    </button>
                </div>
            </div>

            <template x-if="currentPinnedPost()">
                <article class="bg-orange-50 border border-orange-100 rounded-xl p-4 transition-all duration-300">
                    <div class="flex items-start justify-between gap-3">
                        <div class="flex items-start gap-3 flex-1 cursor-pointer" @click="openPostDetail(currentPinnedPost().id)">
                            <div class="w-10 h-10 rounded-full bg-white flex items-center justify-center text-sm font-semibold text-boulanger-dark flex-shrink-0">
                                <span x-text="initials(currentPinnedPost().author)"></span>
                            </div>
                            <div class="flex-1 min-w-0">
                                <p class="font-semibold text-boulanger-dark" x-text="currentPinnedPost().author?.first_name || currentPinnedPost().author?.name"></p>
                                <p class="text-xs text-boulanger-gray" x-text="new Date(currentPinnedPost().created_at).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short' })"></p>
                                <p class="text-sm text-gray-700 mt-2 break-words" x-text="currentPinnedPost().content"></p>
                            </div>
                        </div>
                        <span class="px-3 py-1 rounded-full text-[11px] font-semibold uppercase tracking-wider bg-white text-boulanger-orange border border-orange-200 flex-shrink-0"
                              x-text="(currentPinnedPost().emoji || '📌') + ' ' + currentPinnedPost().category"></span>
                    </div>
                    <div class="mt-3 flex items-center gap-3 text-xs text-boulanger-gray flex-wrap">
                        <span class="px-2 py-1 bg-white rounded-full border border-orange-100" x-text="'📌 Épinglé par ' + (currentPinnedPost().pinner?.first_name || 'Admin')"></span>
                        <span class="px-2 py-1 bg-white rounded-full border border-orange-100" x-show="currentPinnedPost().expires_at" x-text="'Expire le ' + new Date(currentPinnedPost().expires_at).toLocaleDateString('fr-FR')"></span>
                        @can('admin')
                            <button @click.stop="togglePin(currentPinnedPost())" class="px-2 py-1 rounded-full bg-white border border-orange-200 text-boulanger-orange font-semibold hover:bg-orange-100">Désépingler</button>
                        @endcan
                    </div>
                </article>
            </template>
        </section>
        <section class="space-y-4">
            {{-- * Skeleton Loading enrichi : simule la structure réelle des posts --}}
            {{-- ? UX Senior : skeleton reflète le contenu pour éviter le layout shift --}}
            <template x-if="isLoading">
                <div class="space-y-4">
                    @for ($i = 0; $i < 3; $i++)
                        <div class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 animate-pulse" role="status" aria-label="Chargement des posts...">
                            {{-- Header avec avatar + nom --}}
                            <div class="flex items-center gap-3 mb-3">
                                <div class="w-10 h-10 rounded-full bg-gray-200"></div>
                                <div class="flex-1 space-y-2">
                                    <div class="h-4 bg-gray-200 rounded w-1/3"></div>
                                    <div class="h-3 bg-gray-200 rounded w-1/4"></div>
                                </div>
                            </div>
                            {{-- Contenu --}}
                            <div class="space-y-2 mb-3">
                                <div class="h-3 bg-gray-200 rounded w-full"></div>
                                <div class="h-3 bg-gray-200 rounded w-5/6"></div>
                            </div>
                            {{-- Boutons d'action --}}
                            <div class="flex gap-2">
                                <div class="h-8 bg-gray-200 rounded-full w-20"></div>
                                <div class="h-8 bg-gray-200 rounded-full w-20"></div>
                                <div class="h-8 bg-gray-200 rounded-full w-24"></div>
                            </div>
                        </div>
                    @endfor
                </div>
            </template>

            {{-- * Gestion d'erreur avec feedback utilisateur --}}
            {{-- ? Ton "Sympa" : message d'erreur friendly avec action de retry --}}
            <template x-if="error">
                <div class="bg-white rounded-2xl p-6 shadow-sm border border-red-200 text-center" role="alert">
                    <div class="w-16 h-16 bg-red-50 rounded-full flex items-center justify-center mx-auto mb-4">
                        <i data-lucide="alert-circle" class="w-8 h-8 text-red-500"></i>
                    </div>
                    <h3 class="text-lg font-bold text-boulanger-dark mb-2">Oups, une petite erreur !</h3>
                    <p class="text-sm text-gray-600 mb-4" x-text="error"></p>
                    <button @click="error = null; fetchPosts(true)"
                            class="px-6 py-2 bg-boulanger-orange text-white rounded-full font-semibold hover:bg-orange-600 transition">
                        Réessayer
                    </button>
                </div>
            </template>

            {{-- * Posts réels avec cloisonnement magasin --}}
            {{-- ! CRITIQUE : Ne jamais afficher les posts d'un autre magasin (sauf nationaux) --}}
            <template x-for="post in filteredPosts()" :key="post.id">
                <article class="bg-white rounded-2xl p-4 shadow-sm border border-gray-100 transition hover:shadow-md"
                         x-cloak
                         role="article"
                         :aria-label="'Post de ' + (post.author?.first_name || post.author?.name)">
                    <div class="flex justify-between items-start gap-2">
                        <div class="flex items-center gap-3">
                            {{-- * Avatar B-Bloc : arrondis généreux selon charte --}}
                            <div class="w-10 h-10 rounded-full bg-orange-50 text-sm font-semibold flex items-center justify-center text-boulanger-dark">
                                <span x-text="initials(post.author)"></span>
                            </div>
                            <div>
                                <p class="font-bold text-sm text-boulanger-dark" x-text="post.author?.first_name || post.author?.name"></p>
                                <p class="text-xs text-gray-400" x-text="new Date(post.created_at).toLocaleDateString('fr-FR', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' })"></p>
                                {{-- * Tags : Catégorie + États --}}
                                {{-- ? Couleurs conformes charte : rouge=Prime, amber=Zimm, vert=Nouveauté, bleu=Vie Mag --}}
                                <div class="flex flex-wrap items-center gap-1 mt-1">
                                    <span class="px-2 py-0.5 rounded-full text-[11px] font-semibold uppercase tracking-wider"
                                          :class="{
                                            'bg-red-100 text-red-800 border border-red-200': post.category === 'Prime',
                                            'bg-amber-100 text-amber-800 border border-amber-200': post.category === 'Zimm',
                                            'bg-green-100 text-green-800 border border-green-200': post.category === 'Nouveauté',
                                            'bg-blue-100 text-blue-800 border border-blue-200': post.category === 'Vie Mag',
                                          }"
                                          x-text="(post.emoji || '📰') + ' ' + post.category"></span>
                                    <span class="px-2 py-0.5 rounded-full text-[11px] font-semibold uppercase tracking-wider bg-orange-100 text-orange-700" x-show="post.is_urgent">Urgent</span>
                                    <span class="px-2 py-0.5 rounded-full text-[11px] font-semibold uppercase tracking-wider bg-red-50 text-red-600" x-show="post.is_expired">Expiré</span>
                                    <span class="px-2 py-0.5 rounded-full text-[11px] font-semibold uppercase tracking-wider bg-amber-50 text-amber-700" x-show="post.is_expiring_soon">Expire bientôt</span>
                                </div>
                            </div>
                        </div>
                        <div class="flex flex-col items-end gap-1">
                            <span class="text-[11px] text-boulanger-gray" x-show="post.expires_at" x-text="'Fin ' + new Date(post.expires_at).toLocaleDateString('fr-FR')"></span>
                            {{-- * Boutons pour l'auteur du post --}}
                            <div x-show="post.user_id === {{ auth()->id() }}" class="flex gap-1">
                                <button @click="openEditModal(post)"
                                        class="text-xs text-blue-600 hover:text-blue-800 font-semibold px-2 py-1 rounded hover:bg-blue-50 transition"
                                        title="Modifier mon post">
                                    ✏️ Modifier
                                </button>
                                <button @click="confirmDeletePost(post.id)"
                                        class="text-xs text-red-600 hover:text-red-800 font-semibold px-2 py-1 rounded hover:bg-red-50 transition"
                                        title="Supprimer mon post">
                                    🗑️ Supprimer
                                </button>
                            </div>
                            {{-- * Boutons pour managers/animateurs/admin --}}
                            @can('manager')
                                <button x-show="post.user_id !== {{ auth()->id() }}"
                                        @click="confirmDeletePost(post.id)"
                                        class="text-xs text-red-500 hover:text-red-700 font-semibold">
                                    Supprimer (modération)
                                </button>
                            @endcan
                            @can('admin')
                                <button @click="togglePin(post)"
                                        class="text-xs text-boulanger-orange hover:text-orange-700 font-semibold"
                                        x-text="post.is_pinned ? 'Désépingler' : 'Épingler'">
                                </button>
                            @endcan
                        </div>
                    </div>

                    {{-- Contenu avec retour à la ligne et word-wrap --}}
                    <div class="mt-3">
                        <template x-if="post.content && post.content.length <= 300">
                            <p class="text-gray-700 text-sm leading-relaxed whitespace-pre-wrap break-words"
                               x-html="escapeHtml(post.content)"></p>
                        </template>

                        <template x-if="post.content && post.content.length > 300">
                            <div>
                                <p class="text-gray-700 text-sm leading-relaxed whitespace-pre-wrap break-words"
                                   x-html="escapeHtml(post.content.substring(0, 300)) + '...'">
                                </p>
                                <button @click="openPostDetail(post.id)"
                                        class="text-boulanger-orange text-sm font-semibold mt-1 hover:underline">
                                    Voir plus
                                </button>
                            </div>
                        </template>
                    </div>

                    {{-- * Affichage images (legacy: image_url unique) --}}
                    <template x-if="post.image_url && (!post.images || post.images.length === 0)">
                        <div class="mt-3 aspect-[4/3] bg-gray-100 rounded-lg overflow-hidden">
                            <img :src="post.image_url" alt="Image du post" class="w-full h-full object-cover" loading="lazy" decoding="async">
                        </div>
                    </template>

                    {{-- * Affichage multi-images (nouvelle structure) --}}
                    <template x-if="post.images && post.images.length > 0">
                        <div class="mt-3">
                            {{-- 1 seule image : Pleine largeur --}}
                            <template x-if="post.images.length === 1">
                                <div class="aspect-[4/3] bg-gray-100 rounded-xl overflow-hidden">
                                    <img :src="post.images[0].url"
                                         @click="openPostDetail(post.id)"
                                         class="w-full h-full object-cover cursor-pointer hover:opacity-90 transition"
                                         loading="lazy"
                                         decoding="async"
                                         alt="Image du post">
                                </div>
                            </template>

                            {{-- 2 images : Grid 2 colonnes --}}
                            <template x-if="post.images.length === 2">
                                <div class="grid grid-cols-2 gap-2" @click="openPostDetail(post.id)">
                                    <template x-for="img in post.images" :key="img.id">
                                        <div class="aspect-square bg-gray-100 rounded-lg overflow-hidden">
                                            <img :src="img.url"
                                                 class="w-full h-full object-cover cursor-pointer hover:opacity-90 transition"
                                                 loading="lazy"
                                                 decoding="async"
                                                 alt="Image du post">
                                        </div>
                                    </template>
                                </div>
                            </template>

                            {{-- 3+ images : Grid avec overlay +X --}}
                            <template x-if="post.images.length >= 3">
                                <div class="grid grid-cols-2 gap-2 cursor-pointer" @click="openPostDetail(post.id)">
                                    <template x-for="(img, index) in post.images.slice(0, 4)" :key="img.id">
                                        <div class="relative group aspect-square bg-gray-100 rounded-lg overflow-hidden">
                                            <img :src="img.url"
                                                 class="w-full h-full object-cover group-hover:opacity-90 transition"
                                                 loading="lazy"
                                                 decoding="async"
                                                 alt="Image du post">
                                            {{-- Overlay "+X" pour dernière image si plus de 4 --}}
                                            <template x-if="index === 3 && post.images.length > 4">
                                                <div class="absolute inset-0 bg-black/60 rounded-lg flex items-center justify-center">
                                                    <span class="text-white text-2xl font-bold"
                                                          x-text="'+' + (post.images.length - 4)"></span>
                                                </div>
                                            </template>
                                        </div>
                                    </template>
                                </div>
                            </template>
                        </div>
                    </template>

                    {{-- * Interactions : Likes, Commentaires, Temps restant, Signalements --}}
                    {{-- ? Pattern API-First : toggleLike(), fetchComments(), reportExpiry() appellent l'API --}}
                    <div class="flex items-center flex-wrap gap-3 pt-3 border-t border-gray-50 text-sm touch-group">
                        <button @click="toggleLike(post.id)"
                                :aria-label="post.is_liked ? 'Retirer mon j\'aime' : 'J\'aime ce post'"
                                class="flex items-center gap-2 px-3 py-2 rounded-full border border-gray-100 hover:border-boulanger-orange touch-target-sm"
                                :class="post.is_liked ? 'text-boulanger-orange bg-orange-50' : 'text-gray-500'">
                            <i data-lucide="thumbs-up" class="w-5 h-5" :class="post.is_liked ? 'fill-current' : ''"></i>
                            <span x-text="post.likes_count || 0"></span>
                        </button>

                        <button @click="commentsOpen[post.id] ? commentsOpen[post.id] = !commentsOpen[post.id] : fetchComments(post.id)"
                                :aria-label="'Voir les ' + (post.comments_count || 0) + ' commentaires'"
                                class="flex items-center gap-2 px-3 py-2 rounded-full border border-gray-100 hover:border-boulanger-orange text-gray-500 touch-target-sm">
                            <i data-lucide="message-square" class="w-5 h-5"></i>
                            <span x-text="post.comments_count || 0"></span>
                        </button>

                        <div class="flex items-center gap-2 px-3 py-2 rounded-full border border-gray-100 text-gray-600 min-h-[44px]">
                            <i data-lucide="clock" class="w-5 h-5"></i>
                            <span x-text="remainingTime(post.expires_at)"></span>
                        </div>

                        {{-- * Signalements chaud/froid : permet aux vendeurs de signaler si le post est encore valide --}}
                        {{-- ! À partir de 3 votes "froid", le post est masqué automatiquement (sauf épinglé) --}}
                        <div class="flex items-center gap-2 ml-auto">
                            <button @click="reportExpiry(post, 'valid')"
                                    aria-label="Signaler comme toujours valide"
                                    class="flex items-center gap-1 px-3 py-2 rounded-full text-xs border border-green-200 text-green-800 bg-green-100 hover:bg-green-200 font-semibold touch-target-sm">
                                <span aria-hidden="true">🔥</span>
                                <span x-text="post.valid_votes_count || 0"></span>
                            </button>
                            <button @click="reportExpiry(post)"
                                    aria-label="Signaler comme expiré"
                                    class="flex items-center gap-1 px-3 py-2 rounded-full text-xs border border-blue-200 text-blue-800 bg-blue-100 hover:bg-blue-200 font-semibold touch-target-sm">
                                <span aria-hidden="true">🥶</span>
                                <span x-text="post.expired_votes_count || 0"></span>
                            </button>
                        </div>
                    </div>

                    {{-- * Commentaires imbriqués type Reddit : parent + replies --}}
                    {{-- ? Pattern API : submitComment() POST /api/posts/{id}/comments puis refresh dynamique --}}
                    <div class="mt-4 border-t border-gray-100 pt-3" x-show="commentsOpen[post.id]" x-collapse>
                        <div class="flex gap-2 items-start">
                            <textarea
                                class="w-full border border-gray-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange"
                                rows="2"
                                placeholder="Ajouter un commentaire..."
                                aria-label="Écrire un commentaire"
                                x-model="commentDrafts[post.id]"
                            ></textarea>
                            <button @click="submitComment(post.id)"
                                    aria-label="Envoyer le commentaire"
                                    class="px-3 py-2 bg-boulanger-orange text-white rounded-xl text-sm font-semibold hover:bg-orange-600">
                                Envoyer
                            </button>
                        </div>

                        <template x-if="commentsLoading">
                            <p class="text-xs text-gray-400 mt-2">Chargement des commentaires...</p>
                        </template>

                        <div class="mt-3 space-y-3" x-show="comments[post.id]?.length">
                            <template x-for="comment in comments[post.id]" :key="'c'+comment.id">
                                <div class="bg-gray-50 rounded-xl p-3">
                                    <div class="flex items-start gap-2">
                                        <div class="w-8 h-8 rounded-full bg-white flex items-center justify-center text-xs font-bold text-boulanger-orange"
                                             x-text="comment.author?.first_name?.charAt(0)"></div>
                                        <div class="flex-1">
                                            <p class="text-sm font-semibold text-boulanger-dark" x-text="comment.author?.first_name || comment.author?.name"></p>
                                            <p class="text-[11px] text-gray-400" x-text="new Date(comment.created_at).toLocaleString('fr-FR', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' })"></p>
                                            <p class="text-sm text-gray-700 mt-1" x-text="comment.content"></p>
                                            <div class="flex items-center gap-3 mt-2 text-xs text-boulanger-gray">
                                                <button class="font-semibold hover:text-boulanger-orange"
                                                        @click="replyTarget = comment.id">
                                                    Répondre
                                                </button>
                                            </div>
                                            {{-- Réponses de niveau 2 --}}
                                            <div class="mt-3 space-y-2 border-l border-gray-200 pl-3" x-show="comment.replies?.length">
                                                <template x-for="child in comment.replies" :key="'r'+child.id">
                                                    <div class="bg-white rounded-lg p-2 shadow-sm">
                                                        <p class="text-sm font-semibold text-boulanger-dark" x-text="child.author?.first_name || child.author?.name"></p>
                                                        <p class="text-[11px] text-gray-400" x-text="new Date(child.created_at).toLocaleString('fr-FR', { day: '2-digit', month: 'short', hour: '2-digit', minute: '2-digit' })"></p>
                                                        <p class="text-sm text-gray-700 mt-1" x-text="child.content"></p>
                                                    </div>
                                                </template>
                                            </div>
                                            <div class="mt-3" x-show="replyTarget === comment.id">
                                                <div class="flex gap-2 items-start">
                                                    <textarea
                                                        class="w-full border border-gray-200 rounded-xl p-2 text-sm focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange"
                                                        rows="2"
                                                        placeholder="Répondre à ce commentaire..."
                                                        x-model="commentDrafts[comment.id]"
                                                    ></textarea>
                                                    <button @click="submitComment(post.id, comment.id)"
                                                            class="px-3 py-2 bg-boulanger-orange text-white rounded-xl text-sm font-semibold hover:bg-orange-600">
                                                        Répondre
                                                    </button>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </div>
                    </div>
                </article>
            </template>
        </section>
    </div>

    {{-- * Modal de création de post --}}
    @include('components.post-create-modal')

    {{-- * Modal d'édition de post --}}
    <div x-show="showEditModal"
         x-transition.opacity
         @click.self="showEditModal = false"
         class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
         x-cloak>
        <template x-if="editingPost">
            <div class="bg-white rounded-2xl shadow-xl max-w-lg w-full p-5 space-y-4 border border-gray-100">
                <div class="flex items-center justify-between">
                    <div>
                        <p class="text-sm text-gray-500">Modifier le post</p>
                        <h3 class="text-lg font-semibold text-gray-900">Édition</h3>
                    </div>
                    <button @click="showEditModal = false" class="text-gray-400 hover:text-gray-600">
                        <svg class="w-5 h-5" 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>
                </div>

                <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                    <div class="space-y-2">
                        <label class="text-xs text-gray-500 font-semibold uppercase">Catégorie</label>
                        <select class="w-full border border-gray-200 rounded-xl p-2 text-sm focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange"
                                x-model="editingPost.category">
                            <template x-for="cat in postCategories" :key="cat.id">
                                <option :value="cat.name" x-text="`${cat.emoji || ''} ${cat.name}`"></option>
                            </template>
                        </select>
                    </div>
                    <div class="space-y-2">
                        <label class="text-xs text-gray-500 font-semibold uppercase">Date de fin</label>
                        <input type="date"
                               x-model="editingPost.expires_at"
                               class="w-full border border-gray-200 rounded-xl p-2 text-sm focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange">
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-xs text-gray-500 font-semibold uppercase">Images (Max 5)</label>
                    <div class="flex flex-wrap gap-2">
                         {{-- Images existantes --}}
                         <template x-for="img in editingPost.images" :key="'exist-'+img.id">
                             <div class="relative w-20 h-20 rounded-lg overflow-hidden group"
                                  x-show="!editingPost.deletedImageIds.includes(img.id)">
                                 <img :src="img.url" class="w-full h-full object-cover">
                                 <button @click="removeExistingEditImg(img.id)"
                                         class="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 shadow-md opacity-0 group-hover:opacity-100 transition"
                                         title="Supprimer cette image">
                                     <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                 </button>
                             </div>
                         </template>

                         {{-- Nouvelles images --}}
                         <template x-for="(preview, index) in editingPost.newPreviews" :key="'new-'+index">
                             <div class="relative w-20 h-20 rounded-lg overflow-hidden group ring-2 ring-green-400 box-border">
                                 <img :src="preview.url" class="w-full h-full object-cover">
                                 <button @click="removeNewEditFile(index)"
                                         class="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 shadow-md opacity-0 group-hover:opacity-100 transition"
                                         title="Annuler cet ajout">
                                     <svg class="w-3 h-3" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/></svg>
                                 </button>
                             </div>
                         </template>

                         {{-- Bouton Ajout --}}
                         <label class="w-20 h-20 flex flex-col items-center justify-center border-2 border-dashed border-gray-300 rounded-lg hover:border-boulanger-orange hover:bg-orange-50 cursor-pointer text-gray-400 hover:text-boulanger-orange transition"
                                x-show="(editingPost.images.length - editingPost.deletedImageIds.length) + editingPost.newFiles.length < 5">
                             <input type="file" multiple accept="image/*" class="hidden" @change="handleEditFiles">
                             <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4"/></svg>
                             <span class="text-[10px] mt-1 font-semibold">Ajouter</span>
                         </label>
                    </div>
                </div>

                <div class="space-y-2">
                    <label class="text-xs text-gray-500 font-semibold uppercase">Message</label>
                    <textarea x-model="editingPost.content"
                              rows="5"
                              class="w-full border border-gray-200 rounded-xl p-3 text-sm focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange"
                              placeholder="Contenu du post..."></textarea>
                </div>

                <label class="flex items-center gap-2 text-sm text-gray-700">
                    <input type="checkbox" x-model="editingPost.is_urgent" class="rounded border-gray-300 text-boulanger-orange focus:ring-boulanger-orange">
                    Post urgent
                </label>

                <div class="flex items-center gap-3">
                    <button @click="submitEditPost()"
                            :disabled="newPostLoading"
                            class="px-4 py-2 rounded-xl bg-blue-600 text-white text-sm font-semibold hover:bg-blue-700 disabled:opacity-60 transition">
                        💾 Enregistrer
                    </button>
                    <button @click="showEditModal = false" class="text-sm text-gray-500 hover:text-gray-700">Annuler</button>
                    <template x-if="newPostError">
                        <p class="text-xs text-red-500" x-text="newPostError"></p>
                    </template>
                </div>
            </div>
        </template>
    </div>

    {{-- * Modal vue détail post avec galerie --}}
    @include('components.post-detail-modal')
@endsection