// .ktr/registry-types.d.ts（框架自动生成）
export {}

declare module '@karinjs/template-react/registry-types' {
  interface ProjectRegistry {
    'hello/card': typeof import('../ktr/template/hello/card/index.tsx').default
    'hello/list': typeof import('../ktr/template/hello/list/index.tsx').default
  }
}

import { renderImage } from '../utils/render'

// ❌ 路由字符串任意写，data 结构错误也不报红
await renderImage('hello/card', { wrongField: 123 })

/** 注册表类型：.ktr/registry-types.d.ts 模块增强生效后为逐路由精确类型。 */
type Registry = LoadedRegistry

/**
 * 渲染模板并交给 Karin Puppeteer 截图，返回可直接 reply 的图片消息元素。
 */
export const renderImage = async <K extends keyof Registry & string>(
  templatePath: K,
  data: DataOf<Registry[K]>,
  options?: Record<string, unknown>
): Promise<ImageElement[]> => {
  const { success, htmlPath, error } = await renderTemplate(templatePath, data)
  if (!success) {
    throw new Error(`模板渲染失败 ${templatePath}：${error}`)
  }

  const result = await render.render({
    name: `${dir.pluginName}/${templatePath}`,
    file: htmlPath,
    selector: '#container',
    type: 'png',
    omitBackground: true,
    ...options
  })

  const list = Array.isArray(result) ? result : [result]
  return list.map((img) => segment.image(`base64://${img}`))
}

// ❌ 泛型约束丢失：路由是任意 string，data 是 any
export const renderImage = async (templatePath: string, data: any) => {
  /* ... */
}

// ❌ 这样也不算数：keyof any 等于没有约束
// export const renderImage = async <K extends keyof any>(templatePath: K, data: any) => { ... }

import { defineTemplate, type TemplateProps } from '@karinjs/template-react'

interface CardData {
  title: string
  items: Array<{ label: string; value: string }>
}

// ❌ data 类型丢失：泛型写成了 any
const Card = ({ data }: TemplateProps<any>) => (
  <div>{data.title}</div>
        
data: any
当前模板使用的数据，类型由 defineTemplate 的泛型决定。
)

import { defineTemplate, type TemplateProps } from '@karinjs/template-react'

interface CardData {
  title: string
  items: Array<{ label: string; value: string }>
}

// ✅ 显式传入泛型参数
const Card = ({ data }: TemplateProps<CardData>) => (
  <div>{data.title}</div>
             
CardData.title: string
)

export default defineTemplate({ component: Card })

import { defineTemplate, type TemplateProps } from '@karinjs/template-react'

interface CardData {
  title: string
  items: Array<{ label: string; value: string }>
}

// ✅ 组件泛型自动推导
const Card = <D extends CardData>({ data }: TemplateProps<D>) => <div>{data.title}</div>

export default defineTemplate({ component: Card })

// ❌ route 类型是 string，不是字面量类型，无法匹配模板路由
const route = event.msg.replace('#渲染 ', '')
await renderImage(route, {/* 任意字段 */})
Argument of type 'string' is not assignable to parameter of type '"hello/card"'.

const route = event.msg.replace('#渲染 ', '') as keyof Registry
await renderImage(route, {/* data 类型仍是 any */})

const route = event.msg.replace('#渲染 ', '')

switch (route) {
  case 'hello/card':
    await event.reply(
      await renderImage('hello/card', {
        title: '卡片标题',
        items: [{ label: '状态', value: '正常' }]
      })
    )
    break
  case 'hello/list':
    await event.reply(
      await renderImage('hello/list', {
        title: '列表标题',
        users: [{ name: '用户1', role: '角色1', score: 100 }]
      })
    )
    break
  default:
    await event.reply('未知模板路由')
}

const route = event.msg.replace('#渲染 ', '')

// 类型不安全，data 是 unknown
const result = await renderTemplate(route, {/* 任意数据 */})

if (!result.success) {
  throw new Error(`渲染失败：${result.error}`)
}

export default defineTemplate({
  component: Card,
  validate: (data): data is CardData =>
    typeof data === 'object' && data !== null && typeof (data as CardData).title === 'string' && Array.isArray((data as CardData).items)
})