Retorno OIDC.

<section class="ui-sample ui-auth-status ui-auth-status--progress" data-auth-source="cis-auth-authentik" data-auth-callback-status="true" role="status"><span class="ui-auth-status__symbol" aria-hidden="true">↻</span><div><strong>Completando el acceso</strong><p>Estamos validando tu inicio de sesión. En unos segundos vuelves al producto.</p><code>/auth/callback</code><a class="btn btn--quiet" href="#reintentar">Volver al producto</a></div></section>

<section class="ui-sample ui-auth-status ui-auth-status--progress border border-slate-300 bg-white p-4 text-slate-950 grid gap-3" data-auth-source="cis-auth-authentik" data-auth-callback-status="true" role="status"><span class="ui-auth-status__symbol" aria-hidden="true">↻</span><div><strong>Completando el acceso</strong><p>Estamos validando tu inicio de sesión. En unos segundos vuelves al producto.</p><code>/auth/callback</code><a class="btn btn--quiet underline underline-offset-4" href="#reintentar">Volver al producto</a></div></section>

export type AuthCallbackStatusTone = "progress" | "success" | "warning" | "error";

/** Variante de botón del kit para el enlace. */
export type AuthCallbackStatusLinkVariant = "primary" | "secondary" | "quiet";

export interface AuthCallbackStatusProps {
  /** Tono del aviso: `progress` mientras se valida la respuesta, `error` si falló. Define el símbolo. */
  tone?: AuthCallbackStatusTone;
  title?: string;
  /** Qué se está haciendo o por qué falló. */
  description?: string;
  /** Dato técnico en monoespaciado; por defecto, la ruta de retorno de OIDC. */
  detail?: string;
  /** Texto del enlace: volver al producto o reintentar el acceso. */
  linkLabel?: string;
  /** Destino del enlace. */
  href?: string;
  /** Aspecto del enlace: por defecto `quiet` mientras se valida y `primary` en los demás tonos, donde es la acción que sigue. */
  linkVariant?: AuthCallbackStatusLinkVariant;
  className?: string;
}

const AUTH_CALLBACK_STATUS_SYMBOLS: Record<AuthCallbackStatusTone, string> = {
  progress: "↻",
  success: "✓",
  warning: "i",
  error: "!",
};

/**
 * Estado del retorno de OIDC desde cis-auth, para la página de callback mientras se valida el acceso o cuando falla.
 *
 * Usa `role="status"`. El símbolo sigue al tono; el título dice el estado en texto. El enlace es un botón del kit:
 * discreto mientras se valida y principal cuando hay que reintentar o continuar.
 *
 * @example <AuthCallbackStatus />
 * @example <AuthCallbackStatus tone="error" title="No pudimos completar el acceso" description="La solicitud de acceso venció antes de volver. Inicia sesión otra vez." linkLabel="Reintentar acceso" href="/auth/login" />
 */
export function AuthCallbackStatus({
  tone = "progress",
  title = "Completando el acceso",
  description = "Estamos validando tu inicio de sesión. En unos segundos vuelves al producto.",
  detail = "/auth/callback",
  linkLabel = "Volver al producto",
  href = "#reintentar",
  linkVariant,
  className,
}: AuthCallbackStatusProps) {
  const variante = linkVariant ?? (tone === "progress" ? "quiet" : "primary");
  return (
    <section
      className={["ui-auth-status", `ui-auth-status--${tone}`, className].filter(Boolean).join(" ")}
      data-auth-source="cis-auth-authentik"
      data-auth-callback-status
      role="status"
    >
      <span className="ui-auth-status__symbol" aria-hidden="true">{AUTH_CALLBACK_STATUS_SYMBOLS[tone]}</span>
      <div>
        <strong>{title}</strong>
        {description ? <p>{description}</p> : null}
        {detail ? <code>{detail}</code> : null}
        {linkLabel ? <a className={`btn btn--${variante}`} href={href}>{linkLabel}</a> : null}
      </div>
    </section>
  );
}