@props(['comment', 'depth' => 0])

<div class="relative {{ $depth > 0 ? 'ml-8 mt-4 border-l-2 border-pink-600 pl-8' : '' }}" x-data="{ isReplying: false, replyText: '', isEditing: false, editText: @js($comment->text) }">
    <div class="glass-panel p-6 transition hover:border-white/20 relative group">
        @if($comment->deleted)
            <div class="flex items-center gap-3 text-gray-500 italic py-2">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                </svg>
                This comment has been deleted.
            </div>
        @else
            <div class="flex items-start justify-between mb-4">
                <div>
                    <div class="text-sm font-bold text-white">{{ $comment->user->first_name ?? 'Anonymous' }} {{ $comment->user->last_name ?? '' }}</div>
                    <div class="text-xs text-gray-500">{{ $comment->created_at->diffForHumans() }}</div>
                </div>

                <div class="flex items-center gap-2 opacity-0 group-hover:opacity-100 transition">
                    @can('update', $comment)
                        <button @click="isEditing = !isEditing" class="p-2 hover:bg-white/5 text-gray-400 hover:text-white transition">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
                            </svg>
                        </button>
                    @endcan
                    @can('delete', $comment)
                        <button @click="deleteComment({{ $comment->id }})" class="p-2 hover:bg-white/5 text-gray-400 hover:text-pink-500 transition">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
                            </svg>
                        </button>
                    @endcan
                </div>
            </div>

            <div x-show="!isEditing" class="text-gray-300 leading-relaxed whitespace-pre-wrap">{{ $comment->text }}</div>
            
            @can('update', $comment)
                <div x-show="isEditing" class="mt-4 space-y-3">
                    <textarea x-model="editText" class="w-full bg-white/5 border-white/20 focus:border-pink-500 text-white text-sm" rows="3"></textarea>
                    <div class="flex justify-end gap-2">
                        <button @click="isEditing = false" class="text-xs font-bold text-gray-500 hover:text-white transition">Cancel</button>
                        <button @click="updateComment({{ $comment->id }}, editText); isEditing = false" class="text-xs font-bold text-pink-500 hover:text-pink-400 transition">Save Changes</button>
                    </div>
                </div>
            @endcan

            @if($comment->resources->count() > 0)
                @php
                    $commentRotations = ['-rotate-1', 'rotate-[1.5deg]', '-rotate-[1.5deg]', 'rotate-1'];
                @endphp
                <div class="flex flex-wrap gap-4 mt-5 py-2">
                    @foreach($comment->resources as $index => $image)
                        @php
                            $commentImgUrl = $image->file ? Storage::url($image->file) : $image->thumbnail(1200, 1200);
                            $commentUserName = $comment->user ? $comment->user->name : 'Anonymous';
                        @endphp
                        <a href="{{ $commentImgUrl }}"
                           @click.prevent="typeof openLightbox === 'function' ? openLightbox($el) : $dispatch('open-comment-lightbox', $el)"
                           data-comment-image="{{ $commentImgUrl }}"
                           data-comment-user="{{ $commentUserName }}"
                           class="w-28 h-28 sm:w-36 sm:h-36 aspect-square relative overflow-hidden bg-[#1e1e1e] border border-white/20 shadow-[0_10px_30px_rgba(0,0,0,0.6)] transform {{ $commentRotations[$index % count($commentRotations)] }} hover:border-pink-500/40 hover:shadow-[0_15px_35px_rgba(0,0,0,0.8)] hover:z-20 transition-all duration-300 cursor-pointer group/comment-img flex-shrink-0">
                            <img src="{{ $image->thumbnail(600, 600) }}"
                                 loading="lazy"
                                 class="w-full h-full object-cover group-hover/comment-img:scale-110 transition duration-700 pointer-events-none select-none"
                                 alt="Comment image {{ $index + 1 }}">
                        </a>
                    @endforeach
                </div>
            @endif

            <div class="mt-6 flex items-center gap-4">
                @auth
                    <button @click="isReplying = !isReplying" class="text-xs font-bold uppercase tracking-wider text-gray-500 hover:text-pink-500 transition flex items-center gap-1.5">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6" />
                        </svg>
                        Reply
                    </button>
                    
                    <button @click="flagComment({{ $comment->id }})" class="text-xs font-bold uppercase tracking-wider text-gray-500 hover:text-red-500 transition flex items-center gap-1.5">
                        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 21v-4m0 0V5a2 2 0 012-2h6.5l1 1H21l-3 6 3 6h-8.5l-1-1H5a2 2 0 00-2 2zm9-13.5V9" />
                        </svg>
                        Flag
                    </button>
                @endauth
            </div>

            <div x-show="isReplying" 
                 x-transition:enter="transition ease-out duration-200"
                 x-transition:enter-start="opacity-0 transform -translate-y-2"
                 x-transition:enter-end="opacity-100 transform translate-y-0"
                 class="mt-4">
                <div class="flex gap-4">
                    <div class="flex-1">
                        <textarea 
                            x-model="replyText" 
                            class="w-full bg-white/5 border-white/20 focus:border-pink-500 text-white text-sm" 
                            rows="2" 
                            placeholder="Write a reply..."></textarea>
                        <div class="flex justify-end gap-3 mt-2">
                            <button @click="isReplying = false" class="text-xs font-bold text-gray-500 hover:text-white transition">Cancel</button>
                            <button 
                                @click="postComment(replyText, {{ $comment->id }}); isReplying = false; replyText = '';"
                                :disabled="!replyText.trim()"
                                class="text-xs font-bold text-pink-500 hover:text-pink-400 transition disabled:opacity-50">Post Reply</button>
                        </div>
                    </div>
                </div>
            </div>
        @endif
    </div>

    @foreach($comment->replies as $reply)
        <x-comment-item :comment="$reply" :depth="$depth + 1" />
    @endforeach
</div>