import { Metadata } from "next";
import SilhouetteDetailClient from "./SilhouetteDetailClient";
import { AWS_CDN_URL } from "@/utils/staticValues";

interface PageProps {
  params: Promise<{
    slug: string;
  }>;
}
// Fetch silhouette data server-side
async function fetchSilhouetteData(slug: string) {
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_API_BASE_URL}/silhouette/${slug}`,
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
        next: { revalidate: 300 },
      },
    );

    if (!response.ok) {
      const text = await response.text(); // 👈 debug
      console.error("API ERROR RESPONSE:", text);
      throw new Error(`Error: ${response.status}`);
    }

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

    if (!contentType || !contentType.includes("application/json")) {
      const text = await response.text();
      console.error("NON JSON RESPONSE:", text);
      throw new Error("Invalid JSON response");
    }

    return await response.json();
  } catch (error) {
    console.error("Error fetching silhouette data:", error);
    return null;
  }
}
export async function generateMetadata({
  params,
}: PageProps): Promise<Metadata> {
  const { slug } = await params; // ✅ FIX

  const result = await fetchSilhouetteData(slug);
  const silhouette = result?.data?.silhouette;

  if (!silhouette) {
    return {
      title: "Silhouette Not Found",
      description: "No data available",
    };
  }

  const title = silhouette.name;
  const description = silhouette.description || "Explore this silhouette";

  const rawImage =
    result?.data?.gallery?.[0]?.image_url || silhouette?.image || "";

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


    console.log("API URL:", `${process.env.NEXT_PUBLIC_API_BASE_URL}/silhouette/${slug}`);

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      images: [
        {
          url: ogImage,
          width: 800,
          height: 1000,
        },
      ],
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [ogImage],
    },
  };
}

export default async function SilhouetteDetails({ params }: PageProps) {
  const { slug } = await params;
  const initialData = await fetchSilhouetteData(slug);

  return (
    <div className="mob-noise py-14">
      <SilhouetteDetailClient slug={slug} initialData={initialData} />
    </div>
  );
}