import Link from "next/link";
import { getPostData, getAllPostIds } from "@/lib/posts";
import type { PostData } from "@/lib/posts";
import Window from "@/components/window";
import TableOfContents from "@/components/table-of-contents";
import { MDXRemote } from "next-mdx-remote/rsc";
import rehypePrettyCode from "rehype-pretty-code";
import rehypeSlug from "rehype-slug";

interface PageProps {
  params: {
    slug: string;
  };
}

export async function generateStaticParams() {
  const paths = getAllPostIds();
  return paths.map((path) => ({ slug: path.params.slug }));
}

export async function generateMetadata({ params }: PageProps) {
  const postData = await getPostData(params.slug);
  return {
    title: `${postData.title} | Gabriel's Kaszewski Blog`,
  };
}

export default async function Post({ params }: PageProps) {
  const postData: PostData = await getPostData(params.slug);

  return (
    <div className="mx-auto max-w-5xl">
      <Window title={postData.title} showProgress>
        <article>
          <div className="mb-4 text-gray-500 flex flex-col gap-1">
            <span>
              {new Date(postData.date).toLocaleDateString("en-US", {
                year: "numeric",
                month: "long",
                day: "numeric",
              })}
            </span>
            <span className="text-sm text-gray-400">{postData.readingTime}</span>
          </div>

          {postData.wip && (
            <div className="mb-6 flex items-center gap-3 rounded-lg border border-amber-300 bg-amber-50/70 px-4 py-3 text-sm text-amber-800">
              <span className="text-lg">🚧</span>
              <span>This post is a work in progress — content may change.</span>
            </div>
          )}

          {/* Mobile TOC — shown above article, hidden on lg+ */}
          {postData.headings.length > 0 && (
            <div className="lg:hidden mb-6">
              <TableOfContents headings={postData.headings} />
            </div>
          )}

          <div className="lg:flex lg:gap-8 lg:items-start">
            <div className="prose lg:prose-lg max-w-none flex-1 min-w-0">
              <MDXRemote
                source={postData.content}
                options={{
                  mdxOptions: {
                    rehypePlugins: [
                      rehypeSlug,
                      [
                        rehypePrettyCode,
                        {
                          theme: "github-dark-dimmed",
                          keepBackground: false,
                        },
                      ],
                    ],
                  },
                }}
              />
            </div>

            {/* Desktop TOC sidebar — hidden on mobile */}
            {postData.headings.length > 0 && (
              <div className="hidden lg:block w-52 flex-shrink-0">
                <TableOfContents headings={postData.headings} />
              </div>
            )}
          </div>
        </article>
      </Window>

      <div className="mt-8 text-center">
        <Link
          href="/"
          className="inline-block rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
        >
          ← Back to home
        </Link>
      </div>
    </div>
  );
}