@php
    $status = $comment->status ?? 'active';
    $badgeClass = $status === 'active' ? 'bg-success' : ($status === 'pending' ? 'bg-warning text-dark' : 'bg-secondary');
    $canEdit = auth()->check() && (auth()->id() === $comment->user_id || Gate::allows('manage-comment', [$comment, $comment->commentable]));
    $canDelete = auth()->check() && (auth()->id() === $comment->user_id || Gate::allows('manage-comment', [$comment, $comment->commentable]));
@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 justify-content-between">
            <div class="d-flex align-items-center">
                @php
                    $commentUser = $comment?->user;
                @endphp

                @if(!empty($commentUser?->profile_image))
                    <img src="{{ $commentUser->profile_image }}" 
                        class="user-avatar me-2"
                        alt="{{ $commentUser->name }}" 
                        style="width: 32px; height: 32px; border-radius: 50%; object-fit: cover;">
                @else
                    <img src="https://ui-avatars.com/api/?name={{ urlencode($commentUser?->name) }}&background=0D8ABC&color=fff" 
                        class="user-avatar me-2"
                        alt="{{ $commentUser?->name }}" 
                        style="width: 32px; height: 32px; border-radius: 50%;">
                @endif

                <div>
                    <div class="d-flex align-items-center gap-2">
                        <h6 class="mb-0">{{ $commentUser?->name }}</h6>
                    </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>

            @if($commentUser->id != auth()->id())
                <div class="d-flex align-items-center gap-1 ps-3">
                    {{-- View profile --}}
                    @can('view', $commentUser)
                        <a href="{{ route('users.show', $commentUser->id) }}"
                        class="btn btn-sm btn-outline-primary"
                        target="_blank"
                        data-bs-toggle="tooltip"
                        title="{{ __('labels.view_user_profile') }}">
                            <i class="fas fa-user"></i>
                        </a>
                    @endcan

                    {{-- Direct chat: go to chats index and let frontend open/create chat --}}
                    <a href="{{ route('chats.index', ['user' => $commentUser->id]) }}"
                       class="btn btn-sm btn-outline-success"
                       target="_blank"
                       data-user-id="{{ $commentUser->id }}"
                       data-bs-toggle="tooltip"
                       title="{{ __('labels.start_chat') }}">
                        <i class="fas fa-comments"></i>
                    </a>
                </div>
            @endif
        </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 }}"
                            data-commentable-id="{{ $commentableId }}"
                            data-commentable-type="{{ $commentableType }}">
                        <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('comments.destroy', ['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('comments.update', $comment->id) }}" 
              class="edit-comment-form-inner"
              onsubmit="submitCommentForm(event, '{{ $commentableType }}')">
            @csrf
            @method('PUT')
            <input type="hidden" name="commentable_id" value="{{ $commentableId }}">
            <input type="hidden" name="commentable_type" value="{{ $commentableType }}">
            
            <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 < 1)
        <div class="comment-actions mt-2">
            <span class="btn btn-sm btn-outline-primary reply-btn" 
                  onclick="replyCommentForm(event)" 
                  data-comment-id="{{ $comment->id }}"
                  data-commentable-id="{{ $commentableId }}"
                  data-commentable-type="{{ $commentableType }}">
                <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('comments.store') }}" 
              class="reply-comment-form" 
              onsubmit="submitCommentForm(event, '{{ $commentableType }}')">
            @csrf
            <input type="hidden" name="parent_id" value="{{ $comment->id }}">
            <input type="hidden" name="commentable_id" value="{{ $commentableId }}">
            <input type="hidden" name="commentable_type" value="{{ $commentableType }}">
            
            <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->childrenRecursiveVisible && $comment->childrenRecursiveVisible->count() > 0)
        <div class="child-comments mt-3">
            @foreach($comment->childrenRecursiveVisible->sortBy('created_at') as $childComment)
                @include('components.comments.comment',[
                    'comment' => $childComment,
                    'depth' => $depth + 1,
                    'marginLeft' => $marginLeft+10,
                    'commentStates' => $commentStates,
                    'commentableId' => $commentableId,
                    'commentableType' => $commentableType
                ])
            @endforeach
        </div>
    @endif --}}
    @if($comment->children && $comment->children->count() > 0)
        <div class="child-comments mt-3">
            @foreach($comment->children->sortBy('created_at') as $childComment)
                @include('components.comments.comment',[
                    'comment' => $childComment,
                    'depth' => $depth + 1,
                    'marginLeft' => $marginLeft+10,
                    'commentStates' => $commentStates,
                    'commentableId' => $commentableId,
                    'commentableType' => $commentableType
                ])
            @endforeach
        </div>
    @endif
</div>