{#if visible && threadStructure.rootComments.length > 0}

{#each threadStructure.rootComments as rootComment (rootComment.id)} {@const replyCount = countReplies(rootComment.id, threadStructure.repliesByParent)} {@const isExpanded = expandedThreads.has(rootComment.id)}

{#if !isExpanded}

{rootComment.content}

{#if replyCount > 0} • {replyCount} {replyCount === 1 ? 'reply' : 'replies'} {/if} •

{:else}

{formatTimestamp(rootComment.created_at || 0)} {#if replyCount > 0} {replyCount} {replyCount === 1 ? 'reply' : 'replies'} {/if}

{@render basicMarkup(rootComment.content)}

{#if replyingTo === rootComment.id}

{#if replyError}
                    <P class="text-red-600 dark:text-red-400 text-sm mb-2">{replyError}</P>
                  {/if}

{#if replySuccess === rootComment.id}
                    <P class="text-green-600 dark:text-green-400 text-sm mb-2">Reply posted successfully!</P>
                  {/if}

<div class="flex gap-2">
                    <Button
                      size="sm"
                      onclick={() => submitReply(rootComment)}
                      disabled={isSubmittingReply || !replyContent.trim()}
                    >
                      {isSubmittingReply ? 'Posting...' : 'Post Reply'}
                    </Button>
                    <Button
                      size="sm"
                      color="light"
                      onclick={() => {
                        replyingTo = null;
                        replyContent = "";
                        replyError = null;
                      }}
                    >
                      Cancel
                    </Button>
                  </div>
                </div>
              {/if}

{#if replyCount > 0}
                <div class="pl-4 border-l-2 border-gray-200 dark:border-gray-600 space-y-2">
                  {#each renderReplies(rootComment.id, threadStructure.repliesByParent) as reply (reply.id)}
                    <div class="bg-gray-50 dark:bg-gray-700/30 rounded p-3">
                      <div class="flex items-center gap-2 mb-2">
                        <button
                          class="text-sm font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
                          onclick={(e) => { e.stopPropagation(); copyNevent(reply); }}
                          title="Copy nevent to clipboard"
                        >
                          {getDisplayName(reply.pubkey)}
                        </button>
                        <span class="text-xs text-gray-500 dark:text-gray-400">
                          {formatTimestamp(reply.created_at || 0)}
                        </span>

<div class="ml-auto flex items-center gap-2">
                          <button
                            id="reply-actions-{reply.id}"
                            class="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
                            aria-label="Reply actions"
                            onclick={(e) => { e.stopPropagation(); }}
                          >
                            <DotsVerticalOutline class="w-3 h-3 text-gray-600 dark:text-gray-400" />
                          </button>
                          <Popover
                            triggeredBy="#reply-actions-{reply.id}"
                            placement="bottom-end"
                            class="w-48 text-sm"
                          >
                            <ul class="space-y-1">
                              <li>
                                <button
                                  class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
                                  onclick={() => {
                                    detailsModalOpen = reply.id;
                                  }}
                                >
                                  <EyeOutline class="w-4 h-4" />
                                  View details
                                </button>
                              </li>
                              <li>
                                <button
                                  class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
                                  onclick={async () => {
                                    await copyNevent(reply);
                                  }}
                                >
                                  <ClipboardCleanOutline class="w-4 h-4" />
                                  Copy nevent
                                </button>
                              </li>
                              {#if canDelete(reply)}
                                <li>
                                  <button
                                    class="w-full text-left px-3 py-2 hover:bg-red-50 dark:hover:bg-red-900/20 rounded flex items-center gap-2 text-red-600 dark:text-red-400"
                                    onclick={() => {
                                      handleDeleteComment(reply);
                                    }}
                                    disabled={deletingComments.has(reply.id)}
                                  >
                                    <TrashBinOutline class="w-4 h-4" />
                                    {deletingComments.has(reply.id) ? 'Deleting...' : 'Delete comment'}
                                  </button>
                                </li>
                              {/if}
                            </ul>
                          </Popover>
                        </div>
                      </div>
                      <div class="text-sm text-gray-700 dark:text-gray-300 prose prose-sm dark:prose-invert max-w-none mb-2">
                        {@render basicMarkup(reply.content)}
                      </div>

<div class="mb-2">
                        <Button
                          size="xs"
                          color="light"
                          onclick={() => {
                            replyingTo = replyingTo === reply.id ? null : reply.id;
                            replyError = null;
                            replySuccess = null;
                          }}
                        >
                          {replyingTo === reply.id ? 'Cancel Reply' : 'Reply'}
                        </Button>
                      </div>

{#if replyingTo === reply.id}
                        <div class="mb-3 border border-gray-300 dark:border-gray-600 rounded-lg p-3 bg-white dark:bg-gray-800">
                          <Textarea
                            bind:value={replyContent}
                            placeholder="Write your reply..."
                            rows={3}
                            disabled={isSubmittingReply}
                            class="mb-2"
                          />

{#if replyError}
                            <P class="text-red-600 dark:text-red-400 text-sm mb-2">{replyError}</P>
                          {/if}

{#if replySuccess === reply.id}
                            <P class="text-green-600 dark:text-green-400 text-sm mb-2">Reply posted successfully!</P>
                          {/if}

<div class="flex gap-2">
                            <Button
                              size="sm"
                              onclick={() => submitReply(reply)}
                              disabled={isSubmittingReply || !replyContent.trim()}
                            >
                              {isSubmittingReply ? 'Posting...' : 'Post Reply'}
                            </Button>
                            <Button
                              size="sm"
                              color="light"
                              onclick={() => {
                                replyingTo = null;
                                replyContent = "";
                                replyError = null;
                              }}
                            >
                              Cancel
                            </Button>
                          </div>
                        </div>
                      {/if}

{#each renderReplies(reply.id, threadStructure.repliesByParent) as nestedReply (nestedReply.id)}
                        <div class="ml-4 mt-2 bg-gray-100 dark:bg-gray-600/30 rounded p-2">
                          <div class="flex items-center gap-2 mb-1">
                            <button
                              class="text-xs font-medium text-gray-900 dark:text-gray-100 hover:text-gray-600 dark:hover:text-gray-400 transition-colors"
                              onclick={(e) => { e.stopPropagation(); copyNevent(nestedReply); }}
                              title="Copy nevent to clipboard"
                            >
                              {getDisplayName(nestedReply.pubkey)}
                            </button>
                            <span class="text-xs text-gray-500 dark:text-gray-400">
                              {formatTimestamp(nestedReply.created_at || 0)}
                            </span>

<div class="ml-auto flex items-center gap-2">
                              <button
                                id="nested-reply-actions-{nestedReply.id}"
                                class="p-1 hover:bg-gray-200 dark:hover:bg-gray-600 rounded transition-colors"
                                aria-label="Nested reply actions"
                                onclick={(e) => { e.stopPropagation(); }}
                              >
                                <DotsVerticalOutline class="w-3 h-3 text-gray-600 dark:text-gray-400" />
                              </button>
                              <Popover
                                triggeredBy="#nested-reply-actions-{nestedReply.id}"
                                placement="bottom-end"
                                class="w-48 text-sm"
                              >
                                <ul class="space-y-1">
                                  <li>
                                    <button
                                      class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
                                      onclick={() => {
                                        detailsModalOpen = nestedReply.id;
                                      }}
                                    >
                                      <EyeOutline class="w-4 h-4" />
                                      View details
                                    </button>
                                  </li>
                                  <li>
                                    <button
                                      class="w-full text-left px-3 py-2 hover:bg-gray-100 dark:hover:bg-gray-700 rounded flex items-center gap-2"
                                      onclick={async () => {
                                        await copyNevent(nestedReply);
                                      }}
                                    >
                                      <ClipboardCleanOutline class="w-4 h-4" />
                                      Copy nevent
                                    </button>
                                  </li>
                                  {#if canDelete(nestedReply)}
                                    <li>
                                      <button
                                        class="w-full text-left px-3 py-2 hover:bg-red-50 dark:hover:bg-red-900/20 rounded flex items-center gap-2 text-red-600 dark:text-red-400"
                                        onclick={() => {
                                          handleDeleteComment(nestedReply);
                                        }}
                                        disabled={deletingComments.has(nestedReply.id)}
                                      >
                                        <TrashBinOutline class="w-4 h-4" />
                                        {deletingComments.has(nestedReply.id) ? 'Deleting...' : 'Delete comment'}
                                      </button>
                                    </li>
                                  {/if}
                                </ul>
                              </Popover>
                            </div>
                          </div>
                          <div class="text-xs text-gray-700 dark:text-gray-300 mb-2">
                            {@render basicMarkup(nestedReply.content)}
                          </div>

<div class="mb-1">
                            <Button
                              size="xs"
                              color="light"
                              onclick={() => {
                                replyingTo = replyingTo === nestedReply.id ? null : nestedReply.id;
                                replyError = null;
                                replySuccess = null;
                              }}
                            >
                              {replyingTo === nestedReply.id ? 'Cancel Reply' : 'Reply'}
                            </Button>
                          </div>

{#if replyingTo === nestedReply.id}
                            <div class="mb-2 border border-gray-300 dark:border-gray-600 rounded-lg p-2 bg-white dark:bg-gray-800">
                              <Textarea
                                bind:value={replyContent}
                                placeholder="Write your reply..."
                                rows={2}
                                disabled={isSubmittingReply}
                                class="mb-2 text-xs"
                              />

{#if replyError}
                                <P class="text-red-600 dark:text-red-400 text-xs mb-1">{replyError}</P>
                              {/if}

{#if replySuccess === nestedReply.id}
                                <P class="text-green-600 dark:text-green-400 text-xs mb-1">Reply posted successfully!</P>
                              {/if}

<div class="flex gap-2">
                                <Button
                                  size="xs"
                                  onclick={() => submitReply(nestedReply)}
                                  disabled={isSubmittingReply || !replyContent.trim()}
                                >
                                  {isSubmittingReply ? 'Posting...' : 'Post Reply'}
                                </Button>
                                <Button
                                  size="xs"
                                  color="light"
                                  onclick={() => {
                                    replyingTo = null;
                                    replyContent = "";
                                    replyError = null;
                                  }}
                                >
                                  Cancel
                                </Button>
                              </div>
                            </div>
                          {/if}
                        </div>
                      {/each}
                    </div>
                  {/each}
                </div>
              {/if}
            </div>
          </div>
        {/if}
      </div>
    {/each}
  </div>
{/if}

{#if detailsModalOpen}
  {@const comment = comments.find(c => c.id === detailsModalOpen)}
  {#if comment}
    <Modal
      title="Comment Details"
      open={true}
      autoclose
      outsideclose
      size="lg"
      class="modal-leather"
      onclose={() => detailsModalOpen = null}
    >
      <div class="space-y-4">
        <div class="flex justify-center pb-2">
          <Button
            color="primary"
            onclick={() => {
              viewEventDetails(comment);
            }}
          >
            View on Event Page
          </Button>
        </div>
        <div>
          <pre class="text-xs bg-gray-100 dark:bg-gray-800 p-3 rounded overflow-x-auto max-h-[500px] overflow-y-auto">{JSON.stringify({
            id: comment.id,
            pubkey: comment.pubkey,
            created_at: comment.created_at,
            kind: comment.kind,
            tags: comment.tags,
            content: comment.content,
            sig: comment.sig
          }, null, 2)}</pre>
        </div>
      </div>
    </Modal>
  {/if}
{/if}