import { createFileRoute } from "@tanstack/react-router"
import {
	PreviewBlockHost,
	type PreviewBlockSearch,
	parsePreviewData,
	validatePreviewBlockSearch,
} from "@wp-reactor/editorial"
import { blockRegistry } from "@/blocks"

// Route iframe du live-preview. L'éditeur Gutenberg (FrontPreviewFrame de
// @wp-reactor/block-editor) pointe ici ; PreviewBlockHost gère tout le protocole
// postMessage avec le registre de blocs du client.
export const Route = createFileRoute("/preview")({
	validateSearch: (search): PreviewBlockSearch =>
		validatePreviewBlockSearch(search),
	component: PreviewPage,
})

function PreviewPage() {
	const search = Route.useSearch()
	const block = search.block ?? "__BLOCK_NAMESPACE__/hero"
	return (
		<PreviewBlockHost
			key={`${search.frame ?? "no-frame"}-${block}`}
			registry={blockRegistry}
			block={block}
			frame={search.frame}
			editorOrigin={search.editorOrigin}
			initialData={parsePreviewData(search.data)}
		/>
	)
}