@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('delete-comment', [$comment, $comment->commentable]));
$canDelete =
    auth()->check() &&
    (auth()->id() === $comment->user_id || Gate::allows('delete-comment', [$comment, $comment->commentable]));
$canVote = auth()->check() && auth()->id() !== $comment->user_id;
$userVote = auth()->check()
    ? $comment
        ->votes()
        ->where('user_id', auth()->id())
        ->first()
    : null;

$canReply = Gate::allows('reply-comment', [$comment, $comment->commentable]);

// Background color for unapproved comments
$bgClass = $comment->is_approved ? '' : 'bg-light-subtle';
$isAnswer = $comment->is_answer ?? false;
$totalScore = ($comment->upvote_count ?? 0) - ($comment->downvote_count ?? 0);

// Determine score badge color
$scoreBadgeClass = 'bg-secondary';
if ($totalScore > 0) {
    $scoreBadgeClass = 'bg-success';
} elseif ($totalScore < 0) {
    $scoreBadgeClass = 'bg-danger';
}

// Check if user can perform admin actions
$isAdminOrModerator = Gate::allows('admin-action', $comment);
$isThreadOwner =
    auth()->check() &&
    auth()
        ->user()
        ->can('markAnswer', [$comment->commentable, $comment]);

// Comment border based on status

@endphp
@push('css')
@endpush

<div id="comment-{{ $comment->id }}" style="margin-left: {{ $marginLeft }}px;" @class([
    'comment-card mb-3 position-relative rounded shadow-sm',
    $bgClass, // Assumes $bgClass holds a string, e.g., 'bg-white'
    'border-pending-approval' =>
        (isset($isDisabled) && $isDisabled) ||
        (!(isset($isChangeStatusDisabled) && $isChangeStatusDisabled) &&
            !$comment->is_approved),
    'border-best-answer' => (!(isset($isMarkAsAnswerDisabled) && $isMarkAsAnswerDisabled) && $comment->is_answer),
])>

    {{-- Status Badges in Top Right --}}
    <div class="position-absolute top-0 end-0 mt-2 me-2 d-flex flex-column gap-1">
        @if (!(isset($isMarkAsAnswerDisabled) && $isMarkAsAnswerDisabled) && $isAnswer)
            <span class="badge bg-success d-flex align-items-center shadow-sm">
                <i class="fas fa-trophy me-1"></i>{{ __('labels.best_answer') }}
            </span>
        @endif

        @if (!(isset($isChangeStatusDisabled) && $isChangeStatusDisabled) && $comment->is_approved && !$isAnswer)
            <span class="badge bg-success-subtle text-success-emphasis border border-success d-flex align-items-center">
                <i class="fas fa-check me-1"></i>{{ __('labels.approved') }}
            </span>
        @endif
    </div>

    {{-- Pending Approval Badge in Top Left --}}
    @if (!(isset($isChangeStatusDisabled) && $isChangeStatusDisabled) && !$comment->is_approved)
        <div class="position-absolute top-0 start-0 mt-2 ms-2">
            {{-- <span class="badge bg-warning-subtle text-warning-emphasis border border-warning d-flex align-items-center"> --}}
            <span class="badge bg-warning text-dark">
                <i class="fas fa-clock me-1"></i>{{ __('labels.pending') }}
            </span>
        </div>
    @endif

    {{-- Comment Header --}}

    <div
        class="comment-header p-3 {{ 
        !(isset($isMarkAsAnswerDisabled) && $isMarkAsAnswerDisabled) && $isAnswer ? 'bg-success-subtle' :
    (!(isset($isChangeStatusDisabled) && $isChangeStatusDisabled) && !$comment->is_approved ? 'bg-warning-subtle' : '') }}">
        <div class="d-flex align-items-center">
            @php
$commentUser = $comment?->user;
            @endphp
            {{-- <div class="position-relative me-3"> --}}
            <div class="me-3">
                {{-- <img src="https://ui-avatars.com/api/?name={{ urlencode($comment?->user?->name) }}&background=0D8ABC&color=fff"
                    class="user-avatar rounded-circle border border-2 border-white shadow-sm"
                    alt="{{ $comment?->user?->name }}" style="width: 45px; height: 45px;"> --}}

                @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

                

                @if (!(isset($isMarkAsAnswerDisabled) && $isMarkAsAnswerDisabled) && $isAnswer)
                    <span class="position-absolute bottom-0 end-0 bg-success text-white rounded-circle p-1"
                        style="width: 18px; height: 18px; font-size: 10px;">
                        <i class="fas fa-check"></i>
                    </span>
                @endif
            </div>
            <div class="flex-grow-1">
                <div class="d-flex justify-content-between align-items-start">
                    {{-- <div>
                        <h6 class="mb-0 fw-semibold">{{ $commentUser?->name }}</h6>
                        <small class="text-muted">
                            <i class="fas fa-clock me-1"></i>{{ $comment->created_at->diffForHumans() }}
                            @if ($comment->updated_at != $comment->created_at)
                                <span class="ms-2">
                                    <i class="fas fa-edit me-1"></i>{{ __('labels.edited') }}
                                </span>
                            @endif
                        </small>
                    </div> --}}

                <div class="d-flex align-items-center gap-1 ps-3">
                    <div>
                        <h6 class="mb-0 fw-semibold">{{ $commentUser?->name }}</h6>
                        <small class="text-muted">
                            <i class="fas fa-clock me-1"></i>{{ $comment->created_at->diffForHumans() }}
                            @if ($comment->updated_at != $comment->created_at)
                                <span class="ms-2">
                                    <i class="fas fa-edit me-1"></i>{{ __('labels.edited') }}
                                </span>
                            @endif
                        </small>
                    </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>


           

                    {{-- Quick Actions for Admin/Thread Owner --}}
                    <div class="d-flex gap-2">
                        @if ($isAdminOrModerator)
                            {{-- Mark as Answer (Thread Owner) --}}

                            @if (!(isset($isMarkAsAnswerDisabled) && $isMarkAsAnswerDisabled))
                                @if (
                                    $comment->is_approved &&
                                    !$isAnswer
                                )
                                    <button class="btn btn-sm btn-outline-primary mark-answer-btn"
                                        onclick="markAsAnswer('{{ $comment->id }}')"
                                        title="{{ __('labels.mark_as_answer') }}">
                                        <i class="fas fa-check-circle"></i>
                                        <span class="d-none d-sm-inline ms-1">{{ __('labels.mark_answer') }}</span>
                                    </button>
                                @elseif(
                                    $comment->is_approved &&
                                    $isAnswer
                                )
                                    <button class="btn btn-sm btn-outline-danger unmark-answer-btn"
                                        onclick="unmarkAsAnswer('{{ $comment->id }}')"
                                        title="{{ __('labels.remove_as_answer') }}">
                                        <i class="fas fa-times-circle"></i>
                                        <span class="d-none d-sm-inline ms-1">{{ __('labels.unmark') }}</span>
                                    </button>
                                @endif
                            @endif

                            {{-- Approval Controls (Admin) --}}

                            @if (!(isset($isChangeStatusDisabled) && $isChangeStatusDisabled))
                                @if (!$comment->is_approved)
                                    <button class="btn btn-sm btn-success approve-btn"
                                        onclick="toggleCommentApproval('{{ $comment->id }}', 'approve')"
                                        title="{{ __('labels.approve_comment') }}">
                                        <i class="fas fa-check"></i>
                                        <span class="d-none d-sm-inline ms-1">{{ __('labels.approve') }}</span>
                                    </button>
                                @else
                                    <button class="btn btn-sm btn-warning unapprove-btn"
                                        onclick="toggleCommentApproval('{{ $comment->id }}', 'unapprove')"
                                        title="{{ __('labels.unapprove_comment') }}">
                                        <i class="fas fa-ban"></i>
                                        <span class="d-none d-sm-inline ms-1">{{ __('labels.unapprove') }}</span>
                                    </button>
                                @endif
                            @endif
                        @endif
                    </div>
                </div>
            </div>
        </div>
    </div>

    {{-- Comment Body --}}
    <div class="comment-body p-4">
        <div class="d-flex align-items-start gap-3">
            {{-- Voting Section (Left Side) --}}
            <div class="voting-section d-flex flex-column align-items-center">
                @if (isset($isDisabled) && $isDisabled)
                    <div class="text-center">
                        <i class="fas fa-lock text-warning fa-lg mb-2"></i>
                        <div class="small text-muted">{{ $disabledMessage ?? 'Locked' }}</div>
                    </div>
                @elseif(!(isset($isVotingDisabled) && $isVotingDisabled) && $canVote && $comment->is_approved)
                    <button
                        class="upvote-btn btn btn-sm vote-btn mb-1 {{ $userVote && $userVote->type === 'upvote' ? 'active btn-success text-white' : 'btn-outline-success' }}"
                        onclick="voteComment('{{ $comment->id }}', 'upvote')" data-comment-id="{{ $comment->id }}"
                        data-vote-type="upvote" data-action="vote-button" title="{{ __('labels.upvote') }}">
                        <i class="fas fa-chevron-up"></i>
                    </button>

                    <span data-role="vote-counter" data-counter-type="inline" data-comment-id="{{ $comment->id }}"
                        class="total-score fw-bold fs-5 {{ $totalScore > 0 ? 'text-success' : ($totalScore < 0 ? 'text-danger' : 'text-muted') }}">
                        {{ $totalScore }}
                    </span>

                    <button
                        class="downvote-btn btn btn-sm vote-btn mt-1 {{ $userVote && $userVote->type === 'downvote' ? 'active btn-danger text-white' : 'btn-outline-danger' }}"
                        onclick="voteComment('{{ $comment->id }}', 'downvote')" data-comment-id="{{ $comment->id }}"
                        data-vote-type="downvote" data-action="vote-button" title="{{ __('labels.downvote') }}">
                        <i class="fas fa-chevron-down"></i>
                    </button>
                @elseif(!(isset($isChangeStatusDisabled) && $isChangeStatusDisabled) && !$comment->is_approved)
                    <div class="text-center">
                        <i class="fas fa-lock text-warning fa-lg mb-2"></i>
                        <div class="small text-muted">{{ __('labels.awaiting_approval') }}</div>
                    </div>
                @elseif(!(isset($isVotingDisabled) && $isVotingDisabled))
                    <div class="text-center">
                        <span data-comment-id="{{ $comment->id }}" data-role="vote-counter" data-counter-type="inline"
                            class="total-score fw-bold fs-5 {{ $totalScore > 0 ? 'text-success' : ($totalScore < 0 ? 'text-danger' : 'text-muted') }}">
                            {{ $totalScore }}
                        </span>
                        <div class="small text-muted">{{ __('labels.votes') }}</div>
                    </div>
                @endif

            </div>

            {{-- Comment Content --}}
            <div class="flex-grow-1" id="comment-content-{{ $comment->id }}">
                <div class="comment-text">
                    {!! nl2br(e($comment->content)) !!}
                </div>

                {{-- Stats Bar --}}
                @if (!(isset($isVotingDisabled) && $isVotingDisabled))
                <div class="d-flex align-items-center gap-3 mt-3 pt-3 border-top small text-muted">
                    <span data-role="upvote-counter" data-comment-id="{{ $comment->id }}" class="vote-count-display">
                        <i class="fas fa-thumbs-up me-1 text-success"></i>
                        <span class="count-value">{{ $comment->upvote_count ?? 0 }}</span>
                    </span>
                    <span data-role="downvote-counter" data-comment-id="{{ $comment->id }}"
                        class="vote-count-display">
                        <i class="fas fa-thumbs-down me-1 text-danger"></i>
                        <span class="count-value">{{ $comment->downvote_count ?? 0 }}</span>
                    </span>
                    {{-- <span class="me-3">
                        <i class="fas fa-eye me-1"></i>
                        <span class="views-count">{{ $comment->views_count ?? 0 }}</span>
                    </span> --}}
                </div>
                @endif
            </div>
        </div>
    </div>

    {{-- Action Bar --}}
    <div class="comment-actions p-3 border-top bg-light-subtle">
        <div class="d-flex justify-content-between align-items-center">
            {{-- Left: User Actions --}}
            <div class="d-flex gap-2">
                {{-- Reply Button --}}
                @auth
                    @if ($depth < 1 && $comment->is_approved)
                        @if (isset($isDisabled) && $isDisabled)
                            <button class="btn btn-secondary btn-sm" disabled>
                                <i class="fas fa-reply me-1"></i>{{ __('labels.reply') }}
                                <small class="ms-1">({{ $disabledMessage ?? 'Locked' }})</small>
                            </button>
                        @elseif($canReply)
                            <button class="btn btn-sm btn-outline-primary reply-btn d-flex align-items-center"
                                onclick="replyCommentForm(event)" data-comment-id="{{ $comment->id }}"
                                data-commentable-id="{{ $commentableId }}"
                                data-commentable-type="{{ $commentableType }}">
                                <i class="fas fa-reply me-1"></i>{{ __('labels.reply') }}
                            </button>
                        @endif
                    @endif
                @endauth

                {{-- Edit Button --}}
                @if (Gate::allows('edit-comment', $comment))
                    <button class="btn btn-sm btn-outline-secondary edit-comment-btn d-flex align-items-center"
                        onclick="editCommentForm(event)" data-comment-id="{{ $comment->id }}"
                        data-comment-content="{{ $comment->content }}" data-commentable-id="{{ $commentableId }}"
                        data-commentable-type="{{ $commentableType }}">
                        <i class="fas fa-edit me-1"></i>{{ __('labels.edit') }}
                    </button>
                @endif
            </div>

            {{-- Right: Admin/Menu Actions --}}
            <div class="d-flex align-items-center gap-2">
                {{-- Score Display --}}
                @if (!(isset($isVotingDisabled) && $isVotingDisabled) && $comment->is_approved)
                    <div class="score-display me-2">
                        <span data-role="vote-counter" data-counter-type="badge"
                            data-comment-id="{{ $comment->id }}" class="badge {{ $scoreBadgeClass }} px-3 py-2">
                            <i class="fas fa-chart-line me-1"></i>
                            <span class="total-score fw-bold">{{ $totalScore }}</span> {{ __('labels.points') }}
                        </span>
                    </div>
                @endif

                {{-- More Actions Dropdown --}}
                <div class="dropdown">
                    <button class="btn btn-sm btn-outline-secondary dropdown-toggle" type="button"
                        data-bs-toggle="dropdown" aria-expanded="false">
                        <i class="fas fa-ellipsis-h"></i>
                    </button>
                    <ul class="dropdown-menu dropdown-menu-end">
                        {{-- Report Option --}}
                        {{-- <li>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-flag me-2 text-warning"></i>{{ __('labels.report') }}
                            </a>
                        </li>
                         --}}
                        {{-- Share Option --}}
                        {{-- <li>
                            <a class="dropdown-item" href="#">
                                <i class="fas fa-share-alt me-2 text-info"></i>{{ __('labels.share') }}
                            </a>
                        </li> --}}

                        {{-- <li><hr class="dropdown-divider"></li> --}}

                        {{-- Delete Option --}}
                        @if (Gate::allows('delete-comment', $comment))
                            <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="fas fa-trash me-2"></i>{{ __('labels.delete') }}
                                </span>
                            </li>
                        @endif
                    </ul>
                </div>
            </div>
        </div>
    </div>

    {{-- {{ __('labels.edit_comment') }} Form --}}
    <div class="edit-comment-form mt-3 d-none px-3" id="edit-form-{{ $comment->id }}">
        <div class="card border">
            <div class="card-body">
                <h6 class="card-title mb-3">
                    <i class="fas fa-edit me-2 text-primary"></i>{{ __('labels.edit_comment') }}
                </h6>
                <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-3">
                        <textarea class="form-control" oninput="charCounter(event)" name="content" rows="3" maxlength="2000"
                            required>{{ $comment->content }}</textarea>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <small class="text-muted">
                                <span class="editCharCounter char-counter"
                                    id="editCharCount-{{ $comment->id }}">{{ strlen($comment->content) }}</span>/2000
                                {{ __('labels.characters') }}
                            </small>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary cancel-edit"
                                    data-comment-id="{{ $comment->id }}" onclick="cancelEditComment(event)">{{ __('labels.cancel') }}</button>
                                <button type="submit"
                                    class="btn btn-sm btn-primary">{{ __('labels.update') }}</button>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Reply Form --}}
    <div class="reply-form mt-3 d-none px-3" id="replyForm-{{ $comment->id }}">
        <div class="card border-primary">
            <div class="card-body">
                <h6 class="card-title mb-3">
                    <i class="fas fa-reply me-2 text-primary"></i>{{ __('labels.reply_to_comment') }}
                </h6>
                <form method="POST" action="{{ route('comments.store') }}" class="reply-comment-form"
                    onsubmit="submitCommentForm(event)">
                    @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-3">
                        <textarea class="form-control" oninput="charCounter(event)" name="content" rows="2" maxlength="2000"
                            placeholder="Write your reply here..." required></textarea>
                        <div class="d-flex justify-content-between align-items-center mt-2">
                            <small class="text-muted">
                                <span class="char-count" id="replyCharCount-{{ $comment->id }}">0</span>/2000
                                {{ __('labels.characters') }}
                            </small>
                            <div class="d-flex gap-2">
                                <button type="button" class="btn btn-sm btn-outline-secondary 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>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

    {{-- Child Comments --}}
    @if ($comment->childrenRecursiveVisible && $comment->childrenRecursiveVisible->count() > 0)
        <div class="child-comments mt-4 ps-4 border-start border-2" style="border-color: #dee2e6;">
            @foreach ($comment->childrenRecursiveVisible->sortBy('created_at') as $childComment)
                @include('components.comments.comment', [
            'comment' => $childComment,
            'depth' => $depth + 1,
            'marginLeft' => 0,
            'commentableId' => $commentableId,
            'commentableType' => $commentableType,
        ])
            @endforeach
        </div>
    @endif
</div>