@php 
$isOwn = auth()->check() && ((int) ($comment->user_id ?? 0) === (int) auth()->id());
$isTopLevel = empty($comment->parent_id);
$alignClass = $isTopLevel ? 'flex justify-start' : ($isOwn ? 'flex justify-end' : 'flex justify-start');
$bubbleClass = $isTopLevel 
    ? 'bg-gray-50 text-gray-900 border border-gray-200' 
    : ($isOwn ? 'bg-indigo-50 text-indigo-900 border border-indigo-200' : 'bg-gray-50 text-gray-900 border border-gray-200');
$timeClass = str_contains($bubbleClass, 'bg-indigo-50') ? 'text-indigo-700' : 'text-gray-600';
@endphp
<div class="{{ $alignClass }}">
  <div class="w-full rounded-2xl px-4 py-2 shadow-sm relative {{ $bubbleClass }}">
    <div class="flex items-center justify-between gap-3">
      <div class="text-xs {{ $timeClass }}">{{ $comment->created_at?->diffForHumans() }}</div>
    </div>
    <button type="button" class="js-reply-toggle absolute top-2 right-3 text-xs {{ str_contains($bubbleClass, 'bg-indigo-50') ? 'text-indigo-700' : 'text-indigo-600' }}">Balas</button>
    <div class="text-sm {{ str_contains($bubbleClass, 'bg-indigo-50') ? 'font-medium text-indigo-900' : 'font-semibold text-gray-900' }}">{{ $comment->user->name ?? 'Pengguna' }}</div>
    <div class="mt-1 {{ str_contains($bubbleClass, 'bg-indigo-50') ? 'text-indigo-900' : 'text-gray-900' }} text-sm">{{ strip_tags($comment->body ?? '') }}</div>

    @auth
    <div class="mt-2 reply-area hidden">
      <form action="{{ route('activity.comments.store', $activity) }}" method="POST" class="mt-2 js-reply-form">
        @csrf
        <input type="hidden" name="parent_id" value="{{ $comment->id }}">
        <textarea name="body" class="w-full border rounded-md px-3 py-2 bg-white text-gray-900 placeholder-gray-600" rows="2" placeholder="Tulis balasan..." required></textarea>
        <button type="submit" class="mt-2 inline-flex items-center px-3 py-1.5 rounded bg-indigo-600 text-white text-xs">Kirim Balasan</button>
      </form>
    </div>
    @endauth
    @php $replyCount = $comment->children->count(); @endphp
    @if($replyCount > 0)
      <div class="mt-2">
        <button type="button" class="js-replies-toggle text-xs {{ str_contains($bubbleClass, 'bg-indigo-50') ? 'text-indigo-700' : 'text-indigo-600' }}" data-open-text="Tampilkan {{ $replyCount }} balasan" data-close-text="Tutup balasan">Tampilkan {{ $replyCount }} balasan</button>
      </div>
    @endif
    @if($comment->children && $comment->children->count())
      <div class="mt-2 space-y-2 replies-area hidden">
        @foreach($comment->children as $child)
          @include('partials.activity_comment_item', ['comment' => $child, 'activity' => $activity])
        @endforeach
      </div>
    @endif
  </div>
</div>