import type { Metadata } from "next";
import { Suspense } from "react";

import AmazonCouponsClient from "@/components/amazon-coupons/AmazonCouponsClient";
import { getAmazonCouponsServer } from "@/services/amazon.service.server";

export const revalidate = 1800;

const fromSlug = (s: string) => s?.replace(/-/g, " ");

let cachedCategoryData: any = null;

type Props = {
  params: { category?: string };
  searchParams?: { page?: string };
};

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const categorySlug = params?.category || "";
  const category = fromSlug(categorySlug);

  if (!cachedCategoryData) {
    cachedCategoryData = await getAmazonCouponsServer("", category, 1);
  }

  return {
    title: `${category} — Amazon Coupons`,
    description: `Browse Amazon coupons in ${category}`,
    alternates: {
      canonical: `/amazon-coupons/${categorySlug}`,
    },
  };
}

export default async function AmazonCouponsCategoryPage({
  params,
  searchParams,
}: Props) {
  const categorySlug = params?.category || "";
  const category = fromSlug(categorySlug);

  const page = Number(searchParams?.page || 1);

  const data =
    cachedCategoryData ||
    (await getAmazonCouponsServer("", category, page));

  return (
    <Suspense fallback={<div className="min-h-[300px]" />}>
      <AmazonCouponsClient
        mode="category"
        data={data}
        initialKeyword=""
        initialCategory={category}
        initialPage={page}
      />
    </Suspense>
  );
}