import { getImageUrl } from "@/utils/imageHelper";
import { APPLE_ICON, OG_BANNER, AWS_CDN_URL } from "@/utils/staticValues";
import { Metadata } from "next";
import FabricDetails from "./FabricDetails";
import { serverApiClient } from "@/utils/serverApiClient";

// Enable ISR - revalidate every 15 minutes
export const revalidate = 900;

// Helper function to fetch fabric data with caching
async function fetchFabricData(slug: string) {
  const result = await serverApiClient(`fabric-list-by-family/${slug}`, {
    revalidate: 900, // Cache for 15 minutes
  });

  if (!result?.success) {
    console.error("Fabric API failed:", result?.message);
    return null;
  }

  return result;
}

// ✅ Fetch fabric families (same source as FabricItems)
async function fetchFabricFamilies() {
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_APP_URL}/api/fabrics/families`,
      {
        next: { revalidate: 900 },
      },
    );

    if (!response.ok) {
      const text = await response.text();
      console.error("Families API ERROR:", text);
      return null;
    }

    const contentType = response.headers.get("content-type");

    if (!contentType?.includes("application/json")) {
      const text = await response.text();
      console.error("Families NON-JSON:", text);
      return null;
    }

    return await response.json();
  } catch (error) {
    console.error("Families fetch error:", error);
    return null;
  }
}

export async function generateMetadata({
  params,
}: {
  params: Promise<{ slug: string }>;
}): Promise<Metadata> {
  const { slug } = await params;

  // ✅ fetch both safely
  const [familyData, familiesList] = await Promise.all([
    fetchFabricData(slug),
    fetchFabricFamilies(),
  ]);

  const fabricFamily = familyData?.data?.family;

  // ✅ match thumbnail like FabricItems
  const matchedFamily = familiesList?.data?.fabric?.find(
    (item: any) => item.slug === slug,
  );

  const rawImage = matchedFamily?.thumbnail_image || "";

  const socialShareImage = rawImage
    ? rawImage.startsWith("http")
      ? rawImage
      : `${AWS_CDN_URL}/${rawImage}`
    : OG_BANNER;

  const fabricSeoTitle = `${
    fabricFamily?.name || "Fabric"
  } - Premium Fabrics | Morni`;

  const fabricDescription =
    fabricFamily?.description ||
    `Discover premium ${fabricFamily?.name || "fabric"} collection at Morni.`;

  // ✅ fallback metadata if API fails
  if (!fabricFamily) {
    return {
      title: "Fabric Collection",
      description: "Explore premium fabrics at Morni",
      openGraph: {
        images: [
          {
            url: OG_BANNER,
            width: 800,
            height: 1000,
          },
        ],
      },
    };
  }

  return {
    title: fabricSeoTitle,
    description: fabricDescription,

    openGraph: {
      title: fabricSeoTitle,
      description: fabricDescription,
      type: "website",
      images: [
        {
          url: socialShareImage,
          width: 800,
          height: 1000, // ✅ 4:5
          alt: `${fabricFamily?.name} fabric`,
        },
      ],
    },

    twitter: {
      card: "summary_large_image",
      title: fabricSeoTitle,
      description: fabricDescription,
      images: [socialShareImage],
    },

    icons: {
      apple: APPLE_ICON,
    },

    appleWebApp: {
      capable: true,
      statusBarStyle: "default",
      title: fabricSeoTitle,
    },
  };
}

export default async function Page({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;

  const data = await fetchFabricData(slug);

  return (
    <>
      <FabricDetails params={{ slug }} initialData={data} />
    </>
  );
}