// preview page.tsx
"use client"

export default function PreviewPage() {
  const [data, setData] = useState(null)

    useEffect(() => {
    const handler = (event: MessageEvent) => {
      if (event.origin !== window.location.origin) return
      if (event.data.type === "PREVIEW_DATA") {
        setData(event.data.payload)
      }
    };

    window.addEventListener("message", handler)
    return () => window.removeEventListener("message", handler)
  }, [])

  if (!data) return <div>Loading ...</div>

  return (
    // handle data display
  )
}

// components/preview/preview-window.tsx
"use client"

export default function PreviewWindow() {
  // grab data from your context holdign it or state mgmt library
  const { data } = useContent()
  const iframeRef = useRef<HTMLIFrameElement>(null)

  // update iframe when data changes
  useEffect(() => {
    iframeRef.current?.contentWindow?.postMessage({
      type: "PREVIEW_DATA",
      payload: siteData
    }, window.location.origin)
  }, [siteData])

  return (
    <iframe 
      ref={iframeRef}
      src="/preview" 
    />
  )
}

export default function GeneratePage() {

  const data = calculateData() //this takes 5s

  const handler =  () => {
    targetFrame.postMessage(data, targetOrigin);
  });
  useEffect(() => {
    window.addEventListener("message", handler)
    return () => window.removeEventListener("message", handler)
  }, [])

  if (!data) return <div>Loading ...</div>

  return (
    // handle data display
  )
}

useEffect(() => {
  evaluateMdxRef.current = debounce(async (mdxContent: string) => {
    setIsEvaluating(true)
    try {
      setError(null)

      const evaluateOptions: EvaluateOptions = {
        ...(isDevelopment ? devRuntime : runtime),
        Fragment: isDevelopment ? devRuntime.Fragment : runtime.Fragment,
        useMDXComponents: () => components,
        development: isDevelopment,
        remarkPlugins: [remarkAlert, remarkGfm, remarkSpell, remarkGroupCheckboxes],
        rehypePlugins: [rehypeGroupHeaders],
      }

      const evaluated = await evaluate(mdxContent, evaluateOptions) //this

      setMdxModule(evaluated as MdxModule)
    } catch (err: unknown) {
      console.error('MDX Evaluation Error:', err)
      const message =
        err instanceof Error
          ? err.message
          : 'An unknown error occurred during preview generation.'
      setError(`Preview Error: ${message}`)
      setMdxModule(null)
    } finally {
      setIsEvaluating(false)
    }
  }, 500)
}, [])