Estado de repositorio.

<section class="ui-sample ui-service" data-repo-status="true"><header><strong>portal-datos</strong><span class="badge badge--ok">Árbol limpio</span></header><dl><div><dt>Rama</dt><dd>main</dd></div><div><dt>HEAD</dt><dd><code>849a584</code></dd></div><div><dt>CI</dt><dd>19 pruebas aprobadas</dd></div></dl><a class="btn btn--secondary" href="#commit">Abrir historial</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-repo-status="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>portal-datos</strong><span class="badge badge--ok">Árbol limpio</span></header><dl class="grid gap-2"><div><dt>Rama</dt><dd>main</dd></div><div><dt>HEAD</dt><dd><code>849a584</code></dd></div><div><dt>CI</dt><dd>19 pruebas aprobadas</dd></div></dl><a class="btn btn--secondary underline underline-offset-4" href="#commit">Abrir historial</a></section>

export interface RepoStatusItem {
  /** Nombre del dato (`<dt>`). */
  label: string;
  value: string;
  /** Muestra el valor en `<code>`, para hashes o nombres que se copian tal cual. */
  monospace?: boolean;
}

/** Tono de la insignia de estado: `ok` árbol limpio o al día, `warn` commits por integrar o cambios sin guardar, `err` conflictos, `neutral` sin tono. */
export type RepoStatusTone = "ok" | "warn" | "err" | "neutral";

export interface RepoStatusProps {
  /** Nombre del repositorio. */
  title?: string;
  /** Estado del árbol de trabajo o de la rama frente a su origen; va en una insignia y vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Árbol limpio» → `ok`, «2 commits por integrar» → `warn`, «Con conflictos» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: RepoStatusTone;
  /** Datos del repositorio: rama, commit en HEAD y resultado de CI. */
  items?: RepoStatusItem[];
  /** URL del historial de commits. */
  href?: string;
  /** Texto del enlace al historial; vacío lo oculta. */
  linkLabel?: string;
  className?: string;
}

const ITEMS: RepoStatusItem[] = [
  { label: "Rama", value: "main" },
  { label: "HEAD", value: "849a584", monospace: true },
  { label: "CI", value: "19 pruebas aprobadas" },
];

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

const REPO_STATUS_TONES: [string, RepoStatusTone][] = [
  ["limpio", "ok"],
  ["al día", "ok"],
  ["conflicto", "err"],
  ["falló", "err"],
  ["por integrar", "warn"],
  ["sin commit", "warn"],
  ["sin guardar", "warn"],
  ["atrás", "warn"],
];

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

/**
 * Estado de un repositorio de código con rama, commit actual y resultado de CI; se usa en paneles de operación para saber si una rama está lista para integrar o desplegar.
 *
 * El estado va en texto dentro de una insignia con tono.
 *
 * @example <RepoStatus title="portal-datos" status="2 commits por integrar" items={[{ label: "Rama", value: "feature/filtro-comunas" }, { label: "HEAD", value: "3f1c2d7", monospace: true }, { label: "CI", value: "En curso" }]} href="/repos/portal-datos/commits" />
 */
export function RepoStatus({
  title = "portal-datos",
  status = "Árbol limpio",
  statusTone,
  items = ITEMS,
  href = "#commit",
  linkLabel = "Abrir historial",
  className,
}: RepoStatusProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-repo-status>
      <header>
        <strong>{title}</strong>
        {status ? <span className={REPO_STATUS_BADGE[repoStatusTone(status, statusTone)]}>{status}</span> : null}
      </header>
      {items.length ? (
        <dl>
          {items.map((item, i) => (
            <div key={`${item.label}-${i}`}>
              <dt>{item.label}</dt>
              <dd>{item.monospace ? <code>{item.value}</code> : item.value}</dd>
            </div>
          ))}
        </dl>
      ) : null}
      {linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </section>
  );
}