@php
    $author = $post->author ?? null;
    $profile = $author?->nurseProfile ?? null;
    $location = trim(($profile?->city ? $profile->city . ', ' : '') . ($profile?->country ?? '')) ?: 'Location n/a';
    $specialty = $post->specialty_tag ?? $profile?->primary_specialty ?? 'User';
    $name = $author?->name ?? 'Unknown User';
    $initials = strtoupper(substr($name, 0, 2));
    $bioSnippet = $profile?->bio ? \Illuminate\Support\Str::limit(strip_tags($profile->bio), 120) : null;
    
    $userId = auth()->id();
    $isLiked = $userId ? $post->isLikedBy($userId) : false;
    $isDisliked = $userId ? $post->isDislikedBy($userId) : false;
    $isBookmarked = $userId ? $post->isBookmarkedBy($userId) : false;
    $isReposted = $userId ? $post->isRepostedBy($userId) : false;
@endphp

@php $adminModeration = $adminModeration ?? false; @endphp
<article id="post-{{ $post->id }}" data-post-id="{{ $post->id }}" class="bg-white rounded-md border border-gray-100 px-5 py-4 flex flex-col gap-3 text-sm transition">
    <div class="flex items-start gap-3">
        <a href="{{ $author ? route('nurse.connect.timeline.user', $author->id) : '#' }}" class="h-10 w-10 rounded-md bg-transparent border border-gray-200 text-slate-700 flex items-center justify-center text-xs font-semibold overflow-hidden flex-shrink-0 hover:bg-gray-50 transition">
            @if($author)
                <img src="{{ $author->displayAvatarUrl() }}" alt="{{ $name }}" class="h-full w-full object-cover" width="40" height="40" loading="lazy" decoding="async">
            @else
                {{ $initials }}
            @endif
        </a>
        <div class="min-w-0 flex-1">
            <div class="flex items-start justify-between gap-2">
                <a href="{{ $author ? route('nurse.connect.timeline.user', $author->id) : '#' }}" class="min-w-0 hover:opacity-80 transition">
                    <p class="text-[11px] font-semibold text-slate-600 truncate">{{ $specialty }}</p>
                    <h4 class="text-sm font-bold text-slate-900 leading-tight truncate">{{ $name }}</h4>
                    <p class="text-xs text-slate-600 flex items-center gap-1">
                        <span>{{ $location }}</span>
                        <span class="text-slate-400">&bull;</span>
                        <span class="font-semibold text-slate-700">{{ $profile?->years_experience ? $profile->years_experience . ' yrs' : 'Experience n/a' }}</span>
                    </p>
                </a>
                <div class="flex items-center gap-2">
                        @if($post->signal_score > 0)
                            <span class="text-xs font-semibold text-slate-600 px-2 py-0.5 bg-transparent rounded tracking-wide font-mono border border-gray-100" title="Engagement Score">
                            {{ number_format($post->signal_score, 0) }}
                        </span>
                    @endif
                    <span class="text-[11px] text-slate-500 whitespace-nowrap">{{ $post->created_at->diffForHumans() }}</span>
                </div>
            </div>
            @if($post->body)
                @php
                    $hasStyle = !empty($post->background_color) || !empty($post->text_color) || !empty($post->background_color_end);
                    $bodyStyle = 'padding: 0.75rem 1rem; border-radius: 0.5rem;';
                    if (!empty($post->background_color_end) && !empty($post->background_color)) {
                        $bodyStyle .= ' background: linear-gradient(135deg, ' . e($post->background_color) . ' 0%, ' . e($post->background_color_end) . ' 100%);';
                    } elseif (!empty($post->background_color)) {
                        $bodyStyle .= ' background-color: ' . e($post->background_color) . ';';
                    }
                    if (!empty($post->text_color)) {
                        $bodyStyle .= ' color: ' . e($post->text_color) . ';';
                    }
                    $stylePreset = $post->style_preset ?? '';
                @endphp
                <div class="mt-2 post-main-body {{ $hasStyle ? 'post-styled-body post-styled-169' : '' }}" @if($hasStyle) style="{{ $bodyStyle }}" @endif>
                    @if($hasStyle && in_array($stylePreset, ['quote','tip','milestone','professional']))
                        <div class="post-styled-icon post-styled-icon-{{ $stylePreset }}" aria-hidden="true">
                            @if($stylePreset === 'quote')<svg fill="currentColor" viewBox="0 0 24 24"><path d="M6 17h3l2-4V7H5v6h3l-2 4zm8 0h3l2-4V7h-6v6h3l-2 4z"/></svg>
                            @elseif($stylePreset === 'tip')<svg fill="currentColor" viewBox="0 0 24 24"><path d="M9 21c0 .55.45 1 1 1h4c.55 0 1-.45 1-1v-1H9v1zm3-19C8.14 2 5 5.14 5 9c0 2.38 1.19 4.47 3 5.74V17c0 .55.45 1 1 1h6c.55 0 1-.45 1-1v-2.26c1.81-1.27 3-3.36 3-5.74 0-3.86-3.14-7-7-7z"/></svg>
                            @elseif($stylePreset === 'milestone')<svg fill="currentColor" viewBox="0 0 24 24"><path d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>
                            @else<svg fill="currentColor" viewBox="0 0 24 24"><path d="M20 6h-4V4c0-1.11-.89-2-2-2h-4c-1.11 0-2 .89-2 2v2H4c-1.11 0-1.99.89-1.99 2L2 19c0 1.11.89 2 2 2h16c1.11 0 2-.89 2-2V8c0-1.11-.89-2-2-2zm-6 0h-4V4h4v2z"/></svg>
                            @endif
                        </div>
                    @endif
                    <p class="text-sm leading-relaxed line-clamp-3 {{ $hasStyle ? 'post-styled-text' : 'text-slate-700' }}">{{ $post->body }}</p>
                </div>
            @endif
            
            {{-- Quoted Post Preview --}}
            @if($post->quotedPost)
                @php
                    $quotedAuthor = $post->quotedPost->author ?? null;
                    $quotedProfile = $quotedAuthor?->nurseProfile ?? null;
                    $quotedName = $quotedAuthor?->name ?? 'Unknown User';
                    $quotedInitials = strtoupper(substr($quotedName, 0, 2));
                @endphp
                <div class="mt-2 border border-gray-100 rounded-md p-3 bg-gray-50">
                    <div class="flex items-start gap-2">
                        <div class="h-8 w-8 rounded-md bg-transparent border border-gray-200 text-slate-700 flex items-center justify-center text-xs font-semibold overflow-hidden flex-shrink-0">
                            @if($quotedAuthor)
                                <img src="{{ $quotedAuthor->displayAvatarUrl() }}" alt="{{ $quotedName }}" class="h-full w-full object-cover" width="32" height="32" loading="lazy" decoding="async">
                            @else
                                {{ $quotedInitials }}
                            @endif
                        </div>
                        <div class="min-w-0 flex-1">
                            <p class="text-xs font-bold text-[#2C3E50]">{{ $quotedName }}</p>
                            <p class="text-xs text-slate-600 line-clamp-3 post-body">{{ $post->quotedPost->body }}</p>
                        </div>
                    </div>
                </div>
            @endif
            
            @if($bioSnippet)
                    <p class="text-xs text-slate-500 line-clamp-2">{{ $bioSnippet }}</p>
            @endif
            @if($post->image_url)
                    <div class="mt-2">
                    <img src="{{ $post->image_url }}" alt="Post image" class="w-full rounded-md object-cover">
                </div>
            @endif
            <div class="mt-2 flex flex-wrap gap-1 items-center">
                @if($post->category)
                        <span class="px-2 py-1 rounded-md text-[11px] font-semibold text-gray-800" style="background-color: {{ $post->category->color }}; opacity: .95;">
                        {{ $post->category->icon }} {{ $post->category->name }}
                    </span>
                @endif
                @if($profile?->primary_specialty)
                    <span class="px-2 py-1 rounded-full bg-[#E8F4FF] text-[11px] font-semibold text-[#1D5BBF]">{{ $profile->primary_specialty }}</span>
                @endif
                @if($profile?->nclex_status)
                    <span class="px-2 py-1 rounded-full bg-teal/10 text-[11px] font-semibold text-teal-700">NCLEX: {{ ucfirst($profile->nclex_status) }}</span>
                @endif
            </div>
            @if(!$adminModeration)
                <div class="flex items-center gap-4 mt-3 pt-2 border-t border-gray-100 text-[11px] text-slate-600">
                    <button onclick="toggleLike({{ $post->id }}, this)" 
                        class="post-action-btn flex items-center gap-1 hover:text-red-600 transition {{ $isLiked ? 'text-red-600' : 'text-slate-600' }} px-2 py-1"
                        data-liked="{{ $isLiked ? 'true' : 'false' }}">
                        <svg class="h-4 w-4" fill="{{ $isLiked ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4.318 6.318a4.5 4.5 0 000 6.364L12 20.364l7.682-7.682a4.5 4.5 0 00-6.364-6.364L12 7.636l-1.318-1.318a4.5 4.5 0 00-6.364 0z"/>
                        </svg>
                        <span class="like-count">{{ $post->likes_count ?? 0 }}</span>
                    </button>
                    <button onclick="togglePostDislike({{ $post->id }}, this)" 
                        class="post-action-btn flex items-center gap-1 hover:text-slate-700 transition {{ $isDisliked ? 'text-slate-700 font-semibold' : 'text-slate-600' }} px-2 py-1"
                        data-disliked="{{ $isDisliked ? 'true' : 'false' }}">
                        <svg class="h-4 w-4" fill="{{ $isDisliked ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"/>
                        </svg>
                        <span class="dislike-count">{{ $post->dislikes_count ?? 0 }}</span>
                    </button>
                    <button onclick="toggleCommentForm({{ $post->id }})" 
                        class="flex items-center gap-1 hover:text-slate-800 transition text-slate-600 px-2 py-1">
                        <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"/>
                        </svg>
                        <span class="comment-count">{{ $post->comments_count ?? 0 }}</span>
                    </button>
                    <div class="relative repost-wrapper">
                                <button onclick="toggleRepostMenu({{ $post->id }}, event)" 
                                    class="post-action-btn flex items-center gap-1 hover:text-slate-800 transition {{ $isReposted ? 'text-slate-800' : 'text-slate-600' }} px-2 py-1"
                                data-reposted="{{ $isReposted ? 'true' : 'false' }}">
                            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                            </svg>
                            <span class="repost-count">{{ $post->reposts_count ?? 0 }}</span>
                        </button>
                        <div id="repost-menu-{{ $post->id }}" class="repost-menu" style="display: none;">
                            <button onclick="handleRepost({{ $post->id }}, 'repost', event)" class="repost-menu-item">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"/>
                                </svg>
                                <span>{{ $isReposted ? 'Undo Repost' : 'Repost' }}</span>
                            </button>
                            <button onclick="handleRepost({{ $post->id }}, 'quote', event)" class="repost-menu-item">
                                <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" 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>
                                <span>Quote</span>
                            </button>
                        </div>
                    </div>
                    <button onclick="toggleBookmark({{ $post->id }}, this)" 
                        class="post-action-btn flex items-center gap-1 ml-auto hover:text-slate-800 transition {{ $isBookmarked ? 'text-slate-800' : 'text-slate-600' }} px-2 py-1"
                            data-bookmarked="{{ $isBookmarked ? 'true' : 'false' }}">
                        <svg class="h-4 w-4" fill="{{ $isBookmarked ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M5 5a2 2 0 012-2h10a2 2 0 012 2v16l-7-3.5L5 21V5z"/>
                        </svg>
                    </button>
                </div>
            @else
                <div class="mt-3 pt-2 border-t border-gray-100 text-xs text-slate-600">
                    <p class="font-semibold text-slate-800">Admin moderation view</p>
                    <p>Use the controls below the card to hide or delete this post.</p>
                </div>
            @endif
            
            {{-- Comment Form (hidden by default) --}}
            @unless($adminModeration)
            <div id="comment-form-{{ $post->id }}" class="mt-3 pt-3 border-t border-slate-100" style="display: none;">
                @auth
                <form onsubmit="submitComment(event, {{ $post->id }})" class="flex gap-2">
                    @csrf
                    <input type="text" 
                           name="body" 
                           placeholder="Write a comment..." 
                           required
                           class="flex-1 px-3 py-2 text-xs border border-slate-200 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500">
                    <button type="submit" class="admin-btn admin-btn-primary text-xs font-semibold rounded-md">
                        Post
                    </button>
                </form>
                @else
                <div class="text-xs text-slate-600 py-2">
                    <a href="{{ route('login') }}" class="text-blue-600 hover:underline">Log in</a> to comment
                </div>
                @endauth
                <div id="comments-{{ $post->id }}" class="mt-3 space-y-3">
                    @foreach($post->comments()->with(['user', 'reactions', 'replies.user'])->withCount(['likes', 'dislikes'])->latest()->take(3)->get() as $comment)
                        <div class="text-xs space-y-1">
                            <div class="flex gap-2">
                                <div class="font-semibold text-blue-600">{{ $comment->user->name }}</div>
                                <div class="text-slate-700">{{ $comment->body }}</div>
                            </div>
                            
                            @auth
                            <div class="flex items-center gap-3 ml-2">
                                <button 
                                    onclick="toggleCommentLike({{ $comment->id }})" 
                                    id="like-btn-{{ $comment->id }}"
                                    class="flex items-center gap-1 text-slate-500 hover:text-blue-600 transition {{ $comment->isLikedBy(auth()->id()) ? 'text-blue-600 font-semibold' : '' }}">
                                    <svg class="w-3 h-3" fill="{{ $comment->isLikedBy(auth()->id()) ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21h-4.017c-.163 0-.326-.02-.485-.06L7 20m7-10V5a2 2 0 00-2-2h-.095c-.5 0-.905.405-.905.905 0 .714-.211 1.412-.608 2.006L7 11v9m7-10h-2M7 20H5a2 2 0 01-2-2v-6a2 2 0 012-2h2.5"></path>
                                    </svg>
                                    <span id="like-count-{{ $comment->id }}">{{ $comment->likes_count }}</span>
                                </button>
                                
                                <button 
                                    onclick="toggleCommentDislike({{ $comment->id }})" 
                                    id="dislike-btn-{{ $comment->id }}"
                                    class="flex items-center gap-1 text-slate-500 hover:text-red-600 transition {{ $comment->isDislikedBy(auth()->id()) ? 'text-red-600 font-semibold' : '' }}">
                                    <svg class="w-3 h-3" fill="{{ $comment->isDislikedBy(auth()->id()) ? 'currentColor' : 'none' }}" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 14H5.236a2 2 0 01-1.789-2.894l3.5-7A2 2 0 018.736 3h4.018a2 2 0 01.485.06l3.76.94m-7 10v5a2 2 0 002 2h.096c.5 0 .905-.405.905-.904 0-.715.211-1.413.608-2.008L17 13V4m-7 10h2m5-10h2a2 2 0 012 2v6a2 2 0 01-2 2h-2.5"></path>
                                    </svg>
                                    <span id="dislike-count-{{ $comment->id }}">{{ $comment->dislikes_count }}</span>
                                </button>
                                
                                <button 
                                    onclick="toggleReplyForm({{ $comment->id }})" 
                                    class="flex items-center gap-1 text-slate-500 hover:text-blue-600 transition">
                                    <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 10h10a8 8 0 018 8v2M3 10l6 6m-6-6l6-6"></path>
                                    </svg>
                                    <span>Reply</span>
                                </button>
                            </div>
                            
                            <form id="reply-form-{{ $comment->id }}" onsubmit="submitReply(event, {{ $comment->id }})" class="ml-4 mt-2" style="display: none;">
                                @csrf
                                <div class="flex gap-2">
                                    <textarea name="body" 
                                             placeholder="Write a reply..." 
                                             rows="2"
                                             required
                                             class="flex-1 px-3 py-2 text-xs border border-slate-200 rounded-lg focus:ring-1 focus:ring-blue-500 focus:border-blue-500"></textarea>
                                    <button type="submit" class="px-3 py-1 bg-blue-600 text-white text-xs font-semibold rounded-lg hover:bg-blue-700 transition self-start">
                                        Reply
                                    </button>
                                </div>
                            </form>
                            @endauth
                            
                            {{-- Display replies (visible to everyone) --}}
                            <div id="replies-{{ $comment->id }}" class="ml-6 mt-2 space-y-2">
                                @foreach($comment->replies as $reply)
                                    <div class="flex gap-2 text-xs bg-slate-50 p-2 rounded">
                                        <div class="font-semibold text-blue-600">{{ $reply->user->name }}</div>
                                        <div class="text-slate-700">{{ $reply->body }}</div>
                                    </div>
                                @endforeach
                            </div>
                        </div>
                    @endforeach
                </div>
            </div>
            @endunless
        </div>
    </div>
</article>