import Link from "next/link";
import { getPostData, getAllPostIds, getAdjacentPosts } 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";
import remarkGfm from "remark-gfm";
import Video from "@/components/video";

interface PageProps {
  params: Promise<{ slug: string }>;
}

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

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

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

  return (
    <div className="mx-auto max-w-6xl">
      <div className="lg:flex lg:gap-4 lg:items-start">
        <Window title={postData.title} showProgress className="lg:flex-1 min-w-0">
          <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 — inline above article, hidden on lg+ */}
            {postData.headings.length > 0 && (
              <div className="lg:hidden mb-6 bg-white/20 backdrop-blur border border-white/30 rounded-lg p-4">
                <TableOfContents headings={postData.headings} />
              </div>
            )}

            <div className="prose lg:prose-lg max-w-none">
              <MDXRemote
                source={postData.content}
                components={{ Video }}
                options={{
                  mdxOptions: {
                    remarkPlugins: [remarkGfm],
                    rehypePlugins: [
                      rehypeSlug,
                      [
                        rehypePrettyCode,
                        {
                          theme: "github-dark-dimmed",
                          keepBackground: false,
                        },
                      ],
                    ],
                  },
                }}
              />
            </div>
          </article>
        </Window>

        {/* Desktop TOC — separate Aero Window, sticky on the right */}
        {postData.headings.length > 0 && (
          <div className="hidden lg:block w-56 flex-shrink-0 sticky top-8">
            <Window title="Contents">
              <TableOfContents headings={postData.headings} />
            </Window>
          </div>
        )}
      </div>

      <div className="mt-8 flex items-center justify-between gap-4">
        {prev ? (
          <Link
            href={`/posts/${prev.id}`}
            className="inline-block max-w-[38%] truncate rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
            title={prev.title}
          >
            ← {prev.title}
          </Link>
        ) : (
          <span />
        )}

        <Link
          href="/"
          className="inline-block shrink-0 rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
        >
          Home
        </Link>

        {next ? (
          <Link
            href={`/posts/${next.id}`}
            className="inline-block max-w-[38%] truncate rounded-full bg-white/80 px-6 py-2 font-semibold text-blue-700 shadow-md transition-all hover:bg-white"
            title={next.title}
          >
            {next.title} →
          </Link>
        ) : (
          <span />
        )}
      </div>
    </div>
  );
}