import { useEffect } from "react";
import type { GetStaticPropsContext } from "next";
import { useRouter } from "next/router";

import Article from "@/components/article";
import PageLayout from "@/components/page-layout";
import PreviewBar from "@/components/preview-bar";
import SeoMeta from "@/components/seo-meta";
import { unwrapArray } from "@/helpers/array";
import { buildPageUrl } from "@/helpers/link";
import { useTheme } from "@/hooks";
import { getAllPosts, getAllPostsSlugs, getPostBySlug } from "@/lib/api";
import { type Post, type SeoMetaTags, type SiteMeta, Theme } from "@/types";

const MAX_LATEST_POSTS = 3;

interface BlogPostPageProps {
  siteMeta: SiteMeta;
  post: Post;
  error: boolean;
  preview: boolean;
}

export default function BlogPostPage({
  post,
  error,
  preview = false,
}: BlogPostPageProps) {
  const router = useRouter();
  // Extract pathname without query parameters
  const pathname = router.asPath.split("?")[0];

  useEffect(() => {
    if (error || post === null || post === undefined) {
      router.push("/404");
    }
  }, [error, post, router]);

  useTheme({ overrideTheme: Theme.Light });

  if (error) return null;

  return (
    <PageLayout variant="article">
      <SeoMeta
        metaTags={[...(post.seoMetaTags as SeoMetaTags)]}
        schemaType="BlogPosting"
        canonicalPathname={pathname}
      />
      {preview && <PreviewBar />}
      <Article article={post} />
    </PageLayout>
  );
}

export async function getStaticProps(context: GetStaticPropsContext) {
  if (!__FF_BLOG__) return { props: { error: true } };

  const preview = context?.draftMode ?? false;

  const pageSlug = context?.params?.slug
    ? unwrapArray(context.params.slug)
    : "";
  const post = await getPostBySlug(pageSlug, preview);

  if (post) {
    let linkedPosts = post.hideRelatedArticles ? [] : post.linkedPosts;

    if (!post.hideRelatedArticles && linkedPosts.length === 0) {
      const allPosts = await getAllPosts();
      linkedPosts = allPosts
        .filter((p) => p.slug !== pageSlug)
        .slice(0, MAX_LATEST_POSTS);
    }

    return {
      props: {
        post: { ...post, linkedPosts },
        error: false,
        preview,
      },
    };
  }

  return {
    props: { post: null, error: true },
    revalidate: 10,
  };
}

export async function getStaticPaths() {
  // When this is true (in preview environments) don't prerender any static pages.
  // Faster builds, but slower initial page load.
  if (process.env.SKIP_BUILD_STATIC_GENERATION) {
    return {
      paths: [],
      fallback: "blocking",
    };
  }

  const allPostsSlugs = await getAllPostsSlugs();
  const paths =
    allPostsSlugs.map((slug) => buildPageUrl({ type: "post", slug })) || [];

  return {
    paths,
    fallback: "blocking",
  };
}