import BackgroundGradients from "@/components/BackgroundGradients";
import Footer from "@/components/Footer";
import ProductDetailPage from "@/components/ProductDetailPage";
import type { Metadata } from "next";
import { notFound } from "next/navigation";
import { fetchProductSeoMetadata } from "@/lib/metadata";
import { productSchema } from "@/lib/schema";

type Props = {
  params: Promise<{ path: string[] }>;
};

const MARKETPLACE_PRODUCT_ZIGZAG_COUNT = 3;

async function getProductForSchema(productIdOrHandle: string) {
  const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL;
  if (!base) return null;

  try {
    const encoded = encodeURIComponent(productIdOrHandle);
    const res = await fetch(`${base}/store/product-detail/${encoded}`, {
      method: "GET",
      headers: {
        "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "",
      },
      cache: "no-store",
    });
    if (!res.ok) return null;
    const data = await res.json();
    return data?.product ?? data?.data ?? data ?? null;
  } catch {
    return null;
  }
}

export async function generateMetadata({ params }: Props): Promise<Metadata> {
  const { path: segments } = await params;
  const list = Array.isArray(segments) ? segments : [];
  const productId = decodeURIComponent(String(list[list.length - 1] ?? "")).trim();
  const pageUrl = `/marketplace/${list.map((segment) => encodeURIComponent(segment)).join("/")}`;

  return fetchProductSeoMetadata(productId, pageUrl, "Biomket", "Biomket marketplace");
}

export default async function MarketplaceProductByPathPage({ params }: Props) {
  const { path: segments } = await params;
  const list = Array.isArray(segments) ? segments : [];
  if (list.length < 1 || list.length > 3) notFound();

  const productId = decodeURIComponent(String(list[list.length - 1] ?? "")).trim();
  if (!productId) notFound();
  const product = await getProductForSchema(productId);
  const productUrl = `/marketplace/${list.map((segment) => encodeURIComponent(segment)).join("/")}`;
  const schema = product
    ? await productSchema(
        {
          title: product?.title,
          sku: product?.sku ?? product?.code ?? "",
          description: product?.description,
          images: Array.isArray(product?.images) ? product.images : [],
          price_amount: product?.price_amount,
          currency_symbol: product?.currency_symbol,
        },
        productUrl
      )
    : null;
  return (
    <>
      {schema ? (
        <script
          type="application/ld+json"
          dangerouslySetInnerHTML={{ __html: JSON.stringify(schema) }}
        />
      ) : null}
      <BackgroundGradients count={MARKETPLACE_PRODUCT_ZIGZAG_COUNT} />
      <ProductDetailPage productId={productId} />
      <div className="relative px-5 sm:px-10 xl:max-w-[1440px] 2xl:max-w-[1920px] mx-auto">
        <Footer />
      </div>
    </>
  );
}