since3-portal/modules/templates/ui/components/live-preview.tsx

"use client"

import { useEffect, useState } from "react"
import type { AiAccess } from "../../ai/demos"
import { resolveContent } from "../../lib/content"
import { PREVIEW_CONTENT, PREVIEW_READY } from "../../lib/preview"
import { getTemplate } from "../../lib/registry"
import type { TemplateContent } from "../../lib/types"
import { TemplateRenderer } from "./template-renderer"

// Läuft im iframe des Editors und übernimmt ungespeicherte Änderungen per postMessage
export function LivePreview({ templateKey, initialContent, access }: {
    templateKey: string
    initialContent: TemplateContent
    access: AiAccess | null
}) {
    const [content, setContent] = useState(initialContent)

    useEffect(() => {
        const def = getTemplate(templateKey)
        if (!def) return

        function onMessage(event: MessageEvent) {
            if (event.origin !== window.location.origin || event.data?.type !== PREVIEW_CONTENT || !def) return
            setContent(resolveContent(def, event.data.content))
        }

        window.addEventListener("message", onMessage)
        window.parent.postMessage({ type: PREVIEW_READY }, window.location.origin)
        return () => window.removeEventListener("message", onMessage)
    }, [templateKey])

    return <TemplateRenderer templateKey={templateKey} content={content} access={access} />
}