import { createFileRoute, notFound } from "@tanstack/react-router"
import { buildRankMathHead, EditorBlocks } from "@wp-reactor/editorial"
import { blockRegistry } from "@/blocks"
import { seoHeadOptions } from "@/editorial/model/seo"
import { isDev } from "@/env"

// Route catch-all de contenu WordPress. Le pattern framework de bout en bout :
//   1. le loader résout le nœud par URI via la plateforme de lecture publique
//      (`platform.page.byUriQueryOptions`) : document client + cache SSR + driver
//      sont déclarés une fois dans `platform.ts` ;
//   2. `head` construit les <meta>/<link> SEO RankMath depuis le même nœud ;
//   3. `EditorBlocks` rend `editorBlocks` via le registre de blocs du client.
// `/` et `/preview` (routes statiques) priment ; `$uri` attrape le reste.
export const Route = createFileRoute("/$uri")({
	loader: async ({ context, params: { uri } }) => {
		const node = await context.queryClient.ensureQueryData(
			context.platform.page.byUriQueryOptions(`/${uri}/`),
		)
		if (!node) throw notFound()
		return { node }
	},
	head: ({ loaderData }) =>
		buildRankMathHead(loaderData?.node.seo, seoHeadOptions),
	component: UriPage,
})

function UriPage() {
	const { node } = Route.useLoaderData()
	return (
		<main>
			<EditorBlocks
				blocks={node.editorBlocks ?? []}
				registry={blockRegistry}
				dev={isDev}
			/>
		</main>
	)
}