Calidad de datos.

<span class="ui-sample badge badge--ok" data-quality="validado" title="Cobertura y sumas verificadas">Calidad: validado</span>

<span class="ui-sample badge badge--ok border border-slate-300 bg-white p-4 text-slate-950" data-quality="validado" title="Cobertura y sumas verificadas">Calidad: validado</span>

/** Niveles de calidad habituales. Otro valor de `quality` se acepta tal cual. */
export type QualityBadgeQuality = "validado" | "parcial" | "sin validar";

/** Tono de la insignia: `ok` validado, `warn` parcial o provisorio, `err` sin validar o con errores, `neutral` sin tono. */
export type QualityBadgeTone = "ok" | "warn" | "err" | "neutral";

export interface QualityBadgeProps {
  /** Nivel de calidad del dato; va en `data-quality` y en el texto. */
  quality?: QualityBadgeQuality | (string & {});
  /** Texto visible; por defecto, `Calidad: ${quality}`. */
  label?: string;
  /** Qué se verificó o qué falta (atributo `title`); sólo `validado` trae uno por defecto y el texto vacío lo omite. */
  detail?: string;
  /** Muestra el detalle también como texto visible, después del nivel; el atributo `title` se conserva. */
  showDetail?: boolean;
  /** Tono de la insignia; sin valor se deduce de `quality` (validado: `ok`; parcial, provisorio: `warn`; sin validar, con errores, rechazado: `err`) y si no lo reconoce es `neutral`. */
  tone?: QualityBadgeTone;
  className?: string;
}

const DETALLES: Partial<Record<string, string>> = { validado: "Cobertura y sumas verificadas" };

const QUALITY_BADGE_TONOS: Partial<Record<string, QualityBadgeTone>> = {
  validado: "ok",
  verificado: "ok",
  parcial: "warn",
  provisorio: "warn",
  preliminar: "warn",
  "sin validar": "err",
  "con errores": "err",
  rechazado: "err",
};

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

/**
 * Insignia de calidad de un dato o serie (validado, parcial, sin validar) junto a cifras, tablas y gráficos.
 *
 * El nivel se lee en el texto y el tono lo refuerza. El detalle va en `title`; si la advertencia importa para leer la cifra, pásalo con `showDetail` para que quede a la vista.
 *
 * @example <QualityBadge />
 * @example <QualityBadge quality="parcial" detail="15 de 16 regiones con datos" showDetail />
 */
export function QualityBadge({ quality = "validado", label, detail, showDetail = false, tone, className }: QualityBadgeProps) {
  const titulo = detail ?? DETALLES[quality];
  const tono = tone ?? QUALITY_BADGE_TONOS[quality.toLowerCase()] ?? "neutral";
  const texto = label ?? `Calidad: ${quality}`;
  const visible = showDetail && titulo ? titulo : "";
  return (
    <span className={[QUALITY_BADGE_CLASES[tono], className].filter(Boolean).join(" ")} data-quality={quality} title={titulo || undefined}>
      {texto}
      {visible ? <>{texto ? " · " : null}<span>{visible}</span></> : null}
    </span>
  );
}