import type { Metadata } from "next";
import { cookies } from "next/headers";
import { permanentRedirect } from "next/navigation";

import Breadcrumbs from "@/components/admin/Breadcrumbs";
import DealsCarousal from "@/components/DealsCarousal";
import { getArticleDetailsServer } from "@/services/blog.service.server";
import config from "@/utils/config";

import ArticleAd from "../../ArticleAd";
import ArticleCard from "../../articleCard";
import ArticleDetailClient from "../../ArticleDetailClient";

export const dynamic = "force-dynamic";

type Props = {
  params: Promise<{ category: string; slug: string }>;
  searchParams?: Promise<Record<string, string | string[] | undefined>>;
};

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

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const resolvedParams = await params;

  const category = Array.isArray(resolvedParams.category)
    ? resolvedParams.category.join("-")
    : (resolvedParams.category ?? "");

  const slugString = Array.isArray(resolvedParams.slug)
    ? resolvedParams.slug.join("-")
    : (resolvedParams.slug ?? "");

  const id = Number(slugString.split("-")[0]);
  const slugurl = slugString.replace(`${id}-`, "");

  let data: any = null;

  try {
    data = await getArticleDetailsServer({
      id,
      category,
      slugurl,
      is_debug: "123",
    });
    // console.log("data-----", data);
  } catch (e) {
    console.error("Metadata Article API error:", e);
  }

  // REDIRECT LOGIC
  const newSlug = data?.data?.new_slug_url;
  if (newSlug && typeof newSlug === "string" && newSlug.trim() !== "") {
    permanentRedirect(
      `${config.ENV_VARS.UI_BASE_URL}/blog/${category}/${id}-${newSlug}`,
    );
  }

  const cookieStore = await cookies();
  const userType = cookieStore.get("user_type");
  const approvedKeywords = data?.article?.approved_keywords || '';
  const hasApprovedKeywords = typeof approvedKeywords === "string" && approvedKeywords.trim() !== "";

  return {
    title:
      data?.page_title ||
      "Rebates: The Best Coupons, Deals, Promo Codes & Discounts",
    description:
      data?.meta_description ||
      "Welcome to rebates, the ultimate destination for shopping. Our website offers all your favorite brands the latest discounts and promo codes",
    icons: {
      icon:
        userType?.value === "PLUS"
          ? config?.APP_CONFIG?.PLUS_FAVICON
          : config?.APP_CONFIG?.FAVICON,
    },
    openGraph: {
      title: data?.page_title || "Article",
      description: data?.meta_description || "",
      type: "article",
    },
    ...(hasApprovedKeywords
      ? {
        other: {
          approvedkeywords: approvedKeywords.trim(),
        },
      }
      : {}),
  };
}

export default async function ArticleDetailPage({
  params,
  searchParams,
}: Props) {
  const resolvedParams = await params;
  const resolvedSearchParams = await searchParams;
  const is_debug = resolvedSearchParams?.is_debug;

  const category = resolvedParams.category || "";
  const slugString = resolvedParams.slug || "";

  const id = Number(slugString.split("-")[0]);
  const slugurl = slugString.replace(`${id}-`, "");

  let data: any = null;

  try {
    data = await getArticleDetailsServer({
      id,
      category,
      slugurl,
      is_debug: Array.isArray(is_debug) ? is_debug[0] : is_debug,
    }); // ✅ UPDATED
  } catch (e) {
    console.error("Article Page API error:", e);
  }

  // REDIRECT IF API RETURNS NEW SLUG
  const newSlug = data?.data?.new_slug_url;
  if (newSlug && typeof newSlug === "string" && newSlug.trim() !== "") {
    permanentRedirect(
      `${config.ENV_VARS.UI_BASE_URL}/blog/${category}/${id}-${newSlug}`,
    );
  }
  const debug_statement = data?.debug_statement || {};
  const article = data?.article || {};
  const decodedCategory = decodeURIComponent(category);
  const categoryTitle = slugToTitle(decodedCategory);
  const breadcrumbTitle = article?.title || "";
  const featured_stores = data?.featured_stores || [];
  const popular_retailers = data?.popular_retailers || [];
  const related_articles = data?.related_articles || [];
  const hasArticleData = article && Object.keys(article).length > 0;

  if (!hasArticleData) {
    return (
      <div className="py-2">
        <div className="container mt-5">
          <div className="alert alert-danger text-center" role="alert">
            <h4 className="alert-heading">Something went wrong</h4>
            <p>
              We couldn’t load this article right now. Please try again later.
            </p>
          </div>
        </div>
      </div>
    );
  }

  return (
    <div>
      {/* =========== BREADCRUMBS =========== */}
      <Breadcrumbs
        id="blog-detail"
        items={[
          { label: "Home", href: "/" },
          { label: "Blog", href: "/blog" },
          {
            label: categoryTitle,
            href: `/blog/${category}`,
          },
          { label: breadcrumbTitle },
        ]}
      />

      <ArticleDetailClient
        article={article}
        title={breadcrumbTitle}
        featured_stores={featured_stores}
        popular_retailers={popular_retailers}
        debug_statement={debug_statement}
      />
      <div className="container">
        <ArticleAd
          articleId={article.id}
          device={"desktop"}
          center="text-center"
        />
      </div>

      <div className="container">
        <DealsCarousal
          title={"Related Articles"}
          autoScroll={true}
          showNavButtons={related_articles?.length > 4}
        >
          {related_articles?.map((related: any) => (
            <div
              key={related.id || related.slug}
              className="col-12 col-sm-6 col-md-4 col-lg-3"
            >
              <ArticleCard article={related} />
            </div>
          ))}
        </DealsCarousal>
      </div>
    </div>
  );
}