"use client"

import * as React from "react"
import { Navigate } from "react-router"
import {
  useAppStore,
  hasConfiguredCustomProducts,
  isListedCustomProduct,
} from "@exxatdesignux/product-framework/app-store"
import { startupDashboardPath } from "@exxatdesignux/product-framework/product-ref"
import { usePersistHydrated } from "../../hooks/use-persist-hydrated"

export interface DefaultProductRedirectProps {
  /**
   * Rendered while the persisted store is hydrating from localStorage.
   * Defaults to `null`. Pass a skeleton for a smoother cold-start paint.
   */
  loadingFallback?: React.ReactNode
}

/**
 * Cold-start `/` → tenant default product dashboard (falls back to Prism).
 * Mount as the `element` of the root `/` route in your router.
 */
export function DefaultProductRedirect({
  loadingFallback = null,
}: DefaultProductRedirectProps = {}) {
  const startupProduct = useAppStore(s => s.startupProduct)
  const customProducts = useAppStore(s => s.customProducts)
  const hydrated = usePersistHydrated()

  const waitsForCustomCatalog =
    startupProduct?.product === "exxat-custom" &&
    !hasConfiguredCustomProducts(customProducts)

  if (!hydrated || waitsForCustomCatalog) {
    return <>{loadingFallback}</>
  }

  let target = startupDashboardPath(startupProduct, customProducts)
  if (startupProduct?.product === "exxat-custom") {
    const idx = startupProduct.customIndex ?? 0
    if (!isListedCustomProduct(customProducts[idx])) {
      target = startupDashboardPath(null, customProducts)
    }
  }

  return <Navigate to={target} replace />
}