开发面板架构

interface TemplateMeta {
  path: string
  name?: string
  description?: string
}

export function useTemplateList() {
  const [templates, setTemplates] = useState<TemplateMeta[]>([])

  useEffect(() => {
    // GET /__ktr/api/templates → { templates: [...] }
    fetch('/__ktr/api/templates')
      .then((res) => res.json())
      .then((body) => setTemplates(body.templates))
  }, [])

  return templates
}

function sendTemplateData(path: string, data: unknown) {
  const iframe = getIframe()
  iframe.contentWindow?.postMessage(
    {
      source: 'ktr-panel',
      type: 'ktr:data',
      payload: { path, data, ctx: getCurrentContext() }
    },
    window.location.origin
  )
}

export async function sandboxCode(): Promise<string> {
  // 逐路由动态导入而不是整包导入 .ktr 注册表：
  // 注册表是单模块，导入即同步拉起全部模板，无法按模块粒度上报进度
  const routes = await discoverTemplateRoutes(config.templateDir)
  const loaderItems = routes
    .map((item) => `  ['${item.route}', () => import('/@fs/${path.join(config.templateDir, item.file)}')]`)
    .join(',\n')

  return `
import React from 'react'
import { createRoot } from 'react-dom/client'

const templateLoaders = [
${loaderItems}
]
const templates = {}

// 逐个加载模板，每完成一个上报一次进度
for (const [route, load] of templateLoaders) {
  templates[route] = (await load()).default
  window.parent.postMessage({
    source: 'ktr-sandbox',
    type: 'ktr:register-progress',
    payload: { loaded: Object.keys(templates).length, total: templateLoaders.length, path: route }
  }, window.location.origin)
}

// 全部加载完，上报模板元信息
window.parent.postMessage({
  source: 'ktr-sandbox',
  type: 'ktr:ready',
  payload: { templates: Object.entries(templates).map(([path, def]) => ({ path, name: def.name, description: def.description })) }
}, window.location.origin)
`
}

const themeVarNames = [
  ['--background', 'background'],
  ['--foreground', 'foreground'],
  ['--accent', 'accent'],
  ['--accent-foreground', 'accentForeground']
  // 其余语义色同理
] as const

function applyTheme(theme: Partial<ThemeContext>) {
  const mode = theme.mode === 'dark' ? 'dark' : 'light'
  document.documentElement.classList.toggle('dark', mode === 'dark')
  document.body.dataset.theme = mode

  for (const [name, key] of themeVarNames) {
    const value = theme[key]
    // 显式提供的写入，未提供的移除——框架不发明默认色，组件库自身主题生效
    if (typeof value === 'string' && value) {
      document.documentElement.style.setProperty(name, value)
    } else {
      document.documentElement.style.removeProperty(name)
    }
  }
}

function reportRendered(startedAt: number) {
  let lastWidth = 0
  let lastHeight = 0
  let stableFrames = 0

  const tick = () => {
    const rect = document.getElementById('container')!.getBoundingClientRect()
    const width = Math.max(1, Math.ceil(rect.width))
    const height = Math.max(1, Math.ceil(rect.height))

    stableFrames = width === lastWidth && height === lastHeight ? stableFrames + 1 : 0
    lastWidth = width
    lastHeight = height

    if (stableFrames < 3) {
      requestAnimationFrame(tick)
      return
    }

    post('ktr:rendered', {
      path: selectedPath,
      elapsed: Math.round(performance.now() - startedAt),
      size: { width, height }
    })
  }

  requestAnimationFrame(tick)
}

// ===== 面板 → 沙盒消息 =====
export 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:panel-theme'; payload: { dark: boolean } }
  | { source: 'ktr-panel'; type: 'ktr:inspect'; payload: { enabled: boolean } }

// ===== 沙盒 → 面板消息 =====
export type SandboxMessage =
  | { source: 'ktr-sandbox'; type: 'ktr:ready'; payload: { templates: Array<{ path: string; name?: string; description?: 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; stack?: string } }
  | { source: 'ktr-sandbox'; type: 'ktr:hmr'; payload: { path: string } }

export async function readDataEntry(req: any, res: any) {
  const url = new URL(req.url, 'http://ktr.local')
  const templatePath = url.searchParams.get('path')!
  const name = url.searchParams.get('name')!

  // 1. 优先 JSON mock（面板可编辑）
  const jsonFile = path.join(config.mockDataDir, templatePath, 'data', `${name}.json`)
  if (fs.existsSync(jsonFile)) {
    const data = JSON.parse(fs.readFileSync(jsonFile, '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' })
}

export function registerDataWatch(server: ViteDevServer) {
  server.watcher.add(config.mockDataDir)

  const notify = (file: string) => {
    // 只有各模板 data/ 子目录里的 JSON 才推送给面板
    if (!file.endsWith('.json') || !file.includes('data')) return

    // 去抖后广播：{ templatePath: 'hello/card', file: 'captured.json' }
    broadcast({ templatePath: 'hello/card', file: file.split('/').pop()! })
  }

  server.watcher.on('add', notify)
  server.watcher.on('change', notify)
  server.watcher.on('unlink', notify)
}

export function useDataFileSync() {
  const eventSource = new EventSource('/__ktr/api/stream')

  eventSource.addEventListener('ktr:data-files-changed', (event) => {
    const { templatePath, file } = JSON.parse((event as MessageEvent).data)
    handleDataFilesChanged(templatePath, file)
  })

  return () => eventSource.close()
}