import type { Metadata } from "next";
import Link from "next/link";

import Breadcrumbs from "@/components/admin/Breadcrumbs";
import DashboardBanner from "@/components/admin/DashboardBanner";
import ImageWithFallback from "@/components/common/ImageWithFallback";
import DealsCarousal from "@/components/DealsCarousal";
import { getArticlesByCategoryServer } from "@/services/blog.service.server";
import config from "@/utils/config";

import ArticleCard from "../articleCard";
import BlogCategoryAds from "../BlogCategoryAds";

const defaultImage = config.APP_CONFIG.DEFAULT_IMG;

export const revalidate = 3600; // Revalidate every hour

type Props = {
  params: Promise<{ category: string }>;
};

// Module-level cache for category data
const cachedCategoryData: { [key: string]: any } = {};

// Helper functions
function toSlug(str: string): string {
  return str
    .toLowerCase()
    .trim()
    .replace(/\s+/g, "-")
    .replace(/[^\w-]+/g, "");
}

function slugToTitle(slugUrl: string) {
  return slugUrl
    .split("-")
    .map((word) => word.charAt(0).toUpperCase() + word.slice(1))
    .join(" ");
}

// Generate metadata for SEO
export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const resolvedParams = await params;
  const rawCategory = resolvedParams.category;
  const category = rawCategory ?? "";
  const decodedCategory = decodeURIComponent(category);
  const categorySlug = toSlug(decodedCategory);

  // Fetch category data (will be cached for page render)
  if (!cachedCategoryData[categorySlug]) {
    cachedCategoryData[categorySlug] =
      await getArticlesByCategoryServer(categorySlug);
  }

  console.log("blog category metadata =>", cachedCategoryData);
  const categoryData = cachedCategoryData[categorySlug];
  const title = slugToTitle(decodedCategory);
  const articlesCount = categoryData?.articles?.length || 0;

  return {
    title: `${title} - Blog Articles | RebatesUI`,
    description: `Explore ${articlesCount} articles about ${title}. Get the latest tips, guides, and insights on ${decodedCategory.replace(
      /-/g,
      " ",
    )}.`,
    keywords: `${decodedCategory}, blog, articles, guides, tips, ${title}`,
    openGraph: {
      title: `${title} - Blog Articles`,
      description: `Explore ${articlesCount} articles about ${title}.`,
      type: "website",
    },
  };
}

export default async function BlogCategoryPage({ params }: Props) {
  const resolvedParams = await params;
  const rawCategory = resolvedParams.category;
  const category = rawCategory ?? "";
  const decodedCategory = decodeURIComponent(category);
  const categorySlug = toSlug(decodedCategory);

  // Use cached data from generateMetadata or fetch if not available
  if (!cachedCategoryData[categorySlug]) {
    cachedCategoryData[categorySlug] =
      await getArticlesByCategoryServer(categorySlug);
  }

  const categoryData = cachedCategoryData[categorySlug];
  const categories = categoryData?.categories || {};
  /** BUILD CATEGORY SLIDER DATA - Optimized with proper slugs */
  const categoryList =
    Object.keys(categories).map((catName) => {
      const slug = toSlug(catName);
      return {
        title: catName,
        slug,
        image: `${config.ENV_VARS.CDN_URL}/assets/img/articles/articles-icons/${slug}.svg`,
        url: `/blog/${slug}`,
      };
    }) || [];

  return (
    <>
      <DashboardBanner title={decodedCategory} showSearch={true} />

      <div className="bg-light">
        <Breadcrumbs
          id="blog-category"
          items={[
            { label: "Home", href: "/" },
            { label: "Blog", href: "/blog" },
            { label: slugToTitle(decodedCategory) },
          ]}
        />

        <section className="py-md-5 py-4 aboutSection bg-light px-2 container">
          {/* ==================== CATEGORY SLIDER ==================== */}
          {categoryList?.length > 0 && (
            <DealsCarousal title="All Categories">
              {categoryList?.map((cat: any) => (
                <div key={cat.slug} className="item text-center">
                  <Link href={cat?.url} className="text-decoration-none">
                    <div
                      className="bg-color-first rounded-3"
                      style={{
                        width: "200px",
                        height: "150px",
                        display: "flex",
                        flexDirection: "column",
                        alignItems: "center",
                        justifyContent: "center",
                      }}
                    >
                      <ImageWithFallback
                        src={cat?.image || defaultImage}
                        alt={cat?.title || ""}
                        height={60}
                        width={60}
                        fallback={cat?.txt_img}
                      />

                      <div
                        className="w-100"
                        style={{
                          borderTop: "1px dashed white",
                          marginTop: 10,
                        }}
                      ></div>

                      <div
                        className="text-white fw-bold pt-2"
                        style={{
                          fontSize: "15px",
                          height: "40px",
                          display: "flex",
                          alignItems: "center",
                          justifyContent: "center",
                        }}
                      >
                        {cat?.title}
                      </div>
                    </div>
                  </Link>
                </div>
              ))}
            </DealsCarousal>
          )}

          {/* ==================== ARTICLE SECTIONS ==================== */}
          <div className="mt-5">
            {/* ------ Category Articles ------ */}
            {categoryData?.articles && categoryData.articles.length > 0 ? (
              <DealsCarousal title={decodedCategory} centeredTitle={true}>
                {categoryData.articles.map((art: any) => (
                  <div
                    key={art.id || art.slug}
                    className="col-12 col-sm-6 col-md-4 col-lg-3"
                  >
                    <ArticleCard article={art} />
                  </div>
                ))}
              </DealsCarousal>
            ) : (
              <div className="text-center py-5">
                <p className="text-muted mb-3">No records found</p>
              </div>
            )}

            <BlogCategoryAds category={categorySlug} />
          </div>
        </section>
      </div>
    </>
  );
}