@kentcdodds/package-app-kit

/** @jsxRuntime automatic */
/** @jsxImportSource remix/ui */
import type { RequestContext } from 'remix/router'
import { KodyRuntime } from 'kody:runtime'
import type { RemixNode } from 'remix/ui'
import { renderToStream } from 'remix/ui/server'
import { createHtmlResponse } from 'remix/response/html'
import { Document } from './document.tsx'
import { ErrorBanner } from './error-banner.tsx'
import { toErrorMessage } from '../../src/error-display.ts'

export function render(
	context: RequestContext,
	children: RemixNode,
	init?: ResponseInit & { title?: string; page?: string; runningSha?: string },
) {
	const { packageContext } = context.get(KodyRuntime)
	const title = init?.title ?? 'Package App Kit'
	const { title: _t, page: _p, runningSha: _r, ...responseInit } = init ?? {}

	try {
		const stream = renderToStream(
			<Document
				title={title}
				page={init?.page}
				runningSha={init?.runningSha}
				appBasePath={packageContext?.appBasePath ?? ''}
				assetBasePath={packageContext?.assetBasePath ?? ''}
				clientModuleUrl={packageContext?.clientModuleUrl ?? null}
			>
				{children}
			</Document>,
			{
				frameSrc: context.url.href,
				onError(error) {
					console.error('SSR render error:', error)
				},
			},
		)
		return createHtmlResponse(stream, responseInit)
	} catch (error) {
		const message = toErrorMessage(error)
		console.error('SSR render failed:', error)
		const stream = renderToStream(
			<Document
				title={`Error · ${title}`}
				page={init?.page}
				runningSha={init?.runningSha}
				appBasePath={packageContext?.appBasePath ?? ''}
				assetBasePath={packageContext?.assetBasePath ?? ''}
				clientModuleUrl={packageContext?.clientModuleUrl ?? null}
			>
				<div class="pak-wrap pak-stack">
					<ErrorBanner title="Something went wrong" message={message} detail={message} />
				</div>
			</Document>,
			{ frameSrc: context.url.href },
		)
		return createHtmlResponse(stream, { ...responseInit, status: responseInit.status ?? 500 })
	}
}