Resumen de razonamiento.

<section class="ui-sample ui-ai" data-reasoning-summary="true"><header><strong>Resumen de la decisión</strong><span class="badge badge--ok">Completo</span></header><dl><div><dt>Entrada</dt><dd>Tres series regionales</dd></div><div><dt>Criterio</dt><dd>Mismo período y unidad</dd></div><div><dt>Conclusión</dt><dd>Valparaíso sube 0,3 pp</dd></div><div><dt>Incertidumbre</dt><dd>Ninguna material</dd></div></dl></section>

<section class="ui-sample ui-ai border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-reasoning-summary="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Resumen de la decisión</strong><span class="badge badge--ok">Completo</span></header><dl class="grid gap-2"><div><dt>Entrada</dt><dd>Tres series regionales</dd></div><div><dt>Criterio</dt><dd>Mismo período y unidad</dd></div><div><dt>Conclusión</dt><dd>Valparaíso sube 0,3 pp</dd></div><div><dt>Incertidumbre</dt><dd>Ninguna material</dd></div></dl></section>

export interface ReasoningSummaryItem {
  /** Paso del razonamiento (`<dt>`): entrada, criterio, conclusión, incertidumbre. */
  label: string;
  value: string;
}

export interface ReasoningSummaryProps {
  title?: string;
  /** Estado de la decisión («Completo», «Revisión requerida»); se muestra como etiqueta y vacío la oculta. */
  status?: string;
  /** Tono de la etiqueta de estado; por defecto se deduce del texto (completo: `ok`; revisión requerida o pendiente: `warn`; rechazado: `err`; otro: `neutral`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Pasos del razonamiento en orden, como pares etiqueta y valor. */
  items?: ReasoningSummaryItem[];
  className?: string;
}

const REASONING_SUMMARY_ITEMS: ReasoningSummaryItem[] = [
  { label: "Entrada", value: "Tres series regionales" },
  { label: "Criterio", value: "Mismo período y unidad" },
  { label: "Conclusión", value: "Valparaíso sube 0,3 pp" },
  { label: "Incertidumbre", value: "Ninguna material" },
];

const REASONING_SUMMARY_TONOS: [string, "ok" | "warn" | "err" | "neutral"][] = [
  ["complet", "ok"],
  ["revisión", "warn"],
  ["pendiente", "warn"],
  ["incomplet", "warn"],
  ["rechazad", "err"],
];

function claseEstado(status: string, tone?: "ok" | "warn" | "err" | "neutral") {
  const texto = status.toLowerCase();
  const tono = tone ?? REASONING_SUMMARY_TONOS.find(([clave]) => texto.startsWith(clave))?.[1] ?? "neutral";
  return tono === "neutral" ? "badge" : `badge badge--${tono}`;
}

/**
 * Resumen de cómo un asistente o agente de IA llegó a una decisión: entrada, criterio, conclusión e incertidumbre; se muestra junto a la respuesta en lugar del razonamiento completo.
 *
 * Si la incertidumbre es material, pasa un estado que pida revisión en `status`. El estado va en texto dentro de una etiqueta con tono (`badge`), no sólo en color. Sin pasos no se muestra la lista.
 *
 * @example <ReasoningSummary status="Completo" items={[{ label: "Entrada", value: "Tres series regionales" }, { label: "Conclusión", value: "Valparaíso sube 0,3 pp" }]} />
 * @example <ReasoningSummary status="Revisión requerida" items={[{ label: "Conclusión", value: "Valparaíso sube 0,3 pp" }, { label: "Incertidumbre", value: "Una región sin dato" }]} />
 */
export function ReasoningSummary({
  title = "Resumen de la decisión",
  status = "Completo",
  statusTone,
  items = REASONING_SUMMARY_ITEMS,
  className,
}: ReasoningSummaryProps) {
  return (
    <section className={["ui-ai", className].filter(Boolean).join(" ")} data-reasoning-summary>
      <header>
        <strong>{title}</strong>
        {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
    </section>
  );
}