数据流

// 面板前端代码（React）
async function loadTemplateData(path: string, dataName: string) {
  // GET /__ktr/api/data?path=hello/card&name=basic
  const response = await fetch(`/__ktr/api/data?path=${path}&name=${dataName}`)

  return await response.json()
}

export async function handleDataRequest(req: any, res: any) {
  // GET /__ktr/api/data?path=hello/card&name=default
  const url = new URL(req.url, 'http://localhost')
  const templatePath = url.searchParams.get('path')!
  const name = url.searchParams.get('name')!

  // 优先级 1：JSON mock（面板可编辑）
  const jsonPath = path.join(config.mockDataDir, templatePath, 'data', `${name}.json`)
  if (fs.existsSync(jsonPath)) {
    const data = JSON.parse(fs.readFileSync(jsonPath, 'utf-8'))
    return json(res, 200, { name, source: 'json', readonly: false, data })
  }

  // 优先级 2：TS mock（面板只读）
  const tsMock = (await loadTsMocks(templatePath)).find((mock) => mock.name === name)
  if (tsMock) {
    return json(res, 200, { name, source: 'ts', readonly: true, data: tsMock.data })
  }

  // 未找到
  json(res, 404, { error: 'Data entry not found' })
}

// 面板代码
function renderTemplate(path: string, data: any, ctx?: any) {
  const iframe = document.querySelector('#sandbox-iframe') as HTMLIFrameElement

  iframe.contentWindow?.postMessage(
    {
      source: 'ktr-panel',
      type: 'ktr:data',
      payload: { path, data, ctx }
    },
    '*'
  )
}

// 面板 → 沙盒消息类型
type PanelMessage =
  | { source: 'ktr-panel'; type: 'ktr:select'; payload: { path: string } }
  | { source: 'ktr-panel'; type: 'ktr:data'; payload: { path: string; data: unknown; ctx?: Record<string, unknown> } }
  | { source: 'ktr-panel'; type: 'ktr:theme'; payload: { theme?: Partial<ThemeContext> } }
  | { source: 'ktr-panel'; type: 'ktr:inspect'; payload: { enabled: boolean } }

// 沙盒 → 面板消息类型
type SandboxMessage =
  | { source: 'ktr-sandbox'; type: 'ktr:ready'; payload: { templates: Array<{ path: string; name?: string }> } }
  | { source: 'ktr-sandbox'; type: 'ktr:register-progress'; payload: { loaded: number; total: number; path: string } }
  | { source: 'ktr-sandbox'; type: 'ktr:rendered'; payload: { path: string; elapsed: number; size?: { width: number; height: number } } }
  | { source: 'ktr-sandbox'; type: 'ktr:error'; payload: { path?: string; message: string } }

// 1. 预加载所有模板组件
const templates: Record<string, any> = {}

// 逐个动态导入（串行，可见进度）
const templatePaths = ['hello/card', 'user/profile']

for (let i = 0; i < templatePaths.length; i++) {
  const path = templatePaths[i]
  templates[path] = (await loadTemplateModule(path)).default

  // 上报加载进度
  window.parent.postMessage(
    {
      source: 'ktr-sandbox',
      type: 'ktr:register-progress',
      payload: { loaded: i + 1, total: templatePaths.length, path }
    },
    '*'
  )
}

// 通知面板加载完成
window.parent.postMessage(
  {
    source: 'ktr-sandbox',
    type: 'ktr:ready',
    payload: { templates: templatePaths.map((path) => ({ path })) }
  },
  '*'
)

// 2. 监听面板消息
let currentRoot: Root | null = null

window.addEventListener('message', (event) => {
  if (event.data.type === 'ktr:data') {
    const { path, data, ctx } = event.data.payload
    renderTemplate(path, data, ctx)
  }
})

// 3. 渲染函数
async function renderTemplate(path: string, data: any, ctx?: any) {
  const Component = templates[path]
  if (!Component) {
    console.error(`Template not found: ${path}`)
    return
  }

  const container = document.getElementById('container')
  if (!container) return

  // 创建或复用 React root
  if (!currentRoot) {
    currentRoot = createRoot(container)
  }

  // 渲染组件
  currentRoot.render(<Component data={data} ctx={ctx} />)

  // 4. 等待渲染稳定，测量尺寸
  await waitForStableSize(container)

  const { width, height } = container.getBoundingClientRect()

  // 5. 上报渲染完成
  window.parent.postMessage(
    {
      source: 'ktr-sandbox',
      type: 'ktr:rendered',
      payload: { path, elapsed: 0, size: { width, height } }
    },
    '*'
  )
}

// 等待元素尺寸稳定（连续 3 帧无变化）
async function waitForStableSize(element: HTMLElement) {
  let stableCount = 0
  let lastSize = { width: 0, height: 0 }

  while (stableCount < 3) {
    await new Promise((resolve) => requestAnimationFrame(resolve))

    const { width, height } = element.getBoundingClientRect()

    if (width === lastSize.width && height === lastSize.height) {
      stableCount++
    } else {
      stableCount = 0
    }

    lastSize = { width, height }
  }
}

// 面板代码
window.addEventListener('message', (event) => {
  if (event.data.type === 'ktr:rendered') {
    const { path, size } = event.data.payload

    // 更新画布尺寸显示
    updateCanvasSize(size.width, size.height)

    // 自动适应视口
    fitToViewport()
  }
})

function updateCanvasSize(width: number, height: number) {
  const iframe = document.querySelector('#sandbox-iframe') as HTMLIFrameElement
  iframe.style.width = `${width}px`
  iframe.style.height = `${height}px`
}

function fitToViewport() {
  const canvas = document.querySelector('.canvas-container') as HTMLElement
  const iframe = canvas.querySelector('iframe') as HTMLIFrameElement

  const canvasRect = canvas.getBoundingClientRect()
  const iframeRect = iframe.getBoundingClientRect()

  // 计算缩放比例（留 20px 边距）
  const scaleX = (canvasRect.width - 40) / iframeRect.width
  const scaleY = (canvasRect.height - 40) / iframeRect.height
  const scale = Math.min(scaleX, scaleY, 1)

  iframe.style.transform = `scale(${scale})`
}

// 用户插件代码
import { renderImage } from './utils/render'

// Karin 指令处理函数
export async function handleCommand(e: any) {
  const images = await renderImage(
    'hello/card',
    {
      title: 'Karin Template React',
      items: [
        { label: '渲染方式', value: 'SSR HTML' },
        { label: '框架', value: 'React 19' }
      ]
    },
    {
      theme: { mode: 'dark', accent: 'oklch(0.62 0.19 254)' }
    }
  )

  await e.reply(images)
}

export function createTemplateRenderer(callerUrl: string) {
  // 1. 定位包根（从 import.meta.url 向上找 package.json）
  const root = findPackageRoot(callerUrl)

  // 惰性初始化：首次渲染时才解析配置、加载注册表
  let rendererPromise: Promise<ReturnType<typeof createRenderer>> | undefined

  return async (templatePath: string, data: any, ctx?: any) => {
    rendererPromise ??= (async () => {
      // 2. 加载配置（karin.template.ts + 默认值；渲染器自身在 bundle 里时跳过，直接用默认值）
      const config = await resolveConfig({ cwd: root })

      // 3. 加载注册表（bundle 里直接用产物；否则优先 .ktr/ 源文件，回退到打包产物）
      const templates = await loadTemplateRegistry({ root })

      // 4. 创建渲染器（CSS 开发态用缓存、生产态用打包产物）
      return createRenderer(templates, {
        cssPath: resolveTemplateStyle(),
        outputDir: `${config.outDir}/html`,
        captureDir: config.templateDir
      })
    })()

    const render = await rendererPromise
    return render(templatePath, data, ctx)
  }
}

export function createRenderer(templates: Record<string, any>, options: any) {
  const { outputDir, plugins = [] } = options

  return async function render(templatePath: string, data: any, ctx?: any) {
    // 1. 获取模板定义
    const template = templates[templatePath]
    if (!template) {
      return { success: false, htmlPath: '', error: `Template is not registered: ${templatePath}` }
    }

    // 2. 执行 beforeRender 钩子
    await runBeforeHooks(plugins, { path: templatePath, data, ctx })

    // 3. React 流式 SSR：等 allReady 后一次性读出完整 HTML
    const stream = await renderToReadableStream(React.createElement(template.component, { data, ctx }))
    await stream.allReady
    const bodyHtml = await new Response(stream).text()

    // 4. 执行 afterRender 钩子（可加工 HTML）
    const html = await runAfterHooks(plugins, bodyHtml, { path: templatePath, data, ctx })

    // 5. 包装 HTML 外壳（内联 CSS + 主题变量），写入文件
    const filename = templatePath.replace(/\//g, '_') + '.html'
    const htmlPath = path.join(outputDir, filename)
    fs.mkdirSync(outputDir, { recursive: true })
    fs.writeFileSync(htmlPath, wrapHtml(html, ctx), 'utf-8')

    return { success: true, htmlPath }
  }
}

export function wrapHtml(bodyHtml: string, options: { theme?: Partial<ThemeContext> }): string {
  const { theme } = options

  // 只注入显式提供的主题字段；未提供时不输出任何变量，组件库自身主题生效
  const themeVars = theme ? generateThemeVariables(theme) : ''
  const mode = theme?.mode

  return `<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <style>${inlineCss}</style>
</head>
<body class="${mode === 'dark' ? 'dark' : ''}"${mode ? ` data-theme="${mode}"` : ''} style="${themeVars}">
  <div id="container">${bodyHtml}</div>
</body>
</html>`
}

function generateThemeVariables(theme: Partial<ThemeContext>): string {
  const vars: string[] = []

  // 变量名与 HeroUI 语义色一一对应，只输出显式提供的字段
  if (theme.accent) vars.push(`--accent: ${theme.accent}`)
  if (theme.background) vars.push(`--background: ${theme.background}`)
  if (theme.foreground) vars.push(`--foreground: ${theme.foreground}`)
  if (theme.surface) vars.push(`--surface: ${theme.surface}`)
  if (theme.border) vars.push(`--border: ${theme.border}`)
  // 其余语义色同理，theme.vars 里的任意变量追加在最后

  return vars.join('; ')
}

// Karin 框架内部代码（示意）
import puppeteer from 'puppeteer'

export async function screenshot(htmlPath: string): Promise<Uint8Array> {
  const browser = await puppeteer.launch({
    headless: true,
    args: ['--no-sandbox', '--disable-setuid-sandbox']
  })

  const page = await browser.newPage()

  // 加载 HTML 文件
  await page.goto(`file://${htmlPath}`, {
    waitUntil: 'networkidle0'
  })

  // 获取 #container 元素尺寸
  const element = await page.$('#container')
  if (!element) {
    throw new Error('Container element not found')
  }

  // 截图
  const image = await element.screenshot({
    type: 'png',
    omitBackground: true // 透明背景
  })

  await browser.close()

  return image
}

// ktr/template/hello/card/mock.ts
import type { HelloCardData } from './index'

export const basic = {
  title: 'Karin Template React',
  items: [{ label: '渲染方式', value: 'SSR HTML' }]
} satisfies HelloCardData

export const empty = {
  title: '空状态',
  items: []
} satisfies HelloCardData

// runtime/capture.ts（简化示意）
import * as fs from 'node:fs'
import * as path from 'node:path'

export function captureRenderData(templatePath: string, data: any, ctx: any, templateDir: string) {
  const captureDir = path.join(templateDir, templatePath, 'data')

  // 目录不存在时自动创建
  fs.mkdirSync(captureDir, { recursive: true })

  // 写入 { data, ctx } 完整快照（覆盖，只保留最近一次）
  fs.writeFileSync(path.join(captureDir, 'captured.json'), JSON.stringify({ data, ctx }, null, 2))
}

async function loadData(templatePath: string, dataName: string) {
  // 1. 优先 JSON mock（面板可编辑）
  const jsonFile = `${templatePath}/data/${dataName}.json`
  if (fs.existsSync(jsonFile)) {
    return JSON.parse(fs.readFileSync(jsonFile, 'utf-8'))
  }

  // 2. 回退 TS mock（面板只读）
  const tsMocks = await loadTsMocks(templatePath)
  if (tsMocks[dataName]) {
    return tsMocks[dataName]
  }

  throw new Error('Data entry not found')
}

function handleThemeChange(theme: any) {
  // 发送给沙盒
  iframe.contentWindow?.postMessage(
    {
      source: 'ktr-panel',
      type: 'ktr:theme',
      payload: { theme }
    },
    '*'
  )

  // 同时更新面板本地状态
  setCurrentTheme(theme)
}

window.addEventListener('message', (event) => {
  if (event.data.type === 'ktr:theme') {
    const { theme } = event.data.payload

    // 重新渲染当前模板，传入新主题
    renderTemplate(currentPath, currentData, { ...currentCtx, theme })
  }
})

await renderImage('hello/card', data, {
  theme: {
    mode: 'dark',
    accent: 'oklch(0.62 0.19 254)',
    background: 'oklch(0.15 0.01 254)',
    foreground: 'oklch(0.95 0.01 254)'
  }
})

// runtime/html-wrapper.ts（示意）
function generateThemeVariables(theme?: any): string {
  if (!theme) return '' // 未提供主题，不注入任何变量

  const vars: string[] = []

  // 只输出显式提供的字段
  if (theme.accent !== undefined) vars.push(`--accent: ${theme.accent}`)
  if (theme.background !== undefined) vars.push(`--background: ${theme.background}`)
  // ... 其他字段

  return vars.join('; ')
}