import type { Metadata, ResolvingMetadata } from "next";
import TextileDetailClient from "./TextileDetailClient";
import { AWS_CDN_URL } from "@/utils/staticValues";

interface PageProps {
  params: Promise<{
    slug: string;
  }>;
}

// Fetch textile data server-side
async function fetchTextileData(slug: string) {
  try {
    const response = await fetch(
      `${process.env.NEXT_PUBLIC_APP_URL}/api/texttile/${slug}`,
      {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
        },
        next: { revalidate: 0 }, // Cache for 5 minutes
      },
    );

    if (!response.ok) {
      throw new Error(`Error: ${response.status} - ${response.statusText}`);
    }

    return await response.json();
  } catch (error) {
    console.error("Error fetching textile data:", error);
    return null;
  }
}

export async function generateMetadata({ params }: PageProps): Promise<Metadata> {
  const { slug } = await params;
  const result = await fetchTextileData(slug);

  console.log("RAW RESULT:", JSON.stringify(result?.data?.fabric, null, 2));
  console.log("GALLERY:", JSON.stringify(result?.data?.gallery?.[0], null, 2));

  const fabric = result?.data?.fabric;

  if (!fabric) {
    return {
      title: "Material Not Found | Morni",
      description: "This material could not be found.",
    };
  }

  const siteUrl = `${process.env.NEXT_PUBLIC_BASE_URL}`;
  const pageUrl = `${siteUrl}/material/${slug}`;

  // Gallery first image or fallback to nothing
  const rawImage = result?.data?.gallery?.[0]?.image_url || fabric?.image || "";
  const ogImage = rawImage
    ? rawImage.startsWith("http")
      ? rawImage
      : `${AWS_CDN_URL}/${rawImage}`
    : "";

  const title =
    fabric?.website_display_name || fabric?.fabric_name || "Material";
  const description =
    fabric?.short_description ||
    `Explore ${title} on Morni — crafted with care for your custom fashion journey.`;

  return {
    title: `${title} | Morni`,
    description,
    openGraph: {
      title: `${title} | Morni`,
      description,
      url: pageUrl,
      siteName: "Morni",
      type: "website",
      images: ogImage
        ? [{ url: ogImage, width: 800, height: 800, alt: title }]
        : [],
    },
    twitter: {
      card: "summary_large_image",
      title: `${title} | Morni`,
      description,
      images: ogImage ? [ogImage] : [],
    },
  };
}

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

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