import { Card, Chip } from '@heroui/react'
import { Braces, Layers3, Sparkles } from 'lucide-react'

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

/** Hello 卡片模板的数据结构，适合固定宽度的信息摘要截图。 */
type HelloCardData = {
  /** 主标题。 */
  title: string
  /** 可选副标题。 */
  subtitle?: string
  /** 展示在卡片内容区的键值对。 */
  items: Array<{ label: string; value: string }>
}

const HelloCard = ({ data }: TemplateProps<HelloCardData>) => (
                     
data: HelloCardData
当前模板使用的数据，类型由 defineTemplate 的泛型决定。
  <Card className="w-155 gap-0 overflow-hidden rounded-3xl border border-border bg-background p-0 text-foreground">
    <Card.Header className="flex-row items-start justify-between gap-4 border-b border-border px-8 py-7">
      <div className="min-w-0">
        <div className="mb-3 flex items-center gap-2 text-sm font-medium text-accent">
          <Sparkles size={16} />
          Karin 模板示例
        </div>
        <Card.Title className="text-3xl font-bold tracking-normal">{data.title}</Card.Title>
        {data.subtitle && <Card.Description className="mt-2 text-sm text-accent">{data.subtitle}</Card.Description>}
      </div>

      <Chip className="bg-accent text-accent-foreground" size="md" variant="tertiary">
        <Layers3 size={14} />
        HeroUI
      </Chip>
    </Card.Header>

    <Card.Content className="grid gap-3 px-8 py-7">
      {data.items.map((item, index) => (
        <div key={item.label} className="flex items-center justify-between gap-4 rounded-lg border border-border bg-surface px-4 py-3">
          <div className="flex min-w-0 items-center gap-3">
            <span className="grid size-8 shrink-0 place-items-center rounded-md bg-accent-soft text-accent">
              {index === 0 ? <Braces size={16} /> : <Layers3 size={16} />}
            </span>
            <span className="truncate text-sm text-muted">{item.label}</span>
          </div>
          <strong className="text-base">{item.value}</strong>
        </div>
      ))}
    </Card.Content>
  </Card>
)

export default defineTemplate({
  name: '问候卡片',
  description: 'HeroUI + lucide-react 截图卡片',
  component: HelloCard
})

import path from 'node:path'

import { karinPathHtml, render, segment, type ImageElement } from 'node-karin'
import { createTemplateRenderer, type DataOf, type LoadedRegistry } from '@karinjs/template-react'

// ktr 侧按约定装配（包根定位、配置解析、注册表加载、CSS 定位、捕获目录）；
// outputDir 是 karin 领域的位置，由插件显式指定。
const renderTemplate = createTemplateRenderer(import.meta.url, {
  renderer: { outputDir: path.join(karinPathHtml, 'karin-plugin-example') }
})

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

/**
 * 渲染模板并交给 Karin Puppeteer 截图。
 * @param templatePath 模板路由，如 hello/card。
 * @param data 模板数据，类型由模板组件推导。
 * @param options 透传给 render.render 的额外截图参数。
 * @returns 可直接 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: `karin-plugin-example/${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}`))
}

import { karin } from 'node-karin'

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

/** 触发指令：#测试模板 */
export const templateTest = karin.command('^(#)?测试模板$', async (event) => {
  // renderImage 的第二个参数 data 类型会根据 'hello/card' 自动推导
  const images = await renderImage('hello/card', {
                          
renderImage<"hello/card">(templatePath: "hello/card", data: DataOf<LoadedRegistry["hello/card"]>, options?: Record<string, unknown>): Promise<ImageElement[]>
renderImage 完整类型签名
    title: '来自机器人的卡片',
    items: [
      { label: '状态', value: '渲染成功 ✓' },
      { label: '时间', value: new Date().toLocaleTimeString('zh-CN') }
    ]
  })

  await event.reply(images)
  return true
})

// ✓ 正确：类型匹配
await renderImage('hello/card', {
  title: '标题',
  items: [{ label: '键', value: '值' }]
})

// ✗ 错误：缺少必需字段 title
await renderImage('hello/card', {
Argument of type '{ items: { label: string; value: string; }[]; }' is not assignable to parameter of type '{ title: string; items: { label: string; value: string; }[]; }'.
  Property 'title' is missing in type '{ items: { label: string; value: string; }[]; }' but required in type '{ title: string; items: { label: string; value: string; }[]; }'.
  items: [{ label: '键', value: '值' }]
})

// ✗ 错误：title 类型错误（应该是 string）
await renderImage('hello/card', {
  title: 123,
Type 'number' is not assignable to type 'string'.
  items: [{ label: '键', value: '值' }]
})

import { defineConfig } from 'vite'
import { ktrBuildPlugin } from '@karinjs/template-react/plugin'

export default defineConfig({
  plugins: [ktrBuildPlugin()]
})