import { CallToActionBox } from "@/components/blog/cta";
import { Breadcrumb, formatDate, JsonLd } from "@/components/blog/parts";
import { TableOfContents } from "@/components/blog/toc";
import {
  authorOf,
  blogPostingLd,
  breadcrumbLd,
  categoryOf,
  crumbs,
} from "@/lib/blog/feeds";
import { getPublishedPost, listPublishedPosts } from "@/lib/blog/loader";
import { parseBody, renderBody } from "@/lib/blog/markdown";
import {
  BLOG_PATH,
  categoryPath,
  postImagePath,
  postMarkdownPath,
  postPath,
  RELATED_POST_COUNT,
} from "@/lib/blog/routes";
import type { Metadata } from "next";
import Link from "next/link";
import { notFound } from "next/navigation";

export async function generateStaticParams() {
  return (await listPublishedPosts()).map((p) => ({ slug: p.slug }));
}

export async function generateMetadata({
  params,
}: PageProps<"/blog/[slug]">): Promise<Metadata> {
  const { slug } = await params;
  const post = await getPublishedPost(slug);
  if (!post) return {};
  const image = post.image ?? postImagePath(post.slug);
  return {
    title: post.title,
    description: post.description,
    keywords: [post.primaryKeyword, ...post.secondaryKeywords],
    authors: [
      { name: authorOf(post.author).name, url: authorOf(post.author).url },
    ],
    alternates: {
      canonical: postPath(post.slug),
      types: { "text/markdown": postMarkdownPath(post.slug) },
    },
    openGraph: {
      type: "article",
      title: post.title,
      description: post.description,
      url: postPath(post.slug),
      publishedTime: post.publishedAt,
      modifiedTime: post.updatedAt ?? post.publishedAt,
      images: [{ url: image, width: 1200, height: 630, alt: post.title }],
    },
    twitter: {
      card: "summary_large_image",
      title: post.title,
      description: post.description,
      images: [image],
    },
  };
}

export default async function PostPage({ params }: PageProps<"/blog/[slug]">) {
  const { slug } = await params;
  const post = await getPublishedPost(slug);
  if (!post) notFound();

  const category = categoryOf(post.category);
  const author = authorOf(post.author);
  const { headings, links } = parseBody(post.body);
  const html = renderBody(post.body);

  // Related: same category, the ones this post links to first, then the newest
  const linked = new Set(
    links
      .map((l) => l.href.split("#")[0])
      .filter((h) => h.startsWith(`${BLOG_PATH}/`)),
  );
  const siblings = (await listPublishedPosts()).filter(
    (p) => p.category === post.category && p.slug !== post.slug,
  );
  const related = [
    ...siblings.filter((p) => linked.has(postPath(p.slug))),
    ...siblings.filter((p) => !linked.has(postPath(p.slug))),
  ].slice(0, RELATED_POST_COUNT);

  return (
    <article className="mx-auto max-w-6xl px-4 py-12 sm:px-6">
      <JsonLd data={blogPostingLd(post)} />
      <JsonLd
        data={breadcrumbLd([
          crumbs.index,
          crumbs.category(post.category),
          { name: post.title, path: postPath(post.slug) },
        ])}
      />
      <Breadcrumb
        items={[
          { name: "Blog", href: BLOG_PATH },
          ...(category
            ? [{ name: category.name, href: categoryPath(category.slug) }]
            : []),
          { name: post.title },
        ]}
      />
      <header className="mt-6 max-w-3xl">
        <h1 className="font-display text-blog-ink text-3xl leading-tight sm:text-4xl">
          {post.title}
        </h1>
        <p className="text-blog-muted mt-4 flex flex-wrap gap-x-4 gap-y-1 text-sm">
          <span>
            By{" "}
            <a
              href={author.url}
              className="text-blog-link font-semibold hover:underline"
            >
              {author.name}
            </a>
          </span>
          <span>Published {formatDate(post.publishedAt)}</span>
          {post.updatedAt && <span>Updated {formatDate(post.updatedAt)}</span>}
        </p>
      </header>

      <div className="mt-10 grid gap-10 lg:grid-cols-[minmax(0,1fr)_17rem]">
        <aside className="lg:order-2">
          <div className="space-y-6 lg:sticky lg:top-24">
            <details
              open
              className="group ring-blog-line rounded-2xl ring-1 lg:ring-0"
            >
              <summary className="text-blog-ink cursor-pointer list-none p-4 text-sm font-semibold lg:hidden">
                Contents
              </summary>
              <div className="px-4 pb-4 lg:p-0">
                <TableOfContents headings={headings} />
              </div>
            </details>
            <CallToActionBox id="cta-sidebar" />
          </div>
        </aside>

        <div className="min-w-0 lg:order-1">
          <div
            className="post-body max-w-3xl"
            dangerouslySetInnerHTML={{ __html: html }}
          />
          <div className="mt-12 max-w-3xl">
            <CallToActionBox id="cta-end" />
          </div>
          {related.length > 0 && category && (
            <section aria-labelledby="related" className="mt-12 max-w-3xl">
              <h2 id="related" className="text-blog-ink text-xl font-bold">
                Related posts
              </h2>
              <ul className="mt-4 grid gap-4 sm:grid-cols-2">
                {related.map((p) => (
                  <li key={p.slug}>
                    <Link
                      href={postPath(p.slug)}
                      className="ring-blog-line hover:ring-blog-accent block h-full rounded-xl p-4 ring-1"
                    >
                      <span className="text-blog-ink font-semibold">
                        {p.title}
                      </span>
                      <span className="text-blog-muted mt-1 block text-sm">
                        {p.description}
                      </span>
                    </Link>
                  </li>
                ))}
              </ul>
              <p className="mt-5">
                <Link
                  href={categoryPath(category.slug)}
                  className="text-blog-link font-semibold hover:underline"
                >
                  All posts in {category.name}
                </Link>
              </p>
            </section>
          )}
        </div>
      </div>
    </article>
  );
}