import { notFound } from "next/navigation";
import { MDXRemote } from "next-mdx-remote/rsc";
import { TRPCError } from "@trpc/server";
import matter from "gray-matter";
import { servTrpc } from "~/app/_trpc/ServerClient";
import { Badge } from "~/components/ui/badge";
import { mdxComponents } from "~/components/mdx-components";

type Props = {
  params: Promise<{ slug: string }>;
};

export default async function BlogPostPage({ params }: Props) {
  const { slug } = await params;

  let post: Awaited<ReturnType<typeof servTrpc.blog.metadataBySlug>>;
  try {
    post = await servTrpc.blog.metadataBySlug(slug);
  } catch (e) {
    if (e instanceof TRPCError && e.code === "NOT_FOUND") notFound();
    throw e;
  }

  const response = await fetch(post.fileUrl, { next: { revalidate: 3600 } });
  if (!response.ok) notFound();

  const parsed = matter(await response.text());
  const tags = Array.isArray(parsed.data.tags)
    ? parsed.data.tags.map((tag) => String(tag).trim()).filter(Boolean)
    : post.tags;
  const title = typeof parsed.data.title === "string" ? parsed.data.title : post.title;
  const date = typeof parsed.data.date === "string" ? parsed.data.date : post.date;

  return (
    <main className="mx-auto h-full max-w-2xl overflow-y-auto px-4 py-12">
      <header className="mb-8">
        <h1 className="text-3xl font-bold">{title}</h1>
        {date && (
          <time className="text-muted-foreground text-sm">
            {new Date(date).toLocaleDateString("en-US", {
              year: "numeric",
              month: "long",
              day: "numeric",
            })}
          </time>
        )}
        {tags.length > 0 && (
          <div className="mt-3 flex flex-wrap gap-1.5">
            {tags.map((tag) => (
              <Badge key={tag} variant="outline">{tag}</Badge>
            ))}
          </div>
        )}
      </header>
      <article className="prose dark:prose-invert max-w-none">
        <MDXRemote source={parsed.content} components={mdxComponents} />
      </article>
    </main>
  );
}