"use client";

import { useEffect, useMemo, useRef, useState } from "react";

export const MONO =
  'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace';

export type FontChoice = { stack: string; weight: number | string };

/** System stacks only: the stencil is rasterised before a webfont would load. */
export const FONTS = {
  mono: { stack: MONO, weight: 700 },
  grotesque: {
    stack: '"Helvetica Neue", Helvetica, Arial, sans-serif',
    weight: 900,
  },
  serif: { stack: 'Georgia, "Times New Roman", Times, serif', weight: 700 },
  condensed: {
    stack: 'Impact, Haettenschweiler, "Arial Narrow", sans-serif',
    weight: 400,
  },
  geometric: {
    stack: 'Futura, "Avenir Next", "Century Gothic", sans-serif',
    weight: 700,
  },
} satisfies Record<string, FontChoice>;

/** A number is the width; the height, if given, is ignored for text. */
export type Extent = number | { width: number; height?: number };

export type NumeralTextProps = {
  text: string;
  /** A FONTS entry, or any CSS font stack. */
  font?: string | FontChoice;
  weight?: number | string;

  /** Grid width in characters. Higher = more detail, smaller glyphs. */
  cols?: number;
  fontSize?: number;
  /** Overall rendered size. With fontSize, this decides cols instead. */
  size?: Extent;
  /** "reveal" draws in once; "wave" runs a travelling wave forever. */
  mode?: "reveal" | "wave";

  // reveal
  loop?: boolean;
  /** Digit roll per cell, ms. */
  duration?: number;
  /** Time for the reveal to cross the full width, ms. */
  stagger?: number;
  /** Pause on the settled frame before looping, ms. */
  hold?: number;
  /** How many times each cell counts 0-9 before landing. */
  rolls?: number;

  // wave
  /** Full 0-9 cycles visible across the width. */
  waveLength?: number;
  /** Cycles per second. */
  waveSpeed?: number;
  /** Diagonal tilt. 0 = vertical bands. */
  waveSkew?: number;

  color?: string;
  /** Draw partly-covered cells dimmer, so edges don't stair-step. */
  smooth?: boolean;
  fps?: number;
  /** Characters to count through. */
  charset?: string;
  className?: string;
};

type Grid = {
  cols: number;
  rows: number;
  /** Fully-covered cells. */
  mask: Uint8Array;
  /** Partly-covered cells. */
  edge: Uint8Array;
  charAspect: number;
};

/** Deterministic 0..1 from an integer, so a cell looks the same every cycle. */
const rand = (n: number) => {
  const s = Math.sin(n * 12.9898) * 43758.5453;
  return s - Math.floor(s);
};

const SUPERSAMPLE = 4;
const REF = 200;
/** Coverage at or above this is solid ink; above EDGE_INK it is an edge cell. */
const CORE_INK = 0.6;
const EDGE_INK = 0.22;
const EDGE_OPACITY = 0.42;

/** A monospace cell is `charAspect` wide and 1 tall. Same for every instance. */
let charAspectCache: number | null = null;
function charAspect() {
  if (charAspectCache != null) return charAspectCache;
  if (typeof document === "undefined") return 0.6;
  const ctx = document.createElement("canvas").getContext("2d");
  if (!ctx) return 0.6;
  ctx.font = `${REF}px ${MONO}`;
  charAspectCache = ctx.measureText("0").width / REF || 0.6;
  return charAspectCache;
}

const widthOf = (e: Extent) => (typeof e === "number" ? e : e.width);

/** Average each SUPERSAMPLE x SUPERSAMPLE block of alpha down to one cell. */
function sampleBlocks(
  ctx: CanvasRenderingContext2D,
  cols: number,
  rows: number
): Float32Array {
  const width = cols * SUPERSAMPLE;
  const data = ctx.getImageData(0, 0, width, rows * SUPERSAMPLE).data;
  const out = new Float32Array(cols * rows);
  const per = SUPERSAMPLE * SUPERSAMPLE;

  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      let sum = 0;
      for (let sy = 0; sy < SUPERSAMPLE; sy++) {
        const row = (y * SUPERSAMPLE + sy) * width;
        for (let sx = 0; sx < SUPERSAMPLE; sx++) {
          sum += data[(row + x * SUPERSAMPLE + sx) * 4 + 3] / 255;
        }
      }
      out[y * cols + x] = sum / per;
    }
  }
  return out;
}

/** Split coverage into solid and partial cells; partials carry the soft edge. */
function tiers(g: Float32Array, core: number, edge: number, smooth: boolean) {
  const mask = new Uint8Array(g.length);
  const edges = new Uint8Array(g.length);
  const cut = smooth ? core : edge;
  for (let i = 0; i < g.length; i++) {
    if (g[i] >= cut) mask[i] = 1;
    else if (smooth && g[i] >= edge) edges[i] = 1;
  }
  return { mask, edge: edges };
}

function buildTextGrid(
  text: string,
  cols: number,
  font: string,
  weight: number | string,
  smooth: boolean
): Grid | null {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d", { willReadFrequently: true });
  if (!ctx || !text) return null;

  ctx.font = `${weight} ${REF}px ${font}`;
  const m = ctx.measureText(text);
  const w = m.width;
  const ascent = m.actualBoundingBoxAscent || REF * 0.72;
  const descent = m.actualBoundingBoxDescent || 0;
  const h = ascent + descent;
  if (!w || !h) return null;

  const ca = charAspect();
  const rows = Math.max(1, Math.round((cols * ca * h) / w));

  canvas.width = cols * SUPERSAMPLE;
  canvas.height = rows * SUPERSAMPLE;
  const fontPx = (REF * rows * SUPERSAMPLE) / h;
  // Stretch horizontally to undo the cell aspect, so glyphs come out true.
  ctx.setTransform((cols * SUPERSAMPLE) / ((w * fontPx) / REF), 0, 0, 1, 0, 0);
  ctx.font = `${weight} ${fontPx}px ${font}`;
  ctx.textBaseline = "alphabetic";
  ctx.fillStyle = "#fff";
  ctx.fillText(text, 0, (ascent * fontPx) / REF);

  const g = sampleBlocks(ctx, cols, rows);
  return { cols, rows, ...tiers(g, CORE_INK, EDGE_INK, smooth), charAspect: ca };
}

const preStyle = (
  grid: Grid,
  cellPx?: number,
  color?: string
): React.CSSProperties => ({
  margin: 0,
  color,
  fontFamily: MONO,
  fontSize: cellPx
    ? `${cellPx}px`
    : `calc(100cqw / ${(grid.cols * grid.charAspect).toFixed(3)})`,
  lineHeight: 1,
  whiteSpace: "pre",
  letterSpacing: 0,
  userSelect: "none",
});

export default function NumeralText({
  text,
  font = FONTS.mono,
  weight,
  cols = 44,
  fontSize,
  size,
  mode = "reveal",
  loop = false,
  duration = 700,
  stagger = 900,
  hold = 1400,
  rolls = 3,
  waveLength = 1.5,
  waveSpeed = 0.8,
  waveSkew = 0.35,
  color,
  smooth = true,
  fps = 24,
  charset = "0123456789",
  className,
}: NumeralTextProps) {
  const [grid, setGrid] = useState<Grid | null>(null);
  const preRef = useRef<HTMLPreElement>(null);
  const edgeRef = useRef<HTMLPreElement>(null);

  const stack = typeof font === "string" ? font : font.stack;
  const faceWeight = weight ?? (typeof font === "string" ? 700 : font.weight);

  // Pinning both a box and a digit size fixes how many columns can fit.
  const gridCols =
    size != null && fontSize != null
      ? Math.max(2, Math.round(widthOf(size) / (charAspect() * fontSize)))
      : cols;

  useEffect(() => {
    setGrid(buildTextGrid(text, gridCols, stack, faceWeight, smooth));
  }, [text, gridCols, stack, faceWeight, smooth]);

  const cells = useMemo(() => {
    if (!grid) return null;
    const n = grid.cols * grid.rows;
    const delay = new Float32Array(n);
    const seed = new Uint8Array(n);
    const target = new Uint8Array(n);
    for (let i = 0; i < n; i++) {
      const x = i % grid.cols;
      // Reveal sweeps left to right, jittered so the edge isn't a hard line.
      delay[i] = (x / grid.cols) * stagger + rand(i) * stagger * 0.25;
      seed[i] = Math.floor(rand(i + 1) * charset.length);
      target[i] = Math.floor(rand(i + 2) * charset.length);
    }
    return { delay, seed, target };
  }, [grid, stagger, charset]);

  useEffect(() => {
    const pre = preRef.current;
    if (!grid || !cells || !pre) return;
    const edgePre = edgeRef.current;

    const { cols: c, rows, mask, edge } = grid;
    const { delay, seed, target } = cells;
    const len = charset.length;
    const steps = rolls * len;

    const revealFrame = (elapsed: number) => {
      let core = "";
      let soft = "";
      for (let y = 0; y < rows; y++) {
        for (let x = 0; x < c; x++) {
          const i = y * c + x;
          if (!mask[i] && !edge[i]) {
            core += " ";
            soft += " ";
            continue;
          }
          const t = elapsed - delay[i];
          let ch = " ";
          if (t > 0) {
            ch =
              t >= duration
                ? charset[target[i]]
                : charset[(Math.floor((t / duration) * steps) + seed[i]) % len];
          }
          core += mask[i] ? ch : " ";
          soft += mask[i] ? " " : ch;
        }
        core += "\n";
        soft += "\n";
      }
      return [core, soft];
    };

    // A travelling sawtooth in digit space: every cell counts up as the wave
    // reaches it, and its neighbour is a step behind, so bands sweep across.
    const waveFrame = (elapsed: number) => {
      const t = elapsed / 1000;
      let core = "";
      let soft = "";
      for (let y = 0; y < rows; y++) {
        for (let x = 0; x < c; x++) {
          const i = y * c + x;
          if (!mask[i] && !edge[i]) {
            core += " ";
            soft += " ";
            continue;
          }
          const turns =
            t * waveSpeed - (x / c) * waveLength - (y / rows) * waveSkew;
          const ch = charset[((Math.floor(turns * len) % len) + len) % len];
          core += mask[i] ? ch : " ";
          soft += mask[i] ? " " : ch;
        }
        core += "\n";
        soft += "\n";
      }
      return [core, soft];
    };

    const frame = mode === "wave" ? waveFrame : revealFrame;
    const paint = (elapsed: number) => {
      const [core, soft] = frame(elapsed);
      pre.textContent = core;
      if (edgePre) edgePre.textContent = soft;
    };
    const settled = () => paint(mode === "wave" ? 0 : stagger + duration + 1);

    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
      settled();
      return;
    }

    const revealRun = stagger * 1.25 + duration;
    const cycle = revealRun + hold;
    const step = 1000 / fps;
    let raf = 0;
    let start = 0;
    let lastTick = -1;

    const tick = (now: number) => {
      if (!start) start = now;
      const total = now - start;
      const elapsed = mode === "wave" ? total : loop ? total % cycle : total;
      const tickIndex = Math.floor(elapsed / step);
      if (tickIndex !== lastTick) {
        lastTick = tickIndex;
        paint(elapsed);
      }
      if (mode === "wave" || loop || total < revealRun) {
        raf = requestAnimationFrame(tick);
      } else settled();
    };
    raf = requestAnimationFrame(tick);
    return () => cancelAnimationFrame(raf);
  }, [
    grid,
    cells,
    mode,
    loop,
    duration,
    stagger,
    hold,
    rolls,
    waveLength,
    waveSpeed,
    waveSkew,
    fps,
    charset,
  ]);

  // fontSize wins; a bare `size` spreads the given width across the columns.
  const cellPx =
    fontSize ??
    (size != null && grid
      ? widthOf(size) / (grid.cols * grid.charAspect)
      : undefined);

  return (
    <div
      className={className}
      style={{ containerType: "inline-size", position: "relative" }}
      role="img"
      aria-label={text}
    >
      {grid ? (
        <div style={{ position: "relative" }}>
          <pre ref={preRef} aria-hidden style={preStyle(grid, cellPx, color)} />
          <pre
            ref={edgeRef}
            aria-hidden
            style={{
              ...preStyle(grid, cellPx, color),
              position: "absolute",
              top: 0,
              left: 0,
              opacity: EDGE_OPACITY,
            }}
          />
        </div>
      ) : (
        // Reserves layout while the stencil is measured.
        <div aria-hidden style={{ aspectRatio: "3 / 1" }} />
      )}
    </div>
  );
}
Numeral Text
