"use client";

import { webpageSchema } from "@/lib/schema";
import { useEffect, useState } from "react";

type StaticPageSchemaProps = {
  apiSlug: string;
  pageUrl: string;
  fallbackTitle: string;
  fallbackDescription: string;
};

export default function StaticPageSchema({
  apiSlug,
  pageUrl,
  fallbackTitle,
  fallbackDescription,
}: StaticPageSchemaProps) {
  const [schemaJson, setSchemaJson] = useState<string>("");

  useEffect(() => {
    let isMounted = true;

    const loadSchema = async () => {
      let title = fallbackTitle;
      let description = fallbackDescription;

      const base = process.env.NEXT_PUBLIC_MEDUSA_BACKEND_URL;
      if (base) {
        try {
          const res = await fetch(`${base}/store/pages/${apiSlug}`, {
            method: "GET",
            headers: {
              "x-publishable-api-key": process.env.NEXT_PUBLIC_MEDUSA_PUBLISHABLE_API_KEY || "",
            },
            cache: "no-store",
          });

          if (res.ok) {
            const pageData = await res.json();
            title = pageData?.page?.page?.title ?? title;
            description = pageData?.page?.page?.description ?? description;
          }
        } catch {
        }
      }

      const schema = await webpageSchema({ title, description, url: pageUrl });
      if (isMounted) {
        setSchemaJson(JSON.stringify(schema));
      }
    };

    void loadSchema();

    return () => {
      isMounted = false;
    };
  }, [apiSlug, fallbackDescription, fallbackTitle, pageUrl]);

  if (!schemaJson) return null;

  return <script type="application/ld+json" dangerouslySetInnerHTML={{ __html: schemaJson }} />;
}