---
import { Image } from "astro:assets";
import { type CollectionEntry, getCollection, render } from "astro:content";
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 { formatDate, readingTime } from "@/lib/utils";
import { Icon } from "astro-icon/components";

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);
---

<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>
  </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>