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

// Helper function to fetch co-creator data using server API client
async function fetchCoCreatorData(slug: string) {
  const response = await serverApiClient(`creator-detail`, {
    query: { slug },
    revalidate: 300, // Cache for 5 minutes
  });

  if (!response.success) {
    throw new Error(response.message || 'Failed to fetch co-creator data');
  }

  return response.data;
}

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

  const bannerImage = dh.profile_image;
  // Use getImageUrl to ensure the image URL is properly formatted
  const socialShareImage = getImageUrl(bannerImage) || OG_BANNER;

 

  const designHouseSeoTitle = `${dh.name} - Co-Creator | Morni`;


  return {
    title: designHouseSeoTitle,
    description:
      dh.bio || `Discover ${dh.name}'s unique designs and Co-creations on Morni`,
    openGraph: {
      title: designHouseSeoTitle,
      description:
        dh.bio || `Discover ${dh.name}'s unique designs and Co-creations on Morni`,
      images: [
        {
          url: socialShareImage,
          width: 1200,
          height: 630,
          alt: `${dh.name} - Co-Creator`,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title: designHouseSeoTitle,
      description: dh.bio || `Discover ${dh.name}'s unique designs and Co-creations on Morni`,
      images: [socialShareImage],
    },
    icons: {
      apple: APPLE_ICON,
    },
    appleWebApp: {
      capable: true,
      statusBarStyle: "default",
      title: designHouseSeoTitle
    },
  };
}

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

  const data = await fetchCoCreatorData(slug);

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