---
import {
  getParentId,
  getParentPost,
  getPostById,
  getPostReadingTime,
  getSubpostsForParent,
  isSubpost,
} from '@/lib/data-utils'
import { Icon } from 'astro-icon/components'

const { parentId } = Astro.props
const currentPostId = Astro.params.id as string
const isCurrentSubpost = isSubpost(currentPostId)
const rootParentId = isCurrentSubpost ? getParentId(currentPostId) : parentId

const currentPost = !isCurrentSubpost ? await getPostById(currentPostId) : null
const subposts = await getSubpostsForParent(rootParentId)
const parentPost = isCurrentSubpost ? await getParentPost(currentPostId) : null

const activePost = parentPost || currentPost
const isActivePost = activePost?.id === currentPostId

const activePostReadingTime = activePost
  ? await getPostReadingTime(activePost.id)
  : null
const subpostsWithReadingTime = await Promise.all(
  subposts.map(async (subpost) => ({
    ...subpost,
    readingTime: await getPostReadingTime(subpost.id),
  })),
)

const currentSubpostDetails = isCurrentSubpost
  ? subpostsWithReadingTime.find((subpost) => subpost.id === currentPostId)
  : null
---

{
  activePost && subposts.length > 0 && (
    <div id="mobile-subposts-container" class="w-full xl:hidden">
      <details class="group">
        <summary class="flex w-full cursor-pointer items-center justify-between">
          <div class="mx-auto flex w-full max-w-3xl items-center px-4 py-3">
            <div class="relative mr-2 size-4">
              <Icon
                name={
                  currentSubpostDetails
                    ? 'lucide:file-text'
                    : isActivePost
                    ? 'lucide:book-open-text'
                    : 'lucide:book-open'
                }
                class="size-4 flex-shrink-0"
                aria-hidden="true"
              />
            </div>
            <div class="flex flex-grow flex-col truncate text-sm">
              <span class="text-muted-foreground truncate">
                {currentSubpostDetails
                  ? currentSubpostDetails.data.title
                  : activePost?.data.title}
              </span>
            </div>
            <span class="text-muted-foreground ml-2">
              <Icon
                name="lucide:chevron-down"
                class="h-4 w-4 transition-transform duration-200 group-open:rotate-180"
              />
            </span>
          </div>
        </summary>

        <div class="mx-auto max-h-[30vh] max-w-3xl overflow-y-auto">
          <ul class="flex list-none flex-col gap-y-1 px-4 pb-4">
            {activePost && (
              <li>
                {isActivePost ? (
                  <div class="text-foreground bg-muted flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium">
                    <Icon
                      name="lucide:book-open-text"
                      class="size-4 flex-shrink-0"
                      aria-hidden="true"
                    />
                    <div class="flex flex-col">
                      <span class="line-clamp-2">{activePost.data.title}</span>
                      {activePostReadingTime && (
                        <span class="text-muted-foreground/80 text-xs">
                          {activePostReadingTime}
                        </span>
                      )}
                    </div>
                  </div>
                ) : (
                  <a
                    href={`/blog/${activePost.id}`}
                    class="subpost-item hover:text-foreground text-muted-foreground hover:bg-muted/50 flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors"
                  >
                    <Icon
                      name="lucide:book-open"
                      class="size-4 flex-shrink-0"
                      aria-hidden="true"
                    />
                    <div class="flex flex-col">
                      <span class="line-clamp-2">{activePost.data.title}</span>
                      {activePostReadingTime && (
                        <span class="text-muted-foreground/80 hover:text-foreground/80 text-xs">
                          {activePostReadingTime}
                        </span>
                      )}
                    </div>
                  </a>
                )}
              </li>
            )}

            {subpostsWithReadingTime.length > 0 && (
              <div class="ml-4 space-y-1">
                {subpostsWithReadingTime.map((subpost) =>
                  currentPostId === subpost.id ? (
                    <div class="text-foreground bg-muted flex items-center gap-2 rounded-md px-2 py-1.5 text-sm font-medium">
                      <Icon
                        name="lucide:file-text"
                        class="size-4 flex-shrink-0"
                        aria-hidden="true"
                      />
                      <div class="flex flex-col">
                        <span class="line-clamp-2">{subpost.data.title}</span>
                        <span class="text-muted-foreground/80 text-xs">
                          {subpost.readingTime}
                        </span>
                      </div>
                    </div>
                  ) : (
                    <a
                      href={`/blog/${subpost.id}`}
                      class="subpost-item hover:text-foreground text-muted-foreground hover:bg-muted/50 flex items-center gap-2 rounded-md px-2 py-1.5 text-sm transition-colors"
                      data-subpost-id={subpost.id}
                    >
                      <Icon
                        name="lucide:file"
                        class="size-4 flex-shrink-0"
                        aria-hidden="true"
                      />
                      <div class="flex flex-col">
                        <span class="line-clamp-2">{subpost.data.title}</span>
                        <span class="text-muted-foreground/80 hover:text-foreground/80 text-xs">
                          {subpost.readingTime}
                        </span>
                      </div>
                    </a>
                  ),
                )}
              </div>
            )}
          </ul>
        </div>
      </details>
    </div>
  )
}

<script>
  function setupMobileSubpostsInteraction() {
    const container = document.getElementById('mobile-subposts-container')
    if (!container) return

    const details = container.querySelector('details')
    const links = container.querySelectorAll('.subpost-item')

    links.forEach((link) => {
      link.addEventListener('click', () => {
        if (details) details.open = false
      })
    })
  }

  document.addEventListener('astro:page-load', setupMobileSubpostsInteraction)
  document.addEventListener('astro:after-swap', setupMobileSubpostsInteraction)
</script>
