Pipeline.

<section class="ui-sample ui-service" data-pipeline="true"><header><strong>Pipeline diario</strong><span class="badge badge--ok">Operativo</span></header><ol><li>Extraer <span class="badge badge--ok">completo</span></li><li>Validar <span class="badge badge--ok">completo</span></li><li>Cargar <span class="badge badge--ok">completo</span></li></ol><a class="btn btn--secondary" href="#pipeline">Ver dependencias</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-pipeline="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Pipeline diario</strong><span class="badge badge--ok">Operativo</span></header><ol class="grid gap-2"><li>Extraer <span class="badge badge--ok">completo</span></li><li>Validar <span class="badge badge--ok">completo</span></li><li>Cargar <span class="badge badge--ok">completo</span></li></ol><a class="btn btn--secondary underline underline-offset-4" href="#pipeline">Ver dependencias</a></section>

/** Tono de una insignia de estado: `ok` completo u operativo, `warn` con anomalías o degradado, `err` falló o detenido, `neutral` en espera o en curso. */
export type PipelineTone = "ok" | "warn" | "err" | "neutral";

export interface PipelineStep {
  /** Nombre de la etapa («Extraer», «Validar», «Cargar»). */
  label: string;
  /** Estado de la etapa («completo», «3 anomalías», «en espera»); va en una insignia y vacío muestra sólo el nombre. */
  status?: string;
  /** Tono de la insignia de la etapa; sin valor se deduce de `status`. */
  tone?: PipelineTone;
}

export interface PipelineProps {
  /** Nombre del pipeline. */
  title?: string;
  /** Estado visible del pipeline completo («Operativo», «Degradado», «Detenido»); va en una insignia y vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Operativo» → `ok`, «Degradado» → `warn`, «Detenido» y «Falló» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: PipelineTone;
  /** Etapas en orden de ejecución, cada una con su estado. */
  steps?: PipelineStep[];
  /** Destino de la vista de dependencias; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace a las dependencias; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const PIPELINE_STEPS: PipelineStep[] = [
  { label: "Extraer", status: "completo" },
  { label: "Validar", status: "completo" },
  { label: "Cargar", status: "completo" },
];

const PIPELINE_BADGE: Record<PipelineTone, string> = {
  ok: "badge badge--ok",
  warn: "badge badge--warn",
  err: "badge badge--err",
  neutral: "badge",
};

const PIPELINE_TONES: [string, PipelineTone][] = [
  ["incomplet", "warn"],
  ["complet", "ok"],
  ["operativo", "ok"],
  ["anomalía", "warn"],
  ["advertencia", "warn"],
  ["degradado", "warn"],
  ["parcial", "warn"],
  ["falló", "err"],
  ["error", "err"],
  ["detenido", "err"],
  ["interrumpido", "err"],
];

function pipelineTone(status: string, tone?: PipelineTone): PipelineTone {
  const texto = status.toLowerCase();
  return tone ?? PIPELINE_TONES.find(([clave]) => texto.includes(clave))?.[1] ?? "neutral";
}

/**
 * Estado de un pipeline de datos con sus etapas en orden y el estado de cada una; se usa en tableros de operación para ver dónde se detuvo una ejecución.
 *
 * Las etapas van en una lista ordenada: el orden es el de ejecución. Cada estado va en texto dentro de una insignia con tono.
 *
 * @example <Pipeline title="Pipeline diario" href="/pipelines/diario" />
 * @example <Pipeline status="Degradado" steps={[{ label: "Extraer", status: "completo" }, { label: "Validar", status: "3 anomalías" }, { label: "Cargar", status: "en espera" }]} />
 */
export function Pipeline({
  title = "Pipeline diario",
  status = "Operativo",
  statusTone,
  steps = PIPELINE_STEPS,
  href = "#pipeline",
  linkLabel = "Ver dependencias",
  className,
}: PipelineProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-pipeline>
      <header>
        <strong>{title}</strong>
        {status ? <span className={PIPELINE_BADGE[pipelineTone(status, statusTone)]}>{status}</span> : null}
      </header>
      {steps.length ? (
        <ol>
          {steps.map((step, i) => (
            <li key={`${step.label}-${i}`}>
              {step.label}
              {step.status ? (
                <>
                  {" "}
                  <span className={PIPELINE_BADGE[pipelineTone(step.status, step.tone)]}>{step.status}</span>
                </>
              ) : null}
            </li>
          ))}
        </ol>
      ) : null}
      {href && linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </section>
  );
}