Foliación.

<section class="ui-sample ui-document" data-foliation="true"><header><strong>Control de foliación</strong><span class="badge badge--ok">Continuidad verificada</span></header><table><thead><tr><th>Documento</th><th>Desde</th><th>Hasta</th></tr></thead><tbody><tr><td>PRE-2026-018</td><td>119</td><td>126</td></tr></tbody></table><p>Siguiente folio disponible: 127.</p></section>

<section class="ui-sample ui-document border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-foliation="true"><header class="flex flex-wrap items-center justify-between gap-3"><strong>Control de foliación</strong><span class="badge badge--ok">Continuidad verificada</span></header><table class="w-full border-collapse text-left"><thead><tr><th class="border-b border-slate-300 p-2 align-top">Documento</th><th class="border-b border-slate-300 p-2 align-top">Desde</th><th class="border-b border-slate-300 p-2 align-top">Hasta</th></tr></thead><tbody><tr><td class="border-b border-slate-300 p-2 align-top">PRE-2026-018</td><td class="border-b border-slate-300 p-2 align-top">119</td><td class="border-b border-slate-300 p-2 align-top">126</td></tr></tbody></table><p>Siguiente folio disponible: 127.</p></section>

/** Tono de la insignia de resultado: `ok` sin saltos, `warn` con observación, `err` con folios faltantes, `neutral` sin tono. */
export type FoliationTone = "ok" | "warn" | "err" | "neutral";

export interface FoliationRow {
  /** Número del documento foliado («PRE-2026-018»). */
  document: string;
  /** Primer folio del documento. */
  from: number | string;
  /** Último folio del documento. */
  to: number | string;
}

export interface FoliationProps {
  title?: string;
  /** Resultado del control («Continuidad verificada», «Observación»); va en una insignia. Vacío lo oculta. */
  status?: string;
  /** Tono de la insignia; sin valor se deduce de `status` («Continuidad verificada» → `ok`, «Observación» → `warn`, «Folios faltantes» → `err`) y si no lo reconoce es `neutral`. */
  statusTone?: FoliationTone;
  /** Encabezados de las columnas: documento, primer folio y último folio. */
  columns?: [string, string, string];
  /** Un documento por fila, con su rango de folios. */
  rows?: FoliationRow[];
  /** Conclusión bajo la tabla: siguiente folio libre o folio por verificar; vacío la oculta. */
  description?: string;
  className?: string;
}

const COLUMNS: [string, string, string] = ["Documento", "Desde", "Hasta"];

const ROWS: FoliationRow[] = [{ document: "PRE-2026-018", from: 119, to: 126 }];

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

const FOLIATION_TONES: Record<string, FoliationTone> = {
  "Continuidad verificada": "ok",
  "Observación": "warn",
  "Folios faltantes": "err",
};

/**
 * Control de foliación con el rango de folios de cada documento y la conclusión del control; se usa al archivar para confirmar que la numeración no tiene saltos.
 *
 * El resultado va en texto dentro de una insignia con tono. Si la continuidad no está verificada, `status` lo dice y `description` nombra el folio pendiente.
 *
 * @example <Foliation status="Observación" rows={[{ document: "PRE-2026-018", from: 119, to: 125 }]} description="Falta verificar el folio 126." />
 */
export function Foliation({
  title = "Control de foliación",
  status = "Continuidad verificada",
  statusTone,
  columns = COLUMNS,
  rows = ROWS,
  description = "Siguiente folio disponible: 127.",
  className,
}: FoliationProps) {
  return (
    <section className={["ui-document", className].filter(Boolean).join(" ")} data-foliation>
      {title || status ? (
        <header>
          {title ? <strong>{title}</strong> : null}
          {status ? <span className={FOLIATION_BADGE[statusTone ?? FOLIATION_TONES[status] ?? "neutral"]}>{status}</span> : null}
        </header>
      ) : null}
      {rows.length ? (
        <table>
          <thead>
            <tr>
              {columns.map((column, i) => (
                <th key={`${column}-${i}`}>{column}</th>
              ))}
            </tr>
          </thead>
          <tbody>
            {rows.map((row, i) => (
              <tr key={`${row.document}-${i}`}>
                <td>{row.document}</td>
                <td>{row.from}</td>
                <td>{row.to}</td>
              </tr>
            ))}
          </tbody>
        </table>
      ) : null}
      {description ? <p>{description}</p> : null}
    </section>
  );
}