Importación.

<section class="ui-sample ui-service" data-import-job="true"><header><strong>Importación ene-2026.csv</strong><span class="badge badge--ok">Completa</span></header><progress value="100" max="100">100%</progress><dl><div><dt>Filas</dt><dd>6.842</dd></div><div><dt>Rechazadas</dt><dd>0</dd></div></dl><a class="btn btn--quiet" href="#errores">Ver reporte de importación</a></section>

<section class="ui-sample ui-service border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-import-job="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Importación ene-2026.csv</strong><span class="badge badge--ok">Completa</span></header><progress value="100" max="100">100%</progress><dl class="grid gap-2"><div><dt>Filas</dt><dd>6.842</dd></div><div><dt>Rechazadas</dt><dd>0</dd></div></dl><a class="btn btn--quiet underline underline-offset-4" href="#errores">Ver reporte de importación</a></section>

export interface ImportJobItem {
  /** Nombre del conteo (`<dt>`): filas leídas, rechazadas, columnas. */
  label: string;
  value: string;
}

export interface ImportJobProps {
  /** Qué se importa, con el nombre del archivo («Importación ene-2026.csv»). */
  title?: string;
  /** Etapa visible de la importación («Validando», «Completa»); se muestra como etiqueta y vacía la oculta. */
  status?: string;
  /** Tono de la etiqueta de etapa; por defecto se deduce del texto (completa: `ok`; con rechazos o con errores: `warn`; falló o rechazada: `err`; validando u otra: `neutral`). */
  statusTone?: "ok" | "warn" | "err" | "neutral";
  /** Avance de la importación, de 0 a `max`. */
  value?: number;
  max?: number;
  /** Conteos de la importación como pares etiqueta y valor. */
  items?: ImportJobItem[];
  /** Destino del reporte con las filas rechazadas; vacío oculta el enlace. */
  href?: string;
  /** Texto del enlace al reporte; vacío oculta el enlace. */
  linkLabel?: string;
  className?: string;
}

const IMPORT_JOB_ITEMS: ImportJobItem[] = [
  { label: "Filas", value: "6.842" },
  { label: "Rechazadas", value: "0" },
];

const IMPORT_JOB_TONOS: [string, "ok" | "warn" | "err" | "neutral"][] = [
  ["complet", "ok"],
  ["con rechazos", "warn"],
  ["con errores", "warn"],
  ["falló", "err"],
  ["rechazad", "err"],
];

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

/**
 * Avance de la importación de un archivo con etapa, barra de progreso y conteo de filas leídas y rechazadas; se usa mientras se carga y valida un archivo y al terminar.
 *
 * La barra es un `<progress>` nativo con el porcentaje como texto alternativo; el enlace lleva al reporte con los rechazos y es una acción terciaria (`btn--quiet`). La etapa va en texto dentro de una etiqueta con tono (`badge`), no sólo en color.
 *
 * @example <ImportJob title="Importación ene-2026.csv" status="Validando" value={74} items={[{ label: "Filas", value: "6.842" }, { label: "Rechazadas", value: "12" }]} />
 * @example <ImportJob status="Completa" value={100} href="/importaciones/184/reporte" />
 */
export function ImportJob({
  title = "Importación ene-2026.csv",
  status = "Completa",
  statusTone,
  value = 100,
  max = 100,
  items = IMPORT_JOB_ITEMS,
  href = "#errores",
  linkLabel = "Ver reporte de importación",
  className,
}: ImportJobProps) {
  const porcentaje = `${max > 0 ? Math.round((value / max) * 100) : 0}%`;
  return (
    <section className={["ui-service", className].filter(Boolean).join(" ")} data-import-job>
      <header>
        <strong>{title}</strong>
        {status ? <span className={claseEstado(status, statusTone)}>{status}</span> : null}
      </header>
      <progress value={value} max={max}>{porcentaje}</progress>
      {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--quiet" href={href}>{linkLabel}</a> : null}
    </section>
  );
}