import { Fragment } from "react";

/**
 * Renders AI-generated proposal strings with emphasis, without ever handing raw
 * HTML to the DOM.
 *
 * These strings come from Claude (src/lib/proposal/agent.ts), which builds its
 * prompt from client transcripts — third-party text. They were previously
 * rendered with dangerouslySetInnerHTML on the public /preventivo/[slug] page,
 * so a successful prompt injection became stored XSS against the prospect
 * (C-4 in .planning/SECURITY-SCAN.md). The prompt never asks for HTML in the
 * first place; the only markup worth keeping is emphasis.
 *
 * Recognises **bold** and <strong>/<b> and turns them into real React elements.
 * Anything else — including <img onerror>, <script>, stray angle brackets — is
 * emitted as text by React's normal escaping.
 */

// No dotAll flag: emphasis is not expected to span lines, and the project's
// TS target predates es2018.
const PATTERN = /\*\*(.+?)\*\*|<(?:strong|b)>(.+?)<\/(?:strong|b)>/gi;

export function RichText({ children }: { children: string }) {
  const parts: React.ReactNode[] = [];
  let cursor = 0;

  for (const match of children.matchAll(PATTERN)) {
    const at = match.index;
    if (at > cursor) parts.push(children.slice(cursor, at));
    parts.push(<strong key={at}>{match[1] ?? match[2]}</strong>);
    cursor = at + match[0].length;
  }

  if (cursor < children.length) parts.push(children.slice(cursor));

  return (
    <span>
      {parts.map((p, i) => (
        <Fragment key={i}>{p}</Fragment>
      ))}
    </span>
  );
}