import { useParams } from "react-router-dom"

import ProductComingSoon from "./_product-coming-soon"
import { useProduct } from "@/contexts/product-context"
import { getRegisteredProductBySlug } from "@exxatdesignux/product-framework"
import { customProductSlugFromSuffix } from "@/lib/product-routing"

/**
 * Generic hub placeholder for tenant product routes shipped via
 * `tenant-products.json` + `:productRootSegment/*` shell routes.
 */
export default function ProductShellPlaceholder() {
  const { productRootSegment = "" } = useParams()
  const { customProducts, activeCustomIndex } = useProduct()
  const registered = getRegisteredProductBySlug(productRootSegment)
  const brand = customProducts[activeCustomIndex]
  const slug =
    registered?.slug ??
    (brand?.suffix?.trim()
      ? customProductSlugFromSuffix(brand.suffix)
      : productRootSegment)

  return (
    <div className="flex min-h-0 flex-1 flex-col">
      <div className="border-b border-border px-6 py-3 text-xs text-muted-foreground">
        <span className="font-medium text-foreground">/{slug}</span> is a scaffolded
        tenant product route. Keep domain data here; keep reusable UI in the DS.
      </div>
      <ProductComingSoon />
    </div>
  )
}
