---
import Breadcrumbs from '@/components/Breadcrumbs.astro'
import PostNavigation from '@/components/PostNavigation.astro'
import TableOfContents from '@/components/TableOfContents.astro'
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
import Layout from '@/layouts/Layout.astro'
import { parseAuthors } from '@/lib/server-utils'
import { formatDate, readingTime } from '@/lib/utils'
import { Icon } from 'astro-icon/components'
import { Image } from 'astro:assets'
import { type CollectionEntry, getCollection, render } from 'astro:content'

export async function getStaticPaths() {
  const posts = (await getCollection('blog'))
    .filter((post) => !post.data.draft)
    .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())
  return posts.map((post) => ({
    params: { id: post.id },
    props: post,
  }))
}
type Props = CollectionEntry<'blog'>

const posts = (await getCollection('blog'))
  .filter((post) => !post.data.draft)
  .sort((a, b) => b.data.date.valueOf() - a.data.date.valueOf())

function getPostIndex(id: string): number {
  return posts.findIndex((post) => post.id === id)
}

function getPrevPost(id: string): Props | null {
  const postIndex = getPostIndex(id)
  return postIndex !== -1 && postIndex < posts.length - 1
    ? posts[postIndex + 1]
    : null
}

function getNextPost(id: string): Props | null {
  const postIndex = getPostIndex(id)
  return postIndex > 0 ? posts[postIndex - 1] : null
}

const currentPostId = Astro.params.id
const nextPost = getNextPost(currentPostId)
const prevPost = getPrevPost(currentPostId)

const post = Astro.props
const { Content, headings } = await render(post)

const authors = await parseAuthors(post.data.authors ?? [])
---

<Layout title={post.data.title} description={post.data.description}>
  <section
    class="grid grid-cols-[minmax(0px,1fr)_min(var(--breakpoint-md),100%)_minmax(0px,1fr)] gap-y-6 *:px-4"
  >
    <Breadcrumbs
      items={[
        { href: '/blog', label: 'Blog', icon: 'lucide:archive' },
        { label: post.data.title, icon: 'lucide:file-text' },
      ]}
      class="col-start-2"
    />
    {
      post.data.image && (
        <Image
          src={post.data.image}
          alt={post.data.title}
          width={1200}
          height={630}
          class="col-span-full mx-auto w-full max-w-[1000px] object-cover"
        />
      )
    }
    <section class="col-start-2 flex flex-col gap-y-6 text-center">
      <div class="flex flex-col gap-y-4">
        <h1 class="text-4xl leading-tight font-medium text-pretty sm:text-5xl">
          {post.data.title}
        </h1>

        <div
          class="text-muted-foreground flex flex-wrap items-center justify-center gap-2 text-sm"
        >
          <div class="flex items-center gap-2">
            <span>{formatDate(post.data.date)}</span>
            <Separator orientation="vertical" className="h-4!" />
            <span>{readingTime(post.body!)}</span>
          </div>
        </div>
      </div>

      <PostNavigation prevPost={prevPost} nextPost={nextPost} />
    </section>

    {headings.length > 0 && <TableOfContents headings={headings} />}

    <article class="prose col-start-2 max-w-none">
      <Content />
    </article>

    <PostNavigation prevPost={prevPost} nextPost={nextPost} />
  </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>