"use client";

import { RollingStatTiles, type StatTileDef } from "./index";

export interface DemoProps {
  accentColor?: string;
  tileCount?: number;
  compactNotation?: boolean;
}

const TILE_POOL: StatTileDef[] = [
  { id: "revenue", label: "Monthly revenue", format: "currency", value: 128400, min: 84000, max: 246000 },
  { id: "conversion", label: "Conversion rate", format: "percent", value: 41.2, min: 24, max: 58 },
  { id: "active", label: "Active users", format: "count", value: 8412, min: 3900, max: 15800 },
  { id: "churn", label: "Churn rate", format: "percent", value: 3.4, min: 1.1, max: 6.9 },
];

/** Demo props mirror meta.json controls; defaults must match the control defaults. */
export default function Demo({ accentColor = "#9BE15D", tileCount = 3, compactNotation = true }: DemoProps) {
  const count = Math.min(Math.max(Math.round(tileCount), 2), TILE_POOL.length);
  const tiles = TILE_POOL.slice(0, count);

  return (
    <div className="flex w-full items-center justify-center p-6">
      <RollingStatTiles tiles={tiles} accentColor={accentColor} compactNotation={compactNotation} className="max-w-[460px]" />
    </div>
  );
}

1e:T259c, 1f:T1e2e4,

<script setup lang="ts">
import { computed, nextTick, onMounted, reactive, watch } from "vue";

type StatFormat = "currency" | "percent" | "count";
interface StatTileDef {
  id: string;
  label: string;
  format: StatFormat;
  value: number;
  min: number;
  max: number;
}

const props = withDefaults(
  defineProps<{
    accentColor?: string;
    tileCount?: number;
    compactNotation?: boolean;
  }>(),
  { accentColor: "#9BE15D", tileCount: 3, compactNotation: true },
);

const TILE_POOL: StatTileDef[] = [
  { id: "revenue", label: "Monthly revenue", format: "currency", value: 128400, min: 84000, max: 246000 },
  { id: "conversion", label: "Conversion rate", format: "percent", value: 41.2, min: 24, max: 58 },
  { id: "active", label: "Active users", format: "count", value: 8412, min: 3900, max: 15800 },
  { id: "churn", label: "Churn rate", format: "percent", value: 3.4, min: 1.1, max: 6.9 },
];

/** Fixed for every digit, so a three-digit tile and a six-digit tile settle at the same moment. */
const ROLL_MS = 460;

function trimTrailingZero(s: string): string {
  return s.replace(/\.0$/, "");
}
function compactSuffix(n: number): string {
  const abs = Math.abs(n);
  if (abs >= 1_000_000) return `${trimTrailingZero((n / 1_000_000).toFixed(1))}M`;
  if (abs >= 1_000) return `${trimTrailingZero((n / 1_000).toFixed(1))}K`;
  return String(n);
}
function formatTile(format: StatFormat, value: number, compact: boolean): string {
  if (format === "percent") return `${value.toFixed(1)}%`;
  const rounded = Math.round(value);
  if (format === "currency") return compact ? `$${compactSuffix(rounded)}` : `$${rounded.toLocaleString("en-US")}`;
  return compact ? compactSuffix(rounded) : rounded.toLocaleString("en-US");
}
function randomInRange(min: number, max: number, decimals: number): number {
  const raw = min + Math.random() * (max - min);
  const scale = 10 ** decimals;
  return Math.round(raw * scale) / scale;
}

interface Token {
  key: string;
  char: string;
  digit: boolean;
}
function tokenize(text: string): Token[] {
  const chars = text.split("");
  return chars.map((char, i) => ({ key: String(chars.length - i), char, digit: /[0-9]/.test(char) }));
}

interface DigitCell extends HTMLSpanElement {
  _current?: HTMLSpanElement;
}

function rollDigit(cell: DigitCell, newChar: string, direction: 1 | -1, reduce: boolean) {
  const oldInner = cell._current!;
  const newInner = document.createElement("span");
  newInner.className = "rst-inner";
  newInner.textContent = newChar;
  cell.appendChild(newInner);
  cell._current = newInner;
  if (reduce) {
    oldInner.remove();
    return;
  }
  newInner.style.transform = `translateY(${direction * 100}%)`;
  newInner.style.opacity = "0";
  void newInner.offsetHeight;
  const t = `transform ${ROLL_MS}ms cubic-bezier(.16,1,.3,1), opacity ${ROLL_MS}ms linear`;
  newInner.style.transition = t;
  oldInner.style.transition = t;
  requestAnimationFrame(() => {
    newInner.style.transform = "translateY(0%)";
    newInner.style.opacity = "1";
    oldInner.style.transform = `translateY(${-direction * 100}%)`;
    oldInner.style.opacity = "0";
  });
  setTimeout(() => oldInner.remove(), ROLL_MS + 40);
}

/** Rebuilds a reading in place: cells are keyed by distance from the right so a newly appeared
 * leading digit never disturbs the identity of digits already on screen. */
function renderReading(container: HTMLElement & { _cells?: Map<string, DigitCell> }, text: string, direction: 1 | -1, reduce: boolean) {
  const tokens = tokenize(text);
  const map = container._cells ?? (container._cells = new Map());
  const seen = new Set<string>();
  for (const t of tokens) {
    seen.add(t.key);
    let cell = map.get(t.key);
    if (!cell) {
      cell = document.createElement("span") as DigitCell;
      cell.dataset.key = t.key;
      if (t.digit) {
        cell.className = "rst-digit";
        const inner = document.createElement("span");
        inner.className = "rst-inner";
        inner.textContent = t.char;
        cell.appendChild(inner);
        cell._current = inner;
      } else {
        cell.className = "rst-sym";
        cell.textContent = t.char;
      }
      map.set(t.key, cell);
    } else if (t.digit) {
      if (cell._current!.textContent !== t.char) rollDigit(cell, t.char, direction, reduce);
    } else if (cell.textContent !== t.char) {
      cell.textContent = t.char;
    }
  }
  for (const [key, cell] of map) {
    if (!seen.has(key)) {
      cell.remove();
      map.delete(key);
    }
  }
  for (const t of tokens) container.appendChild(map.get(t.key)!);
}

const values = reactive<Record<string, number>>(Object.fromEntries(TILE_POOL.map((t) => [t.id, t.value])));
const directions = reactive<Record<string, 1 | -1>>(Object.fromEntries(TILE_POOL.map((t) => [t.id, 1])));
const announcement = reactive({ text: "" });
const readingRefs = new Map<string, HTMLElement>();

const tiles = computed<StatTileDef[]>(() => {
  const count = Math.min(Math.max(Math.round(props.tileCount), 2), TILE_POOL.length);
  return TILE_POOL.slice(0, count);
});

function setReadingRef(id: string, el: unknown) {
  if (el instanceof HTMLElement) readingRefs.set(id, el);
  else readingRefs.delete(id);
}

function reduceMotion(): boolean {
  return typeof window !== "undefined" && window.matchMedia ? window.matchMedia("(prefers-reduced-motion: reduce)").matches : false;
}

function syncTile(t: StatTileDef) {
  const el = readingRefs.get(t.id);
  if (!el) return;
  const text = formatTile(t.format, values[t.id] ?? t.value, props.compactNotation);
  renderReading(el, text, directions[t.id] ?? 1, reduceMotion());
}
function syncAll() {
  for (const t of tiles.value) syncTile(t);
}

function currentText(t: StatTileDef): string {
  return formatTile(t.format, values[t.id] ?? t.value, props.compactNotation);
}

function refresh() {
  const spoken: string[] = [];
  for (const t of tiles.value) {
    const decimals = t.format === "percent" ? 1 : 0;
    const current = values[t.id] ?? t.value;
    const next = randomInRange(t.min, t.max, decimals);
    directions[t.id] = next >= current ? 1 : -1;
    values[t.id] = next;
    spoken.push(`${t.label} ${formatTile(t.format, next, props.compactNotation)}`);
  }
  announcement.text = spoken.join(", ");
  nextTick(syncAll);
}

onMounted(() => nextTick(syncAll));
watch(() => props.compactNotation, () => nextTick(syncAll));
watch(tiles, () => nextTick(syncAll));
</script>

<template>
  <div class="rst-card">
    <div class="rst-head">
      <span class="rst-kicker">This week</span>
      <button type="button" class="rst-refresh" @click="refresh">
        <svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
          <path d="M3 12a9 9 0 0 1 15.5-6.36" />
          <path d="M21 12a9 9 0 0 1-15.5 6.36" />
          <path d="M18.5 5.6V2.4M18.5 5.6h-3.2" />
          <path d="M5.5 18.4v3.2M5.5 18.4h3.2" />
        </svg>
        Refresh
      </button>
    </div>
    <div class="rst-row">
      <div v-for="(t, i) in tiles" :key="t.id" class="rst-tile">
        <span class="rst-reading" aria-hidden="true" :style="i === 0 ? { color: accentColor } : undefined" :ref="(el) => setReadingRef(t.id, el)"></span>
        <span class="sr-only">{{ t.label }}: {{ currentText(t) }}</span>
        <span class="rst-label">{{ t.label }}</span>
      </div>
    </div>
    <p class="sr-only" aria-live="polite">{{ announcement.text }}</p>
  </div>
</template>

<style scoped>
.rst-card {
  width: 100%;
  max-width: 460px;
  border-radius: 16px;
  border: 1px solid rgb(255 255 255 / 0.1);
  background: #101317;
  padding: 1.5rem;
  font-family: system-ui, sans-serif;
}
.rst-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.rst-kicker {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgb(255 255 255 / 0.4);
}
.rst-refresh {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 6px;
  border: 1px solid rgb(255 255 255 / 0.15);
  background: rgb(255 255 255 / 0.06);
  color: rgb(255 255 255 / 0.8);
  font: 500 12px/1 system-ui, sans-serif;
  padding: 0.375rem 0.625rem;
  cursor: pointer;
  transition: background-color 120ms ease;
}
.rst-refresh:hover {
  background: rgb(255 255 255 / 0.1);
}
.rst-refresh:focus-visible {
  outline: 2px solid rgb(255 255 255 / 0.4);
  outline-offset: 2px;
}
.rst-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 1.5rem 2rem;
}
.rst-tile {
  display: flex;
  flex: 1 1 6.5rem;
  min-width: 6.5rem;
  flex-direction: column;
  gap: 0.5rem;
}
.rst-reading {
  display: inline-flex;
  align-items: center;
  font: 700 2rem/1 system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  color: #fff;
}
.rst-reading :deep(.rst-digit) {
  position: relative;
  display: inline-block;
  height: 1em;
  width: 0.62em;
  overflow: hidden;
}
.rst-reading :deep(.rst-inner) {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rst-reading :deep(.rst-sym) {
  display: inline-block;
}
.rst-label {
  font-size: 11px;
  font-weight: 500;
  color: rgb(255 255 255 / 0.45);
}
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
@media (prefers-reduced-motion: reduce) {
  .rst-reading :deep(.rst-inner) {
    transition-duration: 1ms !important;
  }
}
</style>

Nearby