"use client"

import * as React from "react"
import {
  getTenantProductData,
  setTenantProductData,
} from "@exxatdesignux/product-framework/tenant-products/data"

/**
 * Persist arbitrary per-product state inside `exxat-ds:tenant-store:v1`
 * (survives deploys; cleared only when the product is deleted).
 *
 * @param productId — stable id (`tenant-<slug>` or `defineProduct` id)
 * @param path — dotted path under `hubs.`, `entities.`, `preferences.`, or `extensions.`
 */
export function useTenantProductData<T>(
  productId: string,
  path: string,
  defaultValue: T,
): [T, (next: T | ((prev: T) => T)) => void] {
  const [value, setValue] = React.useState<T>(() =>
    typeof window === "undefined" ? defaultValue : getTenantProductData(productId, path, defaultValue),
  )

  React.useLayoutEffect(() => {
    setValue(getTenantProductData(productId, path, defaultValue))
  }, [productId, path, defaultValue])

  const setPersisted = React.useCallback(
    (next: T | ((prev: T) => T)) => {
      setValue(prev => {
        const resolved = typeof next === "function" ? (next as (p: T) => T)(prev) : next
        setTenantProductData(productId, path, resolved)
        return resolved
      })
    },
    [productId, path],
  )

  return [value, setPersisted]
}