import type { CategoryDetail } from 'brainerce';
import { buildCollectionPageJsonLd, buildBreadcrumbJsonLd } from 'brainerce';
import { getNonce } from '@/core/lib/nonce';
import { getCanonicalSiteUrl } from '@/core/lib/site-url';

interface CategoryJsonLdProps {
  category: CategoryDetail;
  url: string;
}

/**
 * CollectionPage + BreadcrumbList structured data for a category (collection)
 * landing page. NEVER emit Product markup on a listing page — Google's Product
 * rich results are single-product only (see ProductJsonLd for PDPs).
 *
 * Uses the SDK builders for the schema shape, but renders the <script> here so
 * we can attach the CSP nonce (the SDK's jsonLdScriptProps can't).
 */
export async function CategoryJsonLd({ category, url }: CategoryJsonLdProps) {
  const nonce = await getNonce();
  const baseUrl = await getCanonicalSiteUrl();

  const collectionJsonLd = buildCollectionPageJsonLd(category, { siteUrl: baseUrl, path: url });

  // Breadcrumb: Home → ancestor categories → this category.
  const crumbs: Array<{ name: string; url: string }> = [{ name: 'Home', url: baseUrl || '/' }];
  for (const ancestor of category.breadcrumb) {
    if (ancestor.slug) {
      crumbs.push({ name: ancestor.name, url: `${baseUrl}/category/${ancestor.slug}` });
    }
  }
  crumbs.push({ name: category.name, url });
  const breadcrumbJsonLd = buildBreadcrumbJsonLd(crumbs);

  return (
    <>
      <script
        type="application/ld+json"
        nonce={nonce}
        suppressHydrationWarning
        dangerouslySetInnerHTML={{ __html: serializeJsonLd(collectionJsonLd) }}
      />
      <script
        type="application/ld+json"
        nonce={nonce}
        suppressHydrationWarning
        dangerouslySetInnerHTML={{ __html: serializeJsonLd(breadcrumbJsonLd) }}
      />
    </>
  );
}

// Escape `<`, `>`, `&` so merchant-authored category copy can't break out of
// the <script> element or inject HTML.
function serializeJsonLd(value: unknown): string {
  return JSON.stringify(value)
    .replace(/</g, '\\u003c')
    .replace(/>/g, '\\u003e')
    .replace(/&/g, '\\u0026');
}