{
  "root": "form-1",
  "elements": {
    "form-1": {
      "type": "Form",
      "props": { "title": "表單標(biāo)題" },
      "children": ["input-1"]
    },
    "input-1": {
      "type": "Input",
      "props": { "placeholder": "請輸入" }
    }
  }
}

// catalog.ts
import { defineCatalog } from "@json-render/core";
import { schema } from "@json-render/react/schema";
import { z } from "zod";

export const catalog = defineCatalog(schema, {
  components: {
    Form: {
      props: z.object({
        title: z.string(),
        description: z.string().optional(),
      }),
      description: "表單容器",
    },
    Input: {
      props: z.object({
        label: z.string(),
        name: z.string(),
        type: z.enum(["text", "email", "password", "number"]).default("text"),
        placeholder: z.string().optional(),
      }),
      description: "文本框",
    }
    Select: {
      props: z.object({
        label: z.string(),
        name: z.string(),
        options: z.array(z.object({ label: z.string(), value: z.string() })),
      }),
      description: "下拉選項",
    },
    Button: {
      props: z.object({
        label: z.string(),
        action: z.string(),
        variant: z.enum(["primary", "secondary"]).default("primary"),
      }),
      description: "提交按鈕",
    },
  },
  actions: {
    submit: { description: "提交操作" },
  },
});

// registry.tsx
import { defineRegistry } from "@json-render/react";
import { catalog } from "./catalog";

export const { registry } = defineRegistry(catalog, {
  components: {
    Form: ({ props, children }) => (
      <div className="p-4 border rounded shadow-md max-w-md mx-auto bg-white">
        <h2 className="text-xl font-bold mb-2">{props.title}</h2>
        {props.description && <p className="text-gray-600 mb-4">{props.description}</p>}
        <form className="space-y-4" onSubmit={(e) => e.preventDefault()}>
          {children} // 遞歸渲染子組件
        </form>
      </div>
    ),
    Input: ({ props }) => (
      <div className="flex flex-col">
        <label className="mb-1 font-medium">{props.label}</label>
        <input
          type={props.type}
          name={props.name}
          placeholder={props.placeholder}
          className="border rounded p-2"
        />
      </div>
    ),
    Select: ({ props }) => (
      <div className="flex flex-col">
        <label className="mb-1 font-medium">{props.label}</label>
        <select name={props.name} className="border rounded p-2">
          {(props.options || []).map((opt: { label: string; value: string }) => (
            <option key={opt.value} value={opt.value}>
              {opt.label}
            </option>
          ))}
        </select>
      </div>
    ),
    Button: ({ props, emit }) => (
      <button
        onClick={() => {
          emit(props.action)
        }}
        className={`px-4 py-2 rounded text-white ${
          props.variant === "secondary" ? "bg-gray-500 hover:bg-gray-600" : "bg-blue-500 hover:bg-blue-600"
        }`}
      >
        {props.label}
      </button>
    ),
  },
  actions: {
    submit: async (ctx) => {
      console.log("submit", ctx);
    },
  },
});

function repairJSON(str: string) {
  let out = '';
  let inString = false;
  let escape = false;
  const stack: string[] = []; // 用于記錄未閉合的括號結(jié)構(gòu)

  // 1. 逐字符掃描，解析當(dāng)前所處的狀態(tài)
  for (let i = 0; i < str.length; i++) {
    const char = str[i];
    if (escape) { out += char; escape = false; continue; }
    if (char === '\\') { escape = true; out += char; continue; }
    if (char === '"') { inString = !inString; out += char; continue; }
    
    // 如果不在字符串內(nèi)部，遇到左括號入棧，遇到右括號出棧
    if (!inString) {
      if (char === '{') stack.push('}');
      else if (char === '[') stack.push(']');
      else if (char === '}' || char === ']') stack.pop();
    }
    out += char;
  }

  // 2. 尾部狀態(tài)閉合
  if (escape) out = out.slice(0, -1); // 截斷懸空的轉(zhuǎn)義符
  if (inString) out += '"';           // 閉合未完成的字符串引號

  out = out.trim();
  // 3. 剔除懸空的逗號（JSON 不允許尾逗號）
  if (out.endsWith(',')) out = out.slice(0, -1);
  // 4. 補齊殘缺的鍵值對（例如 {"key": -> {"key":null）
  if (out.endsWith(':')) out += 'null';

  // 5. 按照棧的后進先出順序，依次補齊所有未閉合的括號
  while (stack.length > 0) {
    out += stack.pop();
  }

  return out;
}

interface Element {
  type: string;
  props: Record<string, any>;
  children?: string[];
}

interface Spec {
  root: string;
  elements: Record<string, Element>;
}

function cleanSpec(spec: any): Spec | null {
  // 非空且結(jié)構(gòu)符合要求
  if (!spec || typeof spec !== 'object') return null;
  if (!spec.root || !spec.elements || typeof spec.elements !== 'object') return null;

  const cleanElements: Record<string, Element> = {};
  
  // 過濾殘缺的 Element
  for (const key in spec.elements) {
    const el = spec.elements[key];
    // 如果一個元素連 type 都沒有輸出完畢，說明它是一個不可用的半成品，直接拋棄
    if (el && typeof el === 'object' && typeof el.type === 'string') {
      cleanElements[key] = {
        type: el.type,
        props: (el.props && typeof el.props === 'object') ? el.props : {},
        children: Array.isArray(el.children) ? el.children : []
      };
    }
  }

  // 剔除懸空的引用
  for (const key in cleanElements) {
    const el = cleanElements[key];
    if (el.children) {
      // 過濾掉那些在 cleanElements 字典中不存在的子節(jié)點 ID
      el.children = el.children.filter((childId: string) => cleanElements[childId]);
    }
  }

  return { root: spec.root, elements: cleanElements };
}

export function StreamingForm() {
  const [spec, setSpec] = useState<Spec>(initialSpec);
  const [rawText, setRawText] = useState("");
  const bufferRef = useRef(""); // 使用 ref 緩存字符流，避免閉包陷阱

  useEffect(() => {
    const eventSource = new EventSource('/api/stream-form');

    eventSource.onmessage = (event) => {
      const chunk = JSON.parse(event.data);
      bufferRef.current += chunk;
      
      setRawText(bufferRef.current);
      
      try {
        const repaired = repairJSON(bufferRef.current);
        const parsed = JSON.parse(repaired);
        const cleaned = cleanSpec(parsed);
        if (cleaned) {
          setSpec(cleaned); // 觸發(fā)真正的組件樹渲染
        }
      } catch {
      }
    };
  }, []);

  return (
    <div className="container mx-auto p-8 flex flex-col md:flex-row gap-8">
      {/* 渲染區(qū) */}
      <div className="flex-1">
        <h1 className="text-2xl font-bold mb-4">流式表單渲染器</h1>
        <div className="mb-4 text-sm text-gray-500">
          模擬 LLM 流式傳輸...
        </div>
        <StateProvider>
          <VisibilityProvider>
            <ActionProvider>
              <ValidationProvider>
                <Renderer spec={spec} registry={registry} />
              </ValidationProvider>
            </ActionProvider>
          </VisibilityProvider>
        </StateProvider>
      </div>
      
      {/* 原始 JSON 流展示區(qū) */}
      <div className="flex-1 max-w-lg">
        <h2 className="text-lg font-bold mb-2 text-gray-700">當(dāng)前流式傳輸?shù)?JSON 數(shù)據(jù)</h2>
        <div className="bg-gray-900 text-green-400 p-4 rounded-lg overflow-auto h-[600px] font-mono whitespace-pre-wrap">
          {rawText}<span className="animate-pulse">_</span>
        </div>
      </div>
    </div>
  );
}