/**
 * # react/TerminalView — a shell around ENGINE BYTES (ADR-0052 §4)
 *
 * Displays a PRE-RENDERED text Rendering — canonical or a token-optimal ARM the engine already
 * emitted ({@link ../frame/render.ts} / {@link ../frame/render-arm.ts}) — as monospace text with the
 * EXACT whitespace preserved. It is a shell, NEVER a fourth renderer: it takes the text as a prop and
 * does ZERO re-rendering logic. `React hosts Renderings; it never produces them` (ADR-0052 §4). The
 * {@link TerminalViewProps.arm} prop is metadata identifying which arm produced the bytes; a host
 * that offers a model-selector reads the available ids from {@link ./arms.ts ARM_IDS}.
 *
 * Isolation (ADR-0052 §3): the only value import is `react`; the arm id is typed against the engine's
 * registry via a type-only edge ({@link ./arms.ts}), so nothing in the engine runtime graph is
 * reached from the browser bundle.
 */

import { createElement, type ReactElement } from "react";

import type { ArmId } from "./arms.ts";

export interface TerminalViewProps {
  /** The pre-rendered text Rendering (canonical or ARM bytes the engine emitted). Displayed VERBATIM —
   * exact whitespace preserved, zero transformation. */
  readonly text: string;
  /** Which render arm produced {@link text} — metadata only (surfaced as `data-arm` for the host). */
  readonly arm: ArmId;
  /** Presentation only: a class on the root `<pre>` for host styling. */
  readonly className?: string;
}

/**
 * Render a pre-rendered text Rendering verbatim in a monospace `<pre>`. The engine's bytes are the
 * single child text node — React preserves the exact whitespace (`white-space: pre`), and the
 * component computes NOTHING from them. Deterministic: identical props ⇒ identical markup.
 */
export function TerminalView(props: TerminalViewProps): ReactElement {
  return createElement(
    "pre",
    {
      className: props.className ?? "kestrel-terminal",
      "data-arm": props.arm,
      style: { whiteSpace: "pre", fontFamily: "ui-monospace, SFMono-Regular, Menlo, Consolas, monospace", margin: 0 },
    },
    props.text,
  );
}