---

import type { CollectionEntry } from 'astro:content';
import { getCollection, getEntries } from 'astro:content';
import type { GetStaticPaths, Page } from 'astro';
import BlogPagination from '@/components/blog/BlogPagination.astro';
import BlogPostCard from '@/components/blog/BlogPostCard.astro';
import FooterEasterEgg from '@/components/FooterEasterEgg.astro';
import JsonLd from '@/components/JsonLd.astro';
import { BLOG_PAGE_SIZE, PRODUCTION_URL } from '@/consts';
import Blog from '@/layouts/Blog.astro';
import { createBlogCollectionSchema } from '@/utils/jsonLd/schemas';

export const getStaticPaths = (async ({ paginate }) => {
  const posts = (await getCollection('blog'))
    .filter((post) => !post.data.devOnly || import.meta.env.DEV)
    .sort((a, b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf());

  // Resolve author references for all posts
  const postsWithAuthors = await Promise.all(
    posts.map(async (post) => ({
      ...post,
      authors: await getEntries(post.data.authors),
    }))
  );

  return paginate(postsWithAuthors, { pageSize: BLOG_PAGE_SIZE });
}) satisfies GetStaticPaths;

type PostWithAuthors = CollectionEntry<'blog'> & {
  authors: CollectionEntry<'authors'>[];
};

interface Props {
  page: Page<PostWithAuthors>;
}

const { page } = Astro.props;

// Build JSON-LD schema for CollectionPage
const pageUrl = new URL(Astro.url.pathname, PRODUCTION_URL).toString();
const jsonLdSchema = createBlogCollectionSchema({
  url: pageUrl,
  posts: page.data,
  siteUrl: PRODUCTION_URL.toString(),
});
---

<Blog
  title="Blog"
  description="News and updates from the Video.js open-source video player project"
>
  <JsonLd slot="head" schema={jsonLdSchema} />
  <header
    class="mx-auto mb-10 w-full max-w-4xl overflow-hidden rounded-xs border border-manila-dark text-center md:mb-20 dark:border-transparent dark:bg-soot"
  >
    <div class="mx-auto max-w-3xl px-5 py-20">
      <h1 class="mb-4 font-display text-h15 uppercase lg:text-h1">
        Video.js Blog
      </h1>
      <p class="font-display text-h5 leading-tight text-balance">
        {
          page.data.length === 0
            ? "Coming soon"
            : "News and updates from the Video.js open-source video player project"
        }
      </p>
    </div>
    <FooterEasterEgg variant="extra-short" />
  </header>
  <div class="mx-auto grid w-full max-w-3xl gap-10">
    {
      page.data.map((post) => (
        <BlogPostCard post={post} authors={post.authors} />
      ))
    }
  </div>
  {page.lastPage > 1 && <BlogPagination page={page} />}
</Blog>
