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


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

// Fetch technique data server-side
async function fetchTechniqueData(slug: string) {
  try {
    const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/technique/${slug}`, {
      method: "GET",
      headers: {
        "Content-Type": "application/json",
      },
      next: { revalidate: 300 }, // 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 technique data:", error);
    return null;
  }
}

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

  const result = await fetchTechniqueData(slug);
  const technique = result?.data?.technique;

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

  const title = technique.technique_name;
  const description =
    technique.description ||
    technique.traditional_origin ||
    "Explore this technique";

  // ✅ image from gallery (same logic as silhouette)
  const rawImage =
    result?.data?.gallery?.[0]?.image_url ||
    technique?.image ||
    "";

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

  return {
    title,
    description,
    openGraph: {
      title,
      description,
      images: [
        {
          url: ogImage,
          width: 800,
          height: 800, // square ratio
        },
      ],
      type: "website",
    },
    twitter: {
      card: "summary_large_image",
      title,
      description,
      images: [ogImage],
    },
  };
}

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

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