import { compileMDX } from "next-mdx-remote/rsc";
import path from "path";
import { readFile, access } from "fs/promises";
import { notFound } from "next/navigation";
import Cedo from "@/Cedo";
import { useMDXComponents } from "@/mdx-components";
import { Suspense } from "react";
import CommentSection from "./_components/CommentSection";
import rehypePrism from "rehype-prism-plus";
import remarkGfm from "remark-gfm";
import rehypeHighlight from "rehype-highlight";
import mabpox from "@mapbox/rehype-prism";

const POSTS_FOLDER = path.join(process.cwd(), "content/blogs");

async function readPostFile(slug: string) {
  const filePath = path.resolve(path.join(POSTS_FOLDER, `${slug}.mdx`));

  try {
    await access(filePath);
  } catch (err) {
    return null;
  }

  const fileContent = await readFile(filePath, { encoding: "utf8" });
  return fileContent;
}

export default async function PostPage({
  params,
}: {
  params: { slug: string };
}) {
  const markdown = await readPostFile(params.slug);
  const components = useMDXComponents({});

  if (!markdown) {
    notFound();
  }

  const { content, frontmatter } = await compileMDX<{
    title: string;
    shortDescription: string;
  }>({
    source: markdown,
    options: {
      parseFrontmatter: true,
      mdxOptions: {
        remarkPlugins: [remarkGfm],
        rehypePlugins: [rehypePrism as any],
      },
    },
    components: {
      ...components,
      Cedo,
    },
  });

  return (
    <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10 xs: p-4">
      <div className="flex justify-center text-3xl font-extrabold leading-tight tracking-tighter md:text-4xl">
        {frontmatter.title}
      </div>
      <p className="w-full flex justify-center text-lg text-muted-foreground font-light text-justify">
        {frontmatter.shortDescription}
      </p>
      <div className="flex flex-col justify-center items-center gap-8 lg:px-6 md:px-4 xl:px-8 sm:px-2 xs:px-2 2xl:px-10 w-auto overflow-hidden">
        {content}
      </div>
      <section className="container grid items-center gap-6 pb-8 pt-6 md:py-10 xs: p-4">
        <div className="mt-8">
          <Suspense fallback={<div>loading</div>}>
            <CommentSection slug={params.slug} />
          </Suspense>
        </div>
      </section>
    </section>
  );
}