Estado de servicio.

<section class="ui-sample ui-service" data-service-status="true"><header><strong>datos.cochid.cl</strong><span class="badge badge--ok">Operativo</span></header><dl><div><dt>Señal</dt><dd>GET /healthz · 200</dd></div><div><dt>Medido</dt><dd>25 ago 2026 · 18:24:40 CLT</dd></div><div><dt>Impacto</dt><dd>Sin impacto observado</dd></div></dl><a class="btn btn--secondary" href="#incidente">Abrir detalle</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-service-status="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>datos.cochid.cl</strong><span class="badge badge--ok">Operativo</span></header><dl class="grid gap-2"><div><dt>Señal</dt><dd>GET /healthz · 200</dd></div><div><dt>Medido</dt><dd>25 ago 2026 · 18:24:40 CLT</dd></div><div><dt>Impacto</dt><dd>Sin impacto observado</dd></div></dl><a class="btn btn--secondary underline underline-offset-4" href="#incidente">Abrir detalle</a></section>

export interface ServiceStatusItem {
  /** Nombre del dato (`<dt>`): señal, momento de la medición, impacto. */
  label: string;
  value: string;
}

/** Tono de la insignia de estado: `ok` operativo, `warn` degradado o en mantención, `err` interrumpido, `neutral` sin tono. */
export type ServiceStatusTone = "ok" | "warn" | "err" | "neutral";

export interface ServiceStatusProps {
  /** Nombre del servicio o dominio que se mide. */
  title?: string;
  /** Estado visible del servicio («Operativo», «Degradado», «Interrumpido»); 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`, «Interrumpido» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: ServiceStatusTone;
  /** Datos de la medición como pares etiqueta y valor: señal verificable, momento y impacto. */
  items?: ServiceStatusItem[];
  /** Destino del detalle o del incidente; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace al detalle; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const SERVICE_STATUS_ITEMS: ServiceStatusItem[] = [
  { label: "Señal", value: "GET /healthz · 200" },
  { label: "Medido", value: "25 ago 2026 · 18:24:40 CLT" },
  { label: "Impacto", value: "Sin impacto observado" },
];

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

const SERVICE_STATUS_TONES: [string, ServiceStatusTone][] = [
  ["operativo", "ok"],
  ["degradado", "warn"],
  ["parcial", "warn"],
  ["mantención", "warn"],
  ["interrumpido", "err"],
  ["caído", "err"],
  ["sin respuesta", "err"],
];

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

/**
 * Estado de un servicio con la señal que lo respalda, el momento de la medición y el impacto; se usa en páginas de estado y tableros de operación.
 *
 * El estado va en texto dentro de una insignia con tono, y se afirma sólo con una señal verificable (`items`) y la hora en que se midió; cuando hay impacto, el enlace lleva al incidente.
 *
 * @example <ServiceStatus title="datos.cochid.cl" status="Operativo" />
 * @example <ServiceStatus status="Degradado" items={[{ label: "Señal", value: "GET /healthz · 206" }, { label: "Impacto", value: "Una fuente no actualiza" }]} href="/incidentes/184" linkLabel="Ver incidente" />
 */
export function ServiceStatus({
  title = "datos.cochid.cl",
  status = "Operativo",
  statusTone,
  items = SERVICE_STATUS_ITEMS,
  href = "#incidente",
  linkLabel = "Abrir detalle",
  className,
}: ServiceStatusProps) {
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-service-status>
      <header>
        <strong>{title}</strong>
        {status ? <span className={SERVICE_STATUS_BADGE[serviceStatusTone(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}
      {href && linkLabel ? <a className="btn btn--secondary" href={href}>{linkLabel}</a> : null}
    </section>
  );
}