import { useEffect } from "react";
import clsx from "clsx";
import { useRouter } from "next/router";
import { useQueryState } from "nuqs";

import ArticleCard from "@/components/article-card";
import ArticleList from "@/components/article-list";
import CallToAction from "@/components/call-to-action";
import List from "@/components/list";
import PageLayout from "@/components/page-layout";
import SeoMeta from "@/components/seo-meta";
import { useTheme } from "@/hooks";
import { getAllNews, getAllPosts } from "@/lib/api";
import { type News, type Post, Theme } from "@/types";

const MAX_LATEST_POSTS = 2;
const MAX_LATEST_NEWS = 3;

const ALL_TAG = {
  name: "All",
  id: "all",
  description: "",
};

interface BlogPageProps {
  allPosts: Post[];
  allNews: News[];
  error: boolean;
}

export default function BlogPage({
  allPosts = [],
  allNews = [],
  error,
}: BlogPageProps) {
  const router = useRouter();

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

  const [selectedTag, setSelectedTag] = useQueryState("tag");
  const isFiltered = !!selectedTag;

  const allArticles = [...allPosts, ...allNews];

  const allTags = [
    ALL_TAG,
    ...Array.from(
      new Map(
        allArticles.flatMap((item) => item.tags.map((tag) => [tag.name, tag])),
      ).values(),
    ),
  ];
  const postTags = Array.from(
    new Map(
      allPosts.flatMap((post) => post.tags.map((tag) => [tag.name, tag])),
    ).values(),
  );
  const newsTags = Array.from(
    new Map(
      allNews.flatMap((news) => news.tags.map((tag) => [tag.name, tag])),
    ).values(),
  );

  const filteredArticles =
    selectedTag === ALL_TAG.name.toLowerCase()
      ? allArticles
      : allArticles.filter((article) =>
          article.tags.some(
            (tag) => tag.name.toLowerCase() === selectedTag?.toLowerCase(),
          ),
        );

  const featuredPost = allPosts.find((post) => post.featured);
  const latestPosts = allPosts
    .filter((post) => !post.featured)
    .slice(0, MAX_LATEST_POSTS);
  const latestNews = allNews.slice(0, MAX_LATEST_NEWS);

  const handleTagSelect = (tagName: string) => {
    const formattedTagName = tagName.toLowerCase();
    if (formattedTagName === selectedTag) {
      setSelectedTag(null);
    } else {
      setSelectedTag(formattedTagName);
    }
  };

  useTheme({ overrideTheme: Theme.Light });

  if (error) return null;

  return (
    <PageLayout variant="secondary">
      <SeoMeta title="Blog" schemaType="Blog" canonicalPathname="/blog" />
      {isFiltered ? (
        <ArticleList
          key={selectedTag}
          title={
            allTags.find((tag) => tag.name.toLowerCase() === selectedTag)
              ?.name || ""
          }
          description={
            allTags.find((tag) => tag.name.toLowerCase() === selectedTag)
              ?.description || ""
          }
          articles={filteredArticles}
        >
          <List
            scrollX
            items={allTags.map((tag) => (
              <CallToAction
                key={tag.id}
                className={clsx("tag", {
                  active: selectedTag === tag.name.toLowerCase(),
                })}
                onClick={() => handleTagSelect(tag.name.toLowerCase())}
                variant="link"
              >
                {tag.name}
              </CallToAction>
            ))}
          />
        </ArticleList>
      ) : (
        <>
          {featuredPost && <ArticleCard variant="featured" {...featuredPost} />}
          {latestPosts && latestPosts.length > 0 && (
            <ArticleList
              title="Latest"
              variant="standard"
              articles={latestPosts}
              filterOptions={postTags.map((tag) => ({
                label: tag.name,
                value: tag.name.toLowerCase(),
              }))}
              onFilterSelect={(option) => setSelectedTag(option.value)}
            />
          )}
          {latestNews && latestNews.length > 0 && (
            <ArticleList
              title="In the news"
              articles={latestNews}
              filterOptions={newsTags.map((tag) => ({
                label: tag.name,
                value: tag.name.toLowerCase(),
              }))}
              onFilterSelect={(option) => setSelectedTag(option.value)}
            />
          )}
        </>
      )}
    </PageLayout>
  );
}

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

  let allPosts: Post[] = [];
  let allNews: News[] = [];

  try {
    allPosts = (await getAllPosts()) || [];
  } catch (error) {
    console.error("Error fetching posts:", error);
  }

  try {
    allNews = (await getAllNews()) || [];
  } catch (error) {
    console.error("Error fetching news:", error);
  }

  return {
    props: {
      allPosts,
      allNews,
      error: false,
    },
    revalidate: 10,
  };
}