"use client"

import * as React from "react"
import { useProductAuthoringEnabled } from "./product-authoring-context"

/**
 * When builder authoring is on in dev, auto-writes `public/tenant-products.json`
 * so products + entities + hub table state survive hard refresh and clear site data.
 */
export function BuilderDevSync() {
  const authoring = useProductAuthoringEnabled()

  React.useEffect(() => {
    if (!authoring) return
    let stop = () => {}
    let cancelled = false

    void (async () => {
      const [
        { ensureShippedCatalogLoaded },
        {
          isBuilderDevSyncEnvironment,
          markBuilderDevSyncReady,
          startBuilderDevSync,
        },
      ] = await Promise.all([
        import("@exxatdesignux/product-framework/tenant-products/shipped-catalog"),
        import("@exxatdesignux/product-framework/tenant-products/builder-dev-sync"),
      ])
      if (cancelled || !isBuilderDevSyncEnvironment()) return
      // Wait for disk → localStorage merge before any POST. Fresh sessions
      // hold an empty catalog until this resolves; syncing earlier clobbers
      // `public/tenant-products.json`.
      await ensureShippedCatalogLoaded()
      if (cancelled) return
      markBuilderDevSyncReady()
      stop = startBuilderDevSync()
    })()

    return () => {
      cancelled = true
      stop()
    }
  }, [authoring])

  return null
}