{{-- Modal Création Post - Composant réutilisable --}}
{{-- ! Utilise le composant parent (feedComponent ou postCreateComponent) --}}
@can('create', App\Models\Post::class)
<div x-data="postCreateComponent()"
     x-show="showCreateModal"
     x-on:open-create-post.window="showCreateModal = true"
     x-transition.opacity
     @click.self="showCreateModal = false"
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 px-4"
     x-cloak>
    <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">Créer un post</p>
                <h3 class="text-lg font-semibold text-gray-900">Partage rapide</h3>
            </div>
            <button @click="showCreateModal = false" class="text-gray-400 hover:text-gray-600">
                <i data-lucide="x" class="w-5 h-5"></i>
            </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="newPost.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">Emoji</label>
                <input type="text" maxlength="10" x-model="newPost.emoji"
                       class="w-full border border-gray-200 rounded-xl p-2 text-sm focus:ring-2 focus:ring-boulanger-orange focus:border-boulanger-orange"
                       placeholder="🔥 🛠️ 🎉">
            </div>
        </div>

        <div class="space-y-2">
            <label class="text-xs text-gray-500 font-semibold uppercase">Message</label>
            <textarea x-model="newPost.content"
                      rows="3"
                      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="Partager une prime, un succès, une info produit..."></textarea>
        </div>

        {{-- * Upload multi-images (max 5) --}}
        <div class="space-y-3">
            <div class="flex items-center justify-between">
                <label class="text-xs text-gray-500 font-semibold uppercase">
                    Images (5 max)
                </label>
                {{-- * Boutons action rapide --}}
                <div class="flex items-center gap-2">
                    {{-- Bouton Caméra --}}
                    <button @click="openCamera()"
                            type="button"
                            x-show="newPost.images.length < 5"
                            class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-blue-600 bg-blue-50 hover:bg-blue-100 rounded-lg transition">
                        <i data-lucide="camera" class="w-4 h-4"></i>
                        <span>Caméra</span>
                    </button>

                    {{-- Bouton Supprimer tout --}}
                    <button @click="removeAllImages()"
                            type="button"
                            x-show="newPost.images.length > 0"
                            class="flex items-center gap-1.5 px-3 py-1.5 text-xs font-medium text-red-600 bg-red-50 hover:bg-red-100 rounded-lg transition">
                        <i data-lucide="trash-2" class="w-4 h-4"></i>
                        <span>Tout supprimer</span>
                    </button>
                </div>
            </div>

            <input type="file"
                   x-ref="imageInput"
                   @change="handleImagesSelect($event)"
                   multiple
                   accept="image/jpeg,image/jpg,image/png,image/webp"
                   class="hidden">
            <button @click="$refs.imageInput.click()"
                    type="button"
                    class="w-full border-2 border-dashed border-gray-300 rounded-xl p-4 hover:border-boulanger-orange transition flex flex-col items-center gap-2">
                <i data-lucide="image-plus" class="w-6 h-6 text-gray-400"></i>
                <p class="text-sm text-gray-500">
                    Clique pour ajouter des images (auto-compressées)
                </p>
            </button>

            {{-- Prévisualisation miniatures --}}
            <div x-show="newPost.images.length > 0"
                 class="grid grid-cols-5 gap-2">
                <template x-for="(img, index) in newPost.images" :key="index">
                    <div class="relative group">
                        <img :src="img.preview"
                             class="w-full h-20 object-cover rounded-lg border border-gray-200">
                        <button @click="removeImage(index)"
                                type="button"
                                class="absolute top-1 right-1 bg-red-500 text-white rounded-full p-1 opacity-0 group-hover:opacity-100 transition">
                            <i data-lucide="x" class="w-3 h-3"></i>
                        </button>
                        {{-- * Indicateur de compression (UX: transparence) --}}
                        <div class="absolute bottom-1 left-1 bg-black/70 text-white text-[10px] px-1.5 py-0.5 rounded">
                            <span x-text="img.compressedSize + 'MB'"></span>
                        </div>
                    </div>
                </template>
            </div>
        </div>

        <div class="grid grid-cols-1 md:grid-cols-3 gap-3 items-center">
            <div class="space-y-2 md:col-span-2">
                <label class="text-xs text-gray-500 font-semibold uppercase">Date de fin</label>
                <input type="datetime-local"
                       x-model="newPost.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>
            <label class="flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" x-model="newPost.is_urgent" class="rounded border-gray-300 text-boulanger-orange focus:ring-boulanger-orange">
                Urgent
            </label>

            @if(auth()->check() && auth()->user()->canPublishNational())
            <label class="flex items-center gap-2 text-sm text-gray-700">
                <input type="checkbox" x-model="newPost.national" class="rounded border-gray-300 text-boulanger-orange focus:ring-boulanger-orange">
                Publier au national
            </label>
            @endif
        </div>

        <div class="flex items-center gap-3">
            <button @click="createPost()"
                    :disabled="newPostLoading"
                    class="px-4 py-2 rounded-xl bg-boulanger-orange text-white text-sm font-semibold hover:bg-orange-600 disabled:opacity-60">
                Publier
            </button>
            <button @click="showCreateModal = 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>

    {{-- * Modal Caméra (UX: capture photo directe) --}}
    <div x-show="showCameraModal"
         x-transition.opacity
         @click.self="closeCamera()"
         class="fixed inset-0 z-[60] flex items-center justify-center bg-black/90 px-4">
        <div class="bg-white rounded-2xl shadow-xl max-w-2xl w-full p-5 space-y-4">
            <div class="flex items-center justify-between mb-3">
                <h3 class="text-lg font-semibold text-gray-900">📸 Prendre une photo</h3>
                <button @click="closeCamera()" class="text-gray-400 hover:text-gray-600">
                    <i data-lucide="x" class="w-5 h-5"></i>
                </button>
            </div>

            {{-- Flux vidéo caméra --}}
            <div class="relative bg-black rounded-xl overflow-hidden aspect-video">
                <video x-ref="cameraVideo"
                       autoplay
                       playsinline
                       class="w-full h-full object-cover"></video>

                {{-- Overlay instructions --}}
                <div class="absolute bottom-4 left-1/2 -translate-x-1/2 text-center">
                    <p class="text-white text-sm font-medium drop-shadow-lg">
                        Positionne le sujet et clique sur Capturer
                    </p>
                </div>
            </div>

            {{-- Actions --}}
            <div class="flex items-center justify-center gap-3">
                <button @click="capturePhoto()"
                        :disabled="isCapturing"
                        class="px-6 py-3 rounded-xl bg-boulanger-orange text-white font-semibold hover:bg-orange-600 disabled:opacity-60 flex items-center gap-2">
                    <i data-lucide="camera" class="w-5 h-5"></i>
                    <span x-text="isCapturing ? 'Capture...' : 'Capturer'"></span>
                </button>
                <button @click="closeCamera()"
                        class="px-6 py-3 rounded-xl bg-gray-200 text-gray-700 font-semibold hover:bg-gray-300">
                    Annuler
                </button>
            </div>
        </div>
    </div>
</div>
@endcan