<div class="bg-white dark:bg-gray-800 rounded-xl p-6 shadow-sm">

  <!-- Header -->
  <div class="flex justify-between items-center mb-6">
    <h2 class="text-xl font-bold">Comments</h2>
    <button
      *ngIf="visibleComments.length < comments.length"
      id="toggleComments"
      class="text-wattpad-primary hover:underline cursor-pointer"
      (click)="showMoreComments()">
      और देखे
    </button>
  </div>

  <!-- Messages -->
  <div *ngIf="error" class="mb-4 text-sm text-red-500 alert alert-danger">Please <a href="/login">login</a> to post your comment!.</div>
  <div *ngIf="message" class="mb-4 text-sm text-green-600">{{ message }}</div>

  <!-- Comment List -->
  <div id="commentsContainer">
    <div
      class="mb-6 comment-visible"
      *ngFor="let comment of visibleComments">

      <div class="flex items-start space-x-3">

        <!-- Avatar -->
        <div class="bg-gray-200 dark:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center">
          <span class="text-gray-600 dark:text-gray-300 text-sm font-bold">
            {{ (comment.name && comment.name.charAt(0).toUpperCase()) || 'U' }}
          </span>
        </div>

        <!-- Comment Body -->
        <div class="flex-1">
          <div class="bg-gray-100 dark:bg-gray-700 rounded-lg p-3">
            <div class="flex items-center justify-between mb-1">
              <span class="font-medium">{{ comment.name }}</span>
              <span class="text-xs text-wattpad-light">{{ getRelativeTime(comment.created_at) }}</span>
            </div>

            <p class="text-sm whitespace-pre-line break-words">{{ comment.comment }}</p>

            <!-- Actions -->
            <div class="flex items-center mt-2 space-x-4 text-xs">
              <button
                class="text-wattpad-light hover:text-wattpad-primary"
                (click)="react(comment.id, 'like')">
                <i class="fas fa-thumbs-up mr-1"></i> {{ comment.likes_count || 0 }}
              </button>
              <button
                class="text-wattpad-light hover:text-wattpad-primary"
                (click)="react(comment.id, 'dislike')">
                <i class="fas fa-thumbs-down mr-1"></i> {{ comment.dislikes_count || 0 }}
              </button>
              <button
                class="text-wattpad-light hover:text-wattpad-primary"
                (click)="setReply(comment.id)">
                ↩ Reply
              </button>
            </div>
          </div>

          <!-- Reply Box -->
          <div
            *ngIf="replyMode && replyParentId === comment.id"
            class="mt-3 ml-6 bg-gray-50 dark:bg-gray-700 rounded-lg p-3 border border-gray-200 dark:border-gray-600">
            <p class="mb-2 text-xs text-gray-500">
              {{t('REPLYING_TO')}} <strong>{{ comment.name }}</strong> as <strong>{{ currentUserName }}</strong>
            </p>
            <textarea
              [(ngModel)]="commentText"
              class="w-full px-3 py-2 rounded border border-gray-300 dark:border-gray-600 dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-wattpad-primary"
              placeholder="Write a reply..."></textarea>
            <div class="flex justify-end mt-2 space-x-2">
              <button
                (click)="postComment()"
                class="bg-wattpad-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-[#E5274B]">
                {{t('REPLY')}}
              </button>
              <button
                (click)="cancelReply()"
                class="text-sm text-gray-500 hover:underline">
                {{t('CANCEL')}}
              </button>
            </div>
          </div>

          <!-- Replies -->
          <div
            class="ml-6 mt-3 space-y-3"
            *ngIf="comment.replies && comment.replies.length > 0">

            <div
              *ngFor="let reply of comment.replies"
              class="bg-gray-50 dark:bg-gray-700 rounded-lg p-3">

              <div class="flex items-center justify-between mb-1">
                <span class="font-medium">{{ reply.name }}</span>
                <span class="text-xs text-wattpad-light">{{ getRelativeTime(reply.created_at) }}</span>
              </div>

              <p class="text-sm whitespace-pre-line break-words">{{ reply.comment }}</p>

              <div class="flex items-center mt-2 space-x-4 text-xs">
                <button
                  class="text-wattpad-light hover:text-wattpad-primary"
                  (click)="react(reply.id, 'like')">
                  <i class="fas fa-thumbs-up mr-1"></i> {{ reply.likes_count || 0 }}
                </button>
                <button
                  class="text-wattpad-light hover:text-wattpad-primary"
                  (click)="react(reply.id, 'dislike')">
                  <i class="fas fa-thumbs-down mr-1"></i> {{ reply.dislikes_count || 0 }}
                </button>
                <button
                  class="text-wattpad-light hover:text-wattpad-primary"
                  (click)="setReply(reply.id)">
                  ↩ {{t('REPLY')}}
                </button>
              </div>

              <!-- Reply box to a reply -->
              <div
                *ngIf="replyMode && replyParentId === reply.id"
                class="mt-3 ml-6 bg-gray-50 dark:bg-gray-600 rounded-lg p-3 border border-gray-200 dark:border-gray-500">
                <p class="mb-2 text-xs text-gray-500">
                  {{t('REPLYING_TO')}} <strong>{{ reply.name }}</strong> as <strong>{{ currentUserName }}</strong>
                </p>
                <textarea
                  [(ngModel)]="commentText"
                  class="w-full px-3 py-2 rounded border border-gray-300 dark:border-gray-500 dark:bg-gray-800 focus:outline-none focus:ring-2 focus:ring-wattpad-primary"
                  placeholder="Write a reply..."></textarea>
                <div class="flex justify-end mt-2 space-x-2">
                  <button
                    (click)="postComment()"
                    class="bg-wattpad-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-[#E5274B]">
                    {{t('REPLY')}}
                  </button>
                  <button
                    (click)="cancelReply()"
                    class="text-sm text-gray-500 hover:underline">
                    {{t('CANCEL')}}
                  </button>
                </div>
              </div>

            </div><!-- /reply ngFor -->
          </div><!-- /Replies list -->

        </div><!-- /flex-1 -->
      </div><!-- /comment row -->
    </div><!-- /ngFor top comments -->
  </div><!-- /commentsContainer -->

  <!-- Secondary "View more" button -->
  <div
    *ngIf="visibleComments.length < comments.length"
    class="mt-8 text-center">
    <button
      class="bg-wattpad-primary text-white px-8 py-3 rounded-full font-medium hover:bg-[#E5274B] cursor-pointer"
      (click)="showMoreComments()">
      View more comments
    </button>
  </div>

  <!-- Main New Comment Box (hidden in reply mode) -->
  <div *ngIf="!replyMode" class="mt-6">
    <div class="flex items-start space-x-3">

      <!-- Avatar -->
      <div class="bg-gray-200 dark:bg-gray-700 w-10 h-10 rounded-full flex items-center justify-center">
        
        <img *ngIf="currentUser?.profileimg" 
         [src]="profileImagePath + currentUser.profileimg" 
         class="w-8 h-8 rounded-full object-cover"
         alt="Profile Image">
    
      
        <div *ngIf="!currentUser?.profileimg" 
         class="w-8 h-8 rounded-full bg-wattpad-primary flex items-center justify-center text-white">
         {{ userName.charAt(0) }}
    </div>
     
      </div>

      <!-- Input -->
      <div class="flex-1 commentMainBox">
        <p class="mb-1 text-xs text-gray-500" >
          Commenting as <strong>{{ userName }}</strong>
        </p>
        <!-- <textarea
          [(ngModel)]="commentText"
          id="comment-text"
          class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-wattpad-primary"
          placeholder="Add a comment..."></textarea> -->

          <textarea
    [(ngModel)]="commentText"
    id="comment-text"
    class="w-full px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 dark:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-wattpad-primary"
    placeholder="Add a comment..."
    (focus)="handleTextareaClick($event)">
  </textarea>
          <div
    *ngIf="showLoginTooltip"
    class="absolute top-full left-0 popuplogin mt5 popuplogin w-64 bg-white dark:bg-gray-800 shadow-lg rounded-xl p-4 border border-gray-200 dark:border-gray-700 z-50">
    
    <p class="text-sm text-gray-700 dark:text-gray-300 mb-3">
      Please sign in to add a comment
    </p>
    <button
      class="bg-wattpad-primary text-white px-4 py-2 rounded-full w-full font-medium hover:bg-[#E5274B]"
      (click)="redirectToLogin()">
      Sign in
    </button>
  </div>
        <div class="flex justify-end mt-2">
          <button
            (click)="postComment()"
            class="bg-wattpad-primary text-white px-4 py-2 rounded-full text-sm font-medium hover:bg-[#E5274B]">
            Post Comment
          </button>
        </div>
      </div>

    </div>
  </div>

</div>
