---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import Comment from '@/components/Comment.astro'
import Link from '@/components/Link.astro'
import NotionBlocks from '@/components/NotionBlocks.astro'
import PostHead from '@/components/PostHead.astro'
import PostNavigation from '@/components/PostNavigation.astro'
import SubpostsHeader from '@/components/SubpostsHeader.astro'
import SubpostsSidebar from '@/components/SubpostsSidebar.astro'
import TOCHeader from '@/components/TOCHeader.astro'
import TOCSidebar from '@/components/TOCSidebar.astro'
import { badgeVariants } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import Layout from '@/layouts/Layout.astro'
import type { TOCSection } from '@/lib/data-utils'
import {
  fetchRemotePostContent,
  getAdjacentPosts,
  getAllPostsAndSubposts,
  getParentId,
  getParentPost,
  getSubpostCount,
  getTOCSections,
  hasSubposts,
  isSubpost,
  parseAuthors,
  renderRemoteBlockMap,
} from '@/lib/data-utils'
import { formatDate } from '@/lib/utils'
import { Icon } from 'astro-icon/components'
import { Image } from 'astro:assets'

export async function getStaticPaths() {
  const posts = await getAllPostsAndSubposts()
  return posts.map((post) => ({
    params: { id: post.id },
    props: post,
  }))
}

const currentPostId = Astro.params.id

let Content: any = null
let headings: any[] = []
let remoteContent: any = null
let post: any = null
let authors: any[] = []
let isCurrentSubpost = false
let navigation: any = null
let parentPost: any = null
let hasChildPosts = false
let subpostCount = 0
let tocSections: TOCSection[] = []
let heroImage: any = null

try {
  const remote = await fetchRemotePostContent(currentPostId)
  if (!remote) {
    // return Astro.response(null, {status: 404})
    return Astro.rewrite('/404')
  }

  remoteContent = renderRemoteBlockMap(remote.blockMap, remote.rootId)
  headings = remoteContent?.headings ?? []
  post = remote.post
  authors = await parseAuthors(post?.authors ?? [])

  isCurrentSubpost = isSubpost(currentPostId)
  navigation = await getAdjacentPosts(currentPostId)
  parentPost = isCurrentSubpost ? await getParentPost(currentPostId) : null

  hasChildPosts = await hasSubposts(currentPostId)
  subpostCount = !isCurrentSubpost ? await getSubpostCount(currentPostId) : 0

  tocSections = remoteContent
    ? remoteContent.headings.length > 0
      ? [
          {
            type: 'parent',
            title: 'Overview',
            headings: remoteContent.headings,
          },
        ]
      : []
    : await getTOCSections(currentPostId)
  heroImage = post?.data?.banner ?? post?.data?.image ?? null
} catch (error) {
  console.error('blog page render failed:', error)
  return Astro.rewrite('/500')
}
export const prerender = false
---

<Layout>
  <PostHead slot="head" post={post} />
  {
    (hasChildPosts || isCurrentSubpost) && (
      <SubpostsHeader
        slot="subposts-navigation"
        parentId={isCurrentSubpost ? getParentId(currentPostId) : currentPostId}
      />
    )
  }
  {
    headings?.length > 0 &&
      !(
        isCurrentSubpost &&
        headings.length === 1 &&
        headings[0].text === post.data.title
      ) && <TOCHeader slot="table-of-contents" headings={headings} />
  }

  <section
    class="grid grid-cols-[minmax(0px,1fr)_min(calc(var(--breakpoint-md)-2rem),100%)_minmax(0px,1fr)] gap-y-6"
  >
    <div class="col-start-2">
      <Breadcrumbs
        items={[
          { href: '/blog', label: 'Blog', icon: 'lucide:library-big' },
          ...(isCurrentSubpost && parentPost
            ? [
                {
                  href: `/blog/${parentPost.id}`,
                  label: parentPost.data.title,
                  icon: 'lucide:book-open',
                },
                {
                  href: `/blog/${currentPostId}`,
                  label: post.data.title,
                  icon: 'lucide:file-text',
                },
              ]
            : [
                {
                  href: `/blog/${currentPostId}`,
                  label: post.data.title,
                  icon: 'lucide:book-open-text',
                },
              ]),
        ]}
      />
    </div>

    {
      heroImage && (
        <Image
          src={heroImage}
          alt={post.data.title}
          width={1200}
          height={630}
          class="col-span-full mx-auto w-full max-w-5xl object-cover"
        />
      )
    }

    <section class="col-start-2 flex flex-col gap-y-6 text-center">
      <div class="flex flex-col">
        <h1
          class="mb-2 scroll-mt-31 text-3xl leading-tight font-medium sm:text-4xl"
          id="post-title"
        >
          {post.data.title}
        </h1>

        <div
          class="text-muted-foreground divide-border mb-4 flex flex-col items-center justify-center divide-y text-xs sm:flex-row sm:flex-wrap sm:divide-x sm:divide-y-0 sm:text-sm"
        >
          {
            authors.length > 0 && (
              <div class="flex w-full items-center justify-center gap-x-2 py-2 sm:w-fit sm:px-2 sm:py-0 first:sm:pl-0 last:sm:pr-0">
                {authors.map((author) => (
                  <div class="flex items-center gap-x-1.5">
                    <Image
                      src={author.avatar}
                      alt={author.name}
                      width={20}
                      height={20}
                      class="rounded-full"
                    />
                    {author.isRegistered ? (
                      <Link
                        href={`/authors/${author.id}`}
                        underline
                        class="text-foreground"
                      >
                        <span>{author.name}</span>
                      </Link>
                    ) : (
                      <span>{author.name}</span>
                    )}
                  </div>
                ))}
              </div>
            )
          }

          <div
            class="flex w-full items-center justify-center gap-2 py-2 sm:w-fit sm:px-2 sm:py-0 first:sm:pl-0 last:sm:pr-0"
          >
            <span>{formatDate(post.data.date)}</span>
          </div>

          {
            subpostCount > 0 && (
              <div class="flex w-full items-center justify-center gap-1 py-2 sm:w-fit sm:px-2 sm:py-0 first:sm:pl-0 last:sm:pr-0">
                <Icon name="lucide:file-text" class="size-3" />
                {subpostCount} subpost{subpostCount === 1 ? '' : 's'}
              </div>
            )
          }
        </div>
        <div class="flex flex-wrap justify-center gap-2">
          {
            post.data.tags &&
              post.data.tags.length > 0 &&
              post.data.tags.map((tag) => (
                <a
                  href={`/tags/${tag}`}
                  class={badgeVariants({ variant: 'muted' })}
                >
                  <Icon name="lucide:hash" class="size-3" />
                  {tag}
                </a>
              ))
          }
        </div>
      </div>

      <PostNavigation
        newerPost={navigation.newer}
        olderPost={navigation.older}
        parentPost={isCurrentSubpost ? navigation.parent : undefined}
      />
    </section>

    {
      tocSections.length > 0 && (
        <TOCSidebar sections={tocSections} currentPostId={currentPostId} />
      )
    }

    <article class="prose col-start-2 max-w-none">
      {
        remoteContent ? (
          remoteContent.blocks.length > 0 ? (
            <NotionBlocks
              blocks={remoteContent.blocks}
              headings={remoteContent.headingBlocks}
            />
          ) : (
            <p>你来到了没有知识的荒原！</p>
          )
        ) : (
          Content && <Content />
        )
      }
    </article>

    <div class="col-start-2">
      <Comment />
    </div>

    {
      (hasChildPosts || isCurrentSubpost) && (
        <SubpostsSidebar
          parentId={
            isCurrentSubpost ? getParentId(currentPostId) : currentPostId
          }
          className="w-64"
        />
      )
    }

    <PostNavigation
      newerPost={navigation.newer}
      olderPost={navigation.older}
      parentPost={isCurrentSubpost ? navigation.parent : undefined}
    />
  </section>

  <Button
    variant="outline"
    size="icon"
    className="group fixed right-8 bottom-8 z-50 hidden"
    id="scroll-to-top"
    title="Scroll to top"
    aria-label="Scroll to top"
  >
    <Icon
      name="lucide:arrow-up"
      class="mx-auto size-4 transition-all group-hover:-translate-y-0.5"
    />
  </Button>

  <script>
    document.addEventListener('astro:page-load', () => {
      const scrollToTopButton = document.getElementById('scroll-to-top')
      const footer = document.querySelector('footer')

      if (scrollToTopButton && footer) {
        scrollToTopButton.addEventListener('click', () => {
          window.scrollTo({ top: 0, behavior: 'smooth' })
        })

        window.addEventListener('scroll', () => {
          const footerRect = footer.getBoundingClientRect()
          const isFooterVisible = footerRect.top <= window.innerHeight

          scrollToTopButton.classList.toggle(
            'hidden',
            window.scrollY <= 300 || isFooterVisible,
          )
        })
      }
    })
  </script>
</Layout>
