@php
    $status = $comment->status ?? 'active';
    $badgeClass = $status === 'active' ? 'bg-success' : ($status === 'pending' ? 'bg-warning text-dark' : 'bg-secondary');

    // Check if current user can edit/delete this comment
    $canEdit = auth()->check() && (auth()->id() === $comment->user_id || auth()->user()->can('update', $post, $comment));
    $canDelete = auth()->check() && (auth()->id() === $comment->user_id || auth()->user()->can('delete', $post, $comment));
@endphp

<div class="comment-card mb-3" id="comment-{{ $comment->id }}" style="margin-left: {{ $marginLeft }}px; border-left: {{ $depth > 0 ? '2px solid #dee2e6' : 'none' }};">
    <div class="comment-header d-flex justify-content-between align-items-center">
        <div class="d-flex align-items-center">
            <img src="https://ui-avatars.com/api/?name={{ urlencode($comment?->user?->name) }}&background=0D8ABC&color=fff" class="user-avatar me-2"
                alt="{{ $comment?->user?->name }}" style="width: 32px; height: 32px; border-radius: 50%;">
            <div>
                <div class="d-flex align-items-center gap-2">
                    <h6 class="mb-0">{{ $comment?->user?->name }}</h6>

                    @if($comment->status  == 'draft' || $comment->status  == 'published')
                    <span class="badge rounded-pill 
                        @if($comment->status == 'approved') bg-success 
                        @elseif($comment->status == 'published') bg-warning
                        @else bg-dark @endif">
                        {{ ucfirst($comment->status == 'published' ? 'pending' : $comment->status) }}
                    </span>
                    @endif
                </div>
                <small class="comment-date text-muted">{{ $comment->created_at->diffForHumans() }}</small>
                @if($comment->updated_at != $comment->created_at)
                    <small class="text-muted">(edited {{ $comment->updated_at->diffForHumans() }})</small>
                @endif
            </div>
        </div>
        
        {{-- Comment Actions Dropdown --}}
        @if($canEdit || $canDelete)
        <div class="dropdown">
            <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button" 
                    data-bs-toggle="dropdown" aria-expanded="false">
                <i class="bi bi-three-dots"></i>
            </button>
            <ul class="dropdown-menu">
                @if($canEdit)
                <li>
                    <span class="dropdown-item edit-comment-btn" 
                            onclick="editCommentForm(event)"
                            data-comment-id="{{ $comment->id }}"
                            data-comment-content="{{ $comment->content }}"
                            data-comment-status="{{ $comment->status }}">
                        <i class="bi bi-pencil me-2"></i>{{ __('labels.edit') }}
                    </span>
                </li>
                @endif
                @if($canDelete)
                <li>
                    <span class="dropdown-item delete-comment-btn text-danger" 
                            onclick="deleteComment('{{ route('posts.comments.destroy', ['post' => $post->id, 'comment' => $comment->id]) }}')"
                            data-comment-id="{{ $comment->id }}">
                        <i class="bi bi-trash me-2"></i>{{ __('labels.delete') }}
                    </span>
                </li>
                @endif
            </ul>
        </div>
        @endif
    </div>

    {{-- Comment Content Display --}}
    <div class="comment-body mt-2" id="comment-content-{{ $comment->id }}">
        <p class="mb-0">{!! nl2br(e($comment->content)) !!}</p>
    </div>

    {{-- Edit Comment Form (Hidden by default) --}}
    <div class="edit-comment-form mt-3 d-none px-4" id="edit-form-{{ $comment->id }}">
        <form method="POST" action="{{ route('posts.comments.update', [$post->id, $comment->id]) }}" class="edit-comment-form-inner"
            onsubmit="submitCommentForm(event)"
            >
            @csrf
            @method('PUT')
            <div class="mb-2 char-count">
                <textarea class="form-control char-count-input" oninput="charCounter(event)" name="content" rows="3" maxlength="2000" required>{{ $comment->content }}</textarea>
                <div class="character-count mt-1">
                    <span class="editCharCounter char-counter" id="editCharCount-{{ $comment->id }}">{{ strlen($comment->content) }}</span>/2000 {{ __('labels.characters') }}
                </div>
            </div>

            <div class="mb-2">
                <label for="status" class="form-label">{{ __('labels.status') }}</label>
                <select class="form-select" id="status" name="status" required>
                    @foreach($commentStates as $status)
                        <option value="{{ $status }}" {{ $comment->status == $status ? 'selected' : '' }}>
                            {{ $status }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="d-flex justify-content-end gap-2">
                <button type="button" class="btn btn-sm btn-outline-secondary cancel-edit" data-comment-id="{{ $comment->id }}">{{ __('labels.cancel') }}</button>
                <button type="submit" class="btn btn-sm btn-primary">{{ __('labels.update') }}</button>
            </div>
        </form>
    </div>

    {{-- Reply Button --}}
    @auth

    @if($depth < 2)
        <div class="comment-actions mt-2">
            <span class="btn btn-sm btn-outline-primary reply-btn" onclick="replyCommentForm(event)" data-comment-id="{{ $comment->id }}">
                <i class="bi bi-reply me-1"></i>{{ __('labels.reply') }}
            </span>
        </div>
    @endif
    @endauth

    {{-- Reply Form --}}
    <div class="reply-form mt-3 d-none" id="replyForm-{{ $comment->id }}">
        <form method="POST" action="{{ route('posts.comments.store', $comment->post_id) }}" class="reply-comment-form" 
            onsubmit="submitCommentForm(event)">
            @csrf
            <input type="hidden" name="parent_id" value="{{ $comment->id }}">

            <div class="mb-2 char-count">
                <textarea class="form-control reply-input" oninput="charCounter(event)" name="content" rows="2" maxlength="2000" placeholder="{{ __('labels.write_reply_placeholder') }}" required></textarea>
                <div class="character-count mt-1">
                    <span class="char-count" id="replyCharCount-{{ $comment->id }}">0</span>/2000 {{ __('labels.characters') }}
                </div>
            </div>

            <div class="mb-3">
                <label for="status" class="form-label">{{ __('labels.status') }}</label>
                <select class="form-select" id="status" name="status" required>
                    @foreach($commentStates as $status)
                        <option value="{{ $status }}">
                            {{ $status }}
                        </option>
                    @endforeach
                </select>
            </div>

            <div class="d-flex justify-content-end">
                <button type="button" class="btn btn-sm btn-outline-secondary me-2 cancel-reply" onclick="cancelReplyComment(event)" data-comment-id="{{ $comment->id }}">{{ __('labels.cancel') }}</button>
                <button type="submit" class="btn btn-sm btn-primary">{{ __('labels.reply') }}</button>
            </div>
        </form>
    </div>

    {{-- Recursively render child comments --}}
    @if($comment->children && $comment->children->count() > 0)
        <div class="child-comments mt-3">
            @foreach($comment->children->sortBy('created_at') as $childComment)
                @include('pages.posts.templates.comments.comment',[
                    'comment' => $childComment,
                    'depth' => $depth + 1,
                    'marginLeft' => $marginLeft+10,
                ])
            @endforeach
        </div>
    @endif
</div>