@extends('layouts.app')

@section('content')
<div x-data="postDetail({{ $postId }})" class="max-w-4xl mx-auto px-4 py-6 pb-32">

    {{-- Loader --}}
    <div x-show="isLoading" class="flex justify-center items-center py-20">
        <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-boulanger-orange"></div>
    </div>

    {{-- Erreur --}}
    <div x-show="error" class="bg-red-50 border border-red-200 rounded-lg p-4 mb-4">
        <p class="text-red-600" x-text="error"></p>
    </div>

    {{-- Contenu du post --}}
    <div x-show="!isLoading && post" class="bg-white rounded-2xl shadow-md overflow-hidden">

        {{-- Bouton retour --}}
        <div class="p-4 border-b border-gray-100">
            <a href="{{ route('home') }}" class="inline-flex items-center gap-2 text-gray-600 hover:text-boulanger-orange transition">
                <i data-lucide="arrow-left" class="w-5 h-5"></i>
                Retour au fil
            </a>
        </div>

        {{-- Header avec auteur --}}
        <div class="p-6 flex items-start justify-between">
            <div class="flex items-center gap-4">
                <div class="w-14 h-14 rounded-full bg-boulanger-orange/10 flex items-center justify-center flex-shrink-0">
                    <span class="text-boulanger-orange font-bold text-xl" x-text="initials(post?.author)"></span>
                </div>
                <div>
                    <p class="font-semibold text-gray-900 text-lg"
                       x-text="post?.author?.first_name + ' ' + post?.author?.last_name"></p>
                    <p class="text-sm text-gray-500">
                        <span x-text="post?.store?.name"></span>
                        <span x-show="post?.created_at"> • </span>
                        <span x-text="post?.created_at ? new Date(post.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : ''"></span>
                    </p>
                </div>
            </div>
            {{-- * Boutons d'action pour l'auteur --}}
            <div x-show="post?.user_id === {{ auth()->id() }}" class="flex flex-col gap-2">
                <button @click="openEditModal()"
                        class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-blue-600 hover:bg-blue-50 rounded-lg transition">
                    <i data-lucide="edit" class="w-4 h-4"></i>
                    Modifier
                </button>
                <button @click="confirmDeletePost()"
                        class="flex items-center gap-2 px-3 py-2 text-sm font-medium text-red-600 hover:bg-red-50 rounded-lg transition">
                    <i data-lucide="trash-2" class="w-4 h-4"></i>
                    Supprimer
                </button>
            </div>
        </div>

        {{-- Badges --}}
        <div class="px-6 pb-4 flex items-center gap-2 flex-wrap">
            <span :class="{
                'bg-red-100 text-red-600': post?.category === 'Prime',
                'bg-orange-100 text-orange-600': post?.category === 'Zimm',
                'bg-green-100 text-green-600': post?.category === 'Nouveauté',
                'bg-blue-100 text-blue-600': post?.category === 'Vie Mag',
            }" class="px-3 py-1.5 rounded-lg text-sm font-bold uppercase">
                <span x-text="post?.emoji"></span>
                <span x-text="post?.category"></span>
            </span>
            <template x-if="post?.is_urgent">
                <span class="px-3 py-1.5 rounded-lg text-sm font-bold uppercase bg-red-500 text-white">
                    🔥 URGENT
                </span>
            </template>
            <template x-if="post?.is_pinned">
                <span class="px-3 py-1.5 rounded-lg text-sm font-bold uppercase bg-boulanger-orange text-white">
                    📌 Épinglé
                </span>
            </template>
        </div>

        {{-- Contenu --}}
        <div class="px-6 pb-6">
            <p class="text-gray-800 text-base leading-relaxed whitespace-pre-wrap break-words"
               x-html="escapeHtml(post?.content)"></p>
        </div>

        {{-- Galerie d'images --}}
        <template x-if="post?.images && post.images.length > 0">
            <div class="px-6 pb-6">
                {{-- 1 image --}}
                <template x-if="post.images.length === 1">
                    <img :src="post.images[0].url"
                         class="w-full max-h-[500px] object-contain rounded-xl bg-gray-50"
                         alt="Image du post">
                </template>

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

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

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

                {{-- 5+ images --}}
                <template x-if="post.images.length >= 5">
                    <div class="grid grid-cols-3 gap-3">
                        <template x-for="img in post.images.slice(0, 5)" :key="img.id">
                            <img :src="img.url"
                                 class="w-full h-48 object-cover rounded-xl"
                                 alt="Image du post">
                        </template>
                    </div>
                </template>
            </div>
        </template>

        {{-- Actions (likes, commentaires) --}}
        <div class="px-6 py-4 border-t border-gray-100 flex items-center gap-4">
            <button @click="toggleLike()"
                    class="flex items-center gap-2 px-4 py-2 rounded-full border hover:border-boulanger-orange transition"
                    :class="post?.is_liked ? 'text-boulanger-orange bg-orange-50 border-boulanger-orange' : 'text-gray-600 border-gray-200'">
                <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>

            <div class="flex items-center gap-2 text-gray-600">
                <i data-lucide="message-square" class="w-5 h-5"></i>
                <span x-text="post?.comments_count || 0"></span>
            </div>
        </div>

        {{-- Section commentaires --}}
        <div class="border-t border-gray-100">
            <div class="p-6">
                <h3 class="font-bold text-lg mb-4">Commentaires</h3>

                {{-- Formulaire nouveau commentaire --}}
                <form @submit.prevent="submitComment()" class="mb-6">
                    <textarea
                        x-model="newComment"
                        rows="3"
                        class="w-full px-4 py-3 border border-gray-200 rounded-lg focus:outline-none focus:border-boulanger-orange resize-none"
                        placeholder="Ajouter un commentaire..."></textarea>
                    <div class="flex justify-end mt-2">
                        <button
                            type="submit"
                            :disabled="!newComment.trim() || isSubmitting"
                            class="px-6 py-2 bg-boulanger-orange text-white rounded-lg hover:bg-orange-600 transition disabled:opacity-50 disabled:cursor-not-allowed">
                            <span x-show="!isSubmitting">Publier</span>
                            <span x-show="isSubmitting">Envoi...</span>
                        </button>
                    </div>
                </form>

                {{-- Liste des commentaires --}}
                <div class="space-y-4">
                    <template x-for="comment in comments" :key="comment.id">
                        <div class="flex gap-3">
                            <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center flex-shrink-0">
                                <span class="text-gray-600 font-semibold text-sm" x-text="initials(comment.author)"></span>
                            </div>
                            <div class="flex-1">
                                <div class="bg-gray-50 rounded-lg p-4">
                                    <p class="font-semibold text-sm mb-1"
                                       x-text="comment.author?.first_name + ' ' + comment.author?.last_name"></p>
                                    <p class="text-gray-700 text-sm whitespace-pre-wrap break-words"
                                       x-html="escapeHtml(comment.content)"></p>
                                </div>
                                <p class="text-xs text-gray-500 mt-1 ml-4"
                                   x-text="comment.created_at ? new Date(comment.created_at).toLocaleDateString('fr-FR', { day: 'numeric', month: 'short', hour: '2-digit', minute: '2-digit' }) : ''"></p>
                            </div>
                        </div>
                    </template>

                    {{-- Vide --}}
                    <template x-if="!isLoadingComments && comments.length === 0">
                        <p class="text-gray-500 text-center py-8">Aucun commentaire pour le moment</p>
                    </template>

                    {{-- Loader commentaires --}}
                    <template x-if="isLoadingComments">
                        <div class="flex justify-center py-4">
                            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-boulanger-orange"></div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
    </div>

    {{-- * 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 max-h-[90vh] overflow-y-auto">
                <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">
                            <option>Prime</option>
                            <option>Zimm</option>
                            <option>Nouveauté</option>
                            <option>Vie Mag</option>
                        </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 x-show="!editingPost.deletedImageIds.includes(img.id)"
                                  class="relative w-20 h-20 rounded-lg overflow-hidden group"
                                  :style="'background-image: url(' + img.url + '); background-size: cover;'">
                                 <button @click="removeExistingEditImg(img.id)"
                                         type="button"
                                         class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                     <i data-lucide="trash-2" class="w-5 h-5 text-white"></i>
                                 </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">
                                 <img :src="preview" class="w-full h-20 object-cover rounded-lg border border-gray-200">
                                 <button @click="removeNewEditFile(index)"
                                         type="button"
                                         class="absolute inset-0 bg-black/60 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
                                     <i data-lucide="trash-2" class="w-5 h-5 text-white"></i>
                                 </button>
                             </div>
                         </template>
                         {{-- Bouton ajouter --}}
                         <label class="w-20 h-20 border-2 border-dashed border-gray-300 rounded-lg flex flex-col items-center justify-center cursor-pointer hover:border-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="editPostLoading"
                            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="editPostError">
                        <p class="text-xs text-red-500" x-text="editPostError"></p>
                    </template>
                </div>
            </div>
        </template>
    </div>
</div>

<script>
function postDetail(postId) {
    return {
        postId,
        post: null,
        comments: [],
        newComment: '',
        isLoading: true,
        isLoadingComments: true,
        isSubmitting: false,
        error: null,

        // * État édition
        showEditModal: false,
        editingPost: null,
        editPostLoading: false,
        editPostError: null,

        async init() {
            await this.fetchPost();
            await this.fetchComments();
        },

        async fetchPost() {
            try {
                this.isLoading = true;
                const response = await fetch(`/api/posts/${this.postId}`);
                if (!response.ok) throw new Error('Post introuvable');
                const data = await response.json();
                this.post = data.data ?? data;
            } catch (error) {
                console.error(error);
                this.error = error.message;
            } finally {
                this.isLoading = false;
            }
        },

        async fetchComments() {
            try {
                this.isLoadingComments = true;
                const response = await fetch(`/api/posts/${this.postId}/comments`);
                if (!response.ok) throw new Error('Erreur lors du chargement des commentaires');
                const data = await response.json();
                this.comments = data.data ?? [];
            } catch (error) {
                console.error(error);
            } finally {
                this.isLoadingComments = false;
            }
        },

        async submitComment() {
            if (!this.newComment.trim()) return;

            try {
                this.isSubmitting = true;
                const response = await fetch(`/api/posts/${this.postId}/comments`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: JSON.stringify({ content: this.newComment }),
                });

                if (!response.ok) throw new Error('Erreur lors de la publication');

                this.newComment = '';
                await this.fetchComments();

                // Mettre à jour le compteur
                if (this.post) {
                    this.post.comments_count = (this.post.comments_count || 0) + 1;
                }
            } catch (error) {
                console.error(error);
                // Erreur silencieuse
            } finally {
                this.isSubmitting = false;
            }
        },

        async toggleLike() {
            if (!this.post) return;

            try {
                const response = await fetch(`/api/posts/${this.postId}/like`, {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                });

                if (!response.ok) throw new Error('Erreur');

                const data = await response.json();
                this.post.is_liked = data.liked;
                this.post.likes_count = data.likes_count;
            } catch (error) {
                console.error(error);
            }
        },

        async confirmDeletePost() {
            if (!confirm('⚠️ Êtes-vous sûr de vouloir supprimer ce post ?\n\nCette action est irréversible.')) {
                return;
            }

            try {
                const response = await fetch(`/api/posts/${this.postId}`, {
                    method: 'DELETE',
                    headers: {
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                });

                if (!response.ok) throw new Error('Erreur lors de la suppression');

                // Rediriger vers la home après suppression
                window.location.href = '/';
            } catch (error) {
                console.error(error);
                alert('❌ Erreur lors de la suppression du post');
            }
        },

        initials(user) {
            if (!user) return '?';
            const first = user.first_name?.[0] || '';
            const last = user.last_name?.[0] || '';
            return (first + last).toUpperCase();
        },

        escapeHtml(text) {
            if (!text) return '';
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        },

        // * Édition du post
        openEditModal() {
            if (!this.post) return;
            this.editingPost = {
                id: this.post.id,
                content: this.post.content,
                category: this.post.category || 'Vie Mag',
                emoji: this.post.emoji || '',
                is_urgent: this.post.is_urgent || false,
                expires_at: this.post.expires_at ? this.post.expires_at.split('T')[0] : '',
                images: this.post.images || [],
                deletedImageIds: [],
                newFiles: [],
                newPreviews: []
            };
            this.showEditModal = true;
        },

        handleEditFiles(event) {
            const files = Array.from(event.target.files);
            files.forEach(file => {
                if (file.type.startsWith('image/')) {
                    this.editingPost.newFiles.push(file);
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        this.editingPost.newPreviews.push(e.target.result);
                    };
                    reader.readAsDataURL(file);
                }
            });
        },

        removeExistingEditImg(id) {
            if (!this.editingPost.deletedImageIds.includes(id)) {
                this.editingPost.deletedImageIds.push(id);
            }
        },

        removeNewEditFile(index) {
            this.editingPost.newFiles.splice(index, 1);
            this.editingPost.newPreviews.splice(index, 1);
        },

        async submitEditPost() {
            if (!this.editingPost?.id || !this.editingPost?.content?.trim()) {
                this.editPostError = 'Le contenu est requis';
                return;
            }

            this.editPostLoading = true;
            this.editPostError = null;

            try {
                const formData = new FormData();
                formData.append('_method', 'PUT');
                formData.append('content', this.editingPost.content);
                formData.append('category', this.editingPost.category);
                formData.append('is_urgent', this.editingPost.is_urgent ? '1' : '0');

                if (this.editingPost.expires_at) {
                    formData.append('expires_at', this.editingPost.expires_at);
                }

                // Suppressions d'images
                if (this.editingPost.deletedImageIds?.length > 0) {
                    this.editingPost.deletedImageIds.forEach(id => {
                        formData.append('delete_images[]', id);
                    });
                }

                // Nouveaux fichiers
                if (this.editingPost.newFiles?.length > 0) {
                    this.editingPost.newFiles.forEach(file => {
                        formData.append('images[]', file);
                    });
                }

                const response = await fetch(`/api/posts/${this.editingPost.id}`, {
                    method: 'POST',
                    headers: {
                        'Accept': 'application/json',
                        'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
                    },
                    body: formData
                });

                if (!response.ok) {
                    const error = await response.json();
                    throw new Error(error.message || 'Erreur lors de la mise à jour');
                }

                const { data } = await response.json();

                // Mettre à jour le post local
                this.post = { ...this.post, ...data };

                this.showEditModal = false;
                this.editingPost = null;
                alert('✅ Post mis à jour avec succès');
            } catch (error) {
                this.editPostError = error.message;
                console.error('Erreur édition:', error);
            } finally {
                this.editPostLoading = false;
            }
        }
    };
}
</script>
@endsection