/** Render a JSON object as a readable nested definition list (used for ranking inputs, cursors, drift). */
export function JsonView({ data, depth = 0 }: { data: unknown; depth?: number }) {
  if (data == null) return <span className="text-ink-4">null</span>;
  if (typeof data !== 'object') {
    return <span className={typeof data === 'number' ? 'ci-num ci-mono' : 'ci-mono'}>{String(data)}</span>;
  }
  if (Array.isArray(data)) {
    if (data.length === 0) return <span className="text-ink-4">[]</span>;
    return (
      <ol className="ml-3 list-decimal space-y-0.5 pl-3 text-[12.5px]">
        {data.map((v, i) => (
          <li key={i}>
            <JsonView data={v} depth={depth + 1} />
          </li>
        ))}
      </ol>
    );
  }
  const entries = Object.entries(data as Record<string, unknown>);
  if (entries.length === 0) return <span className="text-ink-4">{'{}'}</span>;
  return (
    <dl className={`grid grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 text-[12.5px] ${depth > 0 ? 'ml-2 border-l border-rule pl-2' : ''}`}>
      {entries.map(([k, v]) => (
        <div key={k} className="contents">
          <dt className="ci-mono text-ink-3">{k}</dt>
          <dd className="min-w-0 break-words">
            <JsonView data={v} depth={depth + 1} />
          </dd>
        </div>
      ))}
    </dl>
  );
}