@props(['model'])

<div x-data="commentSystem(@js($model->getMorphClass()), {{ $model->id }})" 
     id="comments"
     @comments-updated.window="refreshComments($event.detail)"
     @open-comment-lightbox.window="openLightbox($event.detail.element || $event.detail)"
     @keydown.escape.window="if (isLightboxOpen) closeLightbox()"
     @keydown.right.window="if (isLightboxOpen) nextLightbox()"
     @keydown.left.window="if (isLightboxOpen) prevLightbox()"
     class="mt-12 space-y-8 scroll-mt-28">
    <div class="flex items-center gap-3 mb-8">
        <h2 class="text-2xl font-black uppercase text-white tracking-tight">Comments</h2>
        <span class="inline-flex items-center justify-center min-w-[1.75rem] h-7 px-2 rounded-full bg-pink-600 text-white text-sm font-black leading-none shadow-sm shadow-pink-600/30 -translate-y-[2.5px]"
              x-text="count">
            {{ $model->comments->count() }}
        </span>
        <div class="flex-1 h-px bg-white/5"></div>
    </div>

    @auth
        <div id="comment-form" class="glass-panel p-6 border-white/5 transition-all duration-500">
            <form @submit.prevent="submitComment">
                <x-honeypot />
                <div class="space-y-4">
                    <textarea 
                        x-model="newComment" 
                        x-ref="commentTextarea"
                        class="w-full bg-white/5 border-white/20 focus:border-pink-500 focus:ring-pink-500 text-white placeholder-gray-500 transition" 
                        rows="3" 
                        placeholder="Join the chat..."></textarea>
                    
                    <div class="flex flex-col sm:flex-row sm:items-center justify-between gap-3">
                        <div class="flex flex-wrap items-center gap-3">
                            <label class="cursor-pointer group flex items-center gap-2 text-sm text-gray-400 hover:text-white transition">
                                <input type="file" x-ref="fileInput" multiple accept="image/jpeg,image/png,image/webp,image/gif" class="hidden" @change="handleFileUpload($event)">
                                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 group-hover:text-pink-500 transition" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                    <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>
                                <span x-text="files.length ? files.length + ' files' : 'Upload images'"></span>
                            </label>
                            <span class="text-[11px] text-gray-500 font-medium">Max 5 images &bull; 10MB limit (JPG, PNG, WEBP)</span>
                        </div>
                        <button 
                            type="submit" 
                            :disabled="isSubmitting || !newComment.trim()"
                            class="relative inline-flex items-center justify-center px-4 py-2 sm:px-5 sm:py-2.5 text-white text-xs sm:text-sm font-bold tracking-wide group disabled:opacity-50 disabled:cursor-not-allowed disabled:pointer-events-none self-end sm:self-auto">
                            <svg class="absolute inset-0 w-full h-full text-pink-600 fill-current drop-shadow-[0_0_12px_rgba(219,39,119,0.45)] transform -rotate-2 group-hover:rotate-0 group-hover:scale-105 group-hover:text-pink-500 transition-all duration-200 pointer-events-none"
                                viewBox="0 0 100 40" preserveAspectRatio="none">
                                <polygon points="1,2 99,0 98,39 2,40" />
                            </svg>
                            <span class="relative z-10" x-show="!isSubmitting">Post Comment</span>
                            <span class="relative z-10" x-show="isSubmitting">Posting...</span>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    @else
        <div class="glass-panel p-8 text-center border-dashed border-white/20">
            <p class="text-gray-400 mb-4">You must be logged in to join the conversation.</p>
            <a href="{{ route('login', ['redirect' => url()->current() . '#comments']) }}" class="relative inline-flex items-center justify-center px-5 py-2.5 text-white text-sm font-bold tracking-wide group">
                <svg class="absolute inset-0 w-full h-full text-pink-600 fill-current drop-shadow-[0_0_12px_rgba(219,39,119,0.45)] transform -rotate-2 group-hover:rotate-0 group-hover:scale-105 group-hover:text-pink-500 transition-all duration-200 pointer-events-none"
                    viewBox="0 0 100 40" preserveAspectRatio="none">
                    <polygon points="1,2 99,0 98,39 2,40" />
                </svg>
                <span class="relative z-10">Log In</span>
            </a>
        </div>
    @endauth

    <div class="space-y-6" x-ref="commentsContainer">
        @include('partials.comments-list', ['comments' => $model->comments])
    </div>

    <!-- Lightbox Modal -->
    <template x-teleport="body">
        <div x-show="isLightboxOpen" 
            x-transition:enter="transition ease-out duration-300"
            x-transition:enter-start="opacity-0" 
            x-transition:enter-end="opacity-100"
            x-transition:leave="transition ease-in duration-200"
            x-transition:leave-start="opacity-100" 
            x-transition:leave-end="opacity-0"
            class="fixed inset-0 z-[100] flex items-center justify-center bg-black/95 backdrop-blur-xl touch-none select-none overscroll-none"
            @click.self="closeLightbox()"
            @touchstart.passive="handleLightboxTouchStart($event)"
            @touchmove.passive="handleLightboxTouchMove($event)"
            @touchend.passive="handleLightboxTouchEnd($event)">

            <!-- Close Button -->
            <button type="button"
                @click="closeLightbox()"
                class="absolute top-4 right-4 sm:top-8 sm:right-8 w-11 h-11 sm:w-12 sm:h-12 flex items-center justify-center rounded-full bg-white/10 hover:bg-white/20 sm:bg-transparent text-white/70 hover:text-white backdrop-blur-md sm:backdrop-blur-none transition-all z-[120]"
                aria-label="Close lightbox">
                <svg class="w-6 h-6 sm:w-8 sm:h-8" 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"></path>
                </svg>
            </button>

            <!-- Navigation Chevrons -->
            <template x-if="lightboxImages.length > 1">
                <div>
                    <button type="button"
                        @click.stop="prevLightbox()"
                        class="absolute left-2 sm:left-6 md:left-8 top-1/2 -translate-y-1/2 w-11 h-11 sm:w-14 sm:h-14 flex items-center justify-center rounded-full bg-black/40 hover:bg-black/70 sm:bg-white/5 sm:hover:bg-white/10 text-white/80 hover:text-white sm:text-white/40 sm:hover:text-pink-500 backdrop-blur-md border border-white/20 sm:border-transparent transition-all z-[110]"
                        aria-label="Previous image">
                        <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M15 19l-7-7 7-7"></path>
                        </svg>
                    </button>

                    <button type="button"
                        @click.stop="nextLightbox()"
                        class="absolute right-2 sm:right-6 md:right-8 top-1/2 -translate-y-1/2 w-11 h-11 sm:w-14 sm:h-14 flex items-center justify-center rounded-full bg-black/40 hover:bg-black/70 sm:bg-white/5 sm:hover:bg-white/10 text-white/80 hover:text-white sm:text-white/40 sm:hover:text-pink-500 backdrop-blur-md border border-white/20 sm:border-transparent transition-all z-[110]"
                        aria-label="Next image">
                        <svg class="w-6 h-6 sm:w-8 sm:h-8" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M9 5l7 7-7 7"></path>
                        </svg>
                    </button>
                </div>
            </template>

            <!-- Hardware-Accelerated Smooth Horizontal Slide Track -->
            <div class="relative w-full max-w-6xl h-[66vh] sm:h-[72vh] -translate-y-4 sm:-translate-y-6 overflow-hidden flex items-center pointer-events-none">
                <div class="flex h-full w-full pointer-events-auto"
                     :style="`transform: translate3d(calc(-${lightboxIndex * 100}% + ${lightboxCurrentDeltaX}px), 0, 0); transition: ${lightboxIsSwiping || lightboxNoTransition ? 'none' : 'transform 450ms cubic-bezier(0.2, 0.9, 0.3, 1)'}; will-change: transform;`">
                    <template x-for="(img, idx) in lightboxImages" :key="idx">
                        <div class="w-full h-full flex-shrink-0 flex items-center justify-center px-2 sm:px-6 select-none"
                             @click.self="closeLightbox()">
                            <img :src="img.url"
                                loading="lazy"
                                draggable="false"
                                class="max-h-full max-w-full w-auto h-auto object-contain shadow-2xl border border-white/20 select-none pointer-events-none" />
                        </div>
                    </template>
                </div>
            </div>

            <!-- Footer Counter & Swipe Hint -->
            <div class="absolute bottom-4 sm:bottom-6 left-1/2 -translate-x-1/2 flex flex-col items-center gap-2 pointer-events-none z-[110] text-center max-w-[90vw]">
                <template x-if="lightboxImages[lightboxIndex] && lightboxImages[lightboxIndex].user">
                    <div class="text-xs sm:text-sm font-semibold tracking-wide text-white/90 drop-shadow-[0_2px_4px_rgba(0,0,0,0.8)]">
                        Uploaded by <span class="font-bold text-pink-400" x-text="lightboxImages[lightboxIndex].user"></span>
                    </div>
                </template>

                <div class="px-3.5 py-1 rounded-full bg-black/50 backdrop-blur-md border border-white/20 text-white/80 font-black uppercase tracking-widest text-[11px] sm:text-xs">
                    <span x-text="lightboxIndex + 1"></span> / <span x-text="lightboxImages.length"></span>
                </div>
                <div class="text-[10px] text-white/40 uppercase tracking-widest font-semibold sm:hidden" x-show="lightboxImages.length > 1">
                    Swipe to browse
                </div>
            </div>
        </div>
    </template>
</div>

<script>
    function commentSystem(modelType, modelId) {
        return {
            newComment: '',
            files: [],
            isSubmitting: false,
            count: {{ $model->comments->count() }},

            // Lightbox State & Methods
            isLightboxOpen: false,
            lightboxIndex: 0,
            lightboxImages: [],
            lightboxTouchStartX: 0,
            lightboxTouchStartY: 0,
            lightboxTouchEndX: 0,
            lightboxTouchEndY: 0,
            lightboxCurrentDeltaX: 0,
            lightboxIsSwiping: false,
            lightboxNoTransition: false,

            init() {
                this.$watch('isLightboxOpen', value => {
                    document.body.style.overflow = value ? 'hidden' : '';
                });
            },

            openLightbox(target) {
                const root = this.$el ? (this.$el.closest('#comments') || this.$el) : document.getElementById('comments');
                if (!root) return;
                const imgEls = Array.from(root.querySelectorAll('[data-comment-image]'));
                this.lightboxImages = imgEls.map(node => ({
                    url: node.getAttribute('data-comment-image'),
                    user: node.getAttribute('data-comment-user') || 'Anonymous'
                })).filter(item => Boolean(item.url));

                if (this.lightboxImages.length === 0) return;

                let idx = 0;
                if (typeof target === 'string') {
                    idx = this.lightboxImages.findIndex(item => item.url === target);
                } else if (target && target.nodeType) {
                    const matchingEl = target.closest('[data-comment-image]');
                    idx = imgEls.indexOf(matchingEl);
                    if (idx === -1 && matchingEl) {
                        const url = matchingEl.getAttribute('data-comment-image');
                        idx = this.lightboxImages.findIndex(item => item.url === url);
                    }
                } else if (typeof target === 'number') {
                    idx = target;
                }

                this.lightboxIndex = Math.max(0, idx >= 0 ? idx : 0);
                this.lightboxCurrentDeltaX = 0;
                this.lightboxNoTransition = true;
                this.isLightboxOpen = true;
                setTimeout(() => {
                    this.lightboxNoTransition = false;
                }, 60);
            },

            nextLightbox() {
                if (this.lightboxImages.length === 0) return;
                if (this.lightboxIndex < this.lightboxImages.length - 1) {
                    this.lightboxIndex++;
                } else {
                    this.lightboxIndex = 0;
                }
            },

            prevLightbox() {
                if (this.lightboxImages.length === 0) return;
                if (this.lightboxIndex > 0) {
                    this.lightboxIndex--;
                } else {
                    this.lightboxIndex = this.lightboxImages.length - 1;
                }
            },

            closeLightbox() {
                this.isLightboxOpen = false;
            },

            handleLightboxTouchStart(e) {
                if (!e.touches || e.touches.length === 0) return;
                this.lightboxTouchStartX = e.touches[0].clientX;
                this.lightboxTouchStartY = e.touches[0].clientY;
                this.lightboxTouchEndX = e.touches[0].clientX;
                this.lightboxTouchEndY = e.touches[0].clientY;
                this.lightboxCurrentDeltaX = 0;
                this.lightboxIsSwiping = true;
            },

            handleLightboxTouchMove(e) {
                if (!this.lightboxIsSwiping || !e.touches || e.touches.length === 0) return;
                this.lightboxTouchEndX = e.touches[0].clientX;
                this.lightboxTouchEndY = e.touches[0].clientY;

                const rawDeltaX = this.lightboxTouchEndX - this.lightboxTouchStartX;
                const rawDeltaY = this.lightboxTouchEndY - this.lightboxTouchStartY;

                if (Math.abs(rawDeltaX) > Math.abs(rawDeltaY)) {
                    if ((this.lightboxIndex === 0 && rawDeltaX > 0) || 
                        (this.lightboxIndex === this.lightboxImages.length - 1 && rawDeltaX < 0)) {
                        this.lightboxCurrentDeltaX = rawDeltaX * 0.25;
                    } else {
                        this.lightboxCurrentDeltaX = rawDeltaX;
                    }
                }
            },

            handleLightboxTouchEnd(e) {
                if (!this.lightboxIsSwiping) return;
                this.lightboxIsSwiping = false;

                if (e.changedTouches && e.changedTouches.length > 0) {
                    this.lightboxTouchEndX = e.changedTouches[0].clientX;
                    this.lightboxTouchEndY = e.changedTouches[0].clientY;
                }

                const deltaX = this.lightboxCurrentDeltaX;
                const rawDeltaY = this.lightboxTouchEndY - this.lightboxTouchStartY;
                const absX = Math.abs(deltaX);
                const absY = Math.abs(rawDeltaY);

                this.lightboxCurrentDeltaX = 0;

                if (absX > 45 && absX > absY) {
                    if (deltaX < 0 && this.lightboxIndex < this.lightboxImages.length - 1) {
                        this.lightboxIndex++;
                    } else if (deltaX > 0 && this.lightboxIndex > 0) {
                        this.lightboxIndex--;
                    }
                } else if (rawDeltaY > 90 && absY > absX * 1.5) {
                    this.closeLightbox();
                }
            },

            handleFileUpload(event) {
                const selected = Array.from(event.target.files);
                if (selected.length > 5) {
                    alert('You can upload a maximum of 5 images per comment.');
                    this.files = selected.slice(0, 5);
                } else {
                    this.files = selected;
                }

                // Check 10MB limit per file
                const oversized = this.files.some(f => f.size > 10 * 1024 * 1024);
                if (oversized) {
                    alert('One or more selected images exceed the 10MB limit. Please choose smaller files.');
                    this.files = this.files.filter(f => f.size <= 10 * 1024 * 1024);
                }
            },

            refreshComments(html) {
                this.$refs.commentsContainer.innerHTML = html;
                this.count = this.$refs.commentsContainer.querySelectorAll('.relative.group').length;
                this.newComment = '';
                this.files = [];
                if (this.$refs.fileInput) this.$refs.fileInput.value = '';
            },

            async submitComment() {
                await this.postComment(this.newComment, null);
            },

            async postComment(text, parentId) {
                if (!text.trim()) return;
                this.isSubmitting = true;

                const formData = new FormData();
                formData.append('text', text);
                formData.append('parentable_id', modelId);
                formData.append('parentable_type', modelType);
                if (parentId) formData.append('parent_id', parentId);
                
                // Append honeypot if present
                const hpField = document.getElementById('_hp_website');
                if (hpField) {
                    formData.append('_hp_website', hpField.value);
                }

                this.files.forEach(file => {
                    formData.append('images[]', file);
                });

                try {
                    const response = await fetch('{{ route('comments.store') }}', {
                        method: 'POST',
                        body: formData,
                        headers: {
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    });

                    const data = await response.json();
                    if (data.success) {
                        this.refreshComments(data.html);
                    }
                } catch (error) {
                    console.error('Submission failed', error);
                } finally {
                    this.isSubmitting = false;
                }
            },

            async deleteComment(id) {
                if (!confirm('Are you sure you want to delete this comment?')) return;

                try {
                    const response = await fetch(`/comments/${id}`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-HTTP-Method-Override': 'DELETE',
                            'Accept': 'application/json'
                        }
                    });

                    const data = await response.json();
                    if (data.success) {
                        this.refreshComments(data.html);
                    }
                } catch (error) {
                    console.error('Deletion failed', error);
                }
            },

            async updateComment(id, text) {
                try {
                    const response = await fetch(`/comments/${id}`, {
                        method: 'POST',
                        body: JSON.stringify({ text }),
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'X-Requested-With': 'XMLHttpRequest',
                            'X-HTTP-Method-Override': 'PATCH',
                            'Accept': 'application/json'
                        }
                    });

                    const data = await response.json();
                    if (data.success) {
                        this.refreshComments(data.html);
                    }
                } catch (error) {
                    console.error('Update failed', error);
                }
            },

            async flagComment(id) {
                if (!confirm('Are you sure you want to flag this comment as inappropriate?')) return;

                try {
                    const response = await fetch(`/comments/${id}/flag`, {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
                            'X-Requested-With': 'XMLHttpRequest',
                            'Accept': 'application/json'
                        }
                    });

                    const data = await response.json();
                    if (data.success) {
                        alert(data.message);
                    }
                } catch (error) {
                    console.error('Flagging failed', error);
                }
            }
        }
    }
</script>