"use client";

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

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

/** Anything drawImage accepts, plus a Next static import or a plain URL. */
export type ImageSource =
  | string
  | { src: string }
  | HTMLImageElement
  | HTMLCanvasElement;

/** A number is the width; pin both sides and the image is fitted to the box. */
export type Extent = number | { width: number; height?: number };

export type NumeralImageProps = {
  /** Same-origin, or CORS-enabled. */
  src: ImageSource;
  /** 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;

  /** Ink cutoff, 0-1. Raise it to pick up lighter tones. */
  threshold?: number;
  /** Treat light pixels as ink instead of dark ones. */
  invert?: boolean;
  /** Dither to fake tone. Good for gradients, noisy for busy photos. */
  dither?: boolean;

  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;
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);

const resolveSrc = (s: ImageSource) =>
  typeof s === "string" ? s : "src" in s ? s.src : s;

/** Average each SUPERSAMPLE x SUPERSAMPLE block down to one cell's coverage. */
function sampleBlocks(
  ctx: CanvasRenderingContext2D,
  cols: number,
  rows: number,
  invert: boolean
): 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++) {
          const o = (row + x * SUPERSAMPLE + sx) * 4;
          const lum =
            (0.2126 * data[o] + 0.7152 * data[o + 1] + 0.0722 * data[o + 2]) /
            255;
          sum += (data[o + 3] / 255) * (invert ? lum : 1 - lum);
        }
      }
      out[y * cols + x] = sum / per;
    }
  }
  return out;
}

const BINS = 256;

/**
 * Stretch coverage onto the full range so a flat photo still reads. The ends
 * are percentiles, not min/max: one highlight would otherwise eat the range.
 */
export function autoLevel(g: Float32Array, clip = 0.02) {
  const hist = new Uint32Array(BINS);
  for (let i = 0; i < g.length; i++) {
    const v = g[i] < 0 ? 0 : g[i] > 1 ? 1 : g[i];
    hist[Math.floor(v * (BINS - 1))]++;
  }

  const drop = Math.floor(g.length * clip);
  let lo = 0;
  for (let seen = 0; lo < BINS - 1; lo++) {
    seen += hist[lo];
    if (seen > drop) break;
  }
  let hi = BINS - 1;
  for (let seen = 0; hi > lo; hi--) {
    seen += hist[hi];
    if (seen > drop) break;
  }

  // The ends come back off the real data, so a picture with no outliers is
  // levelled exactly as it was and picks up no 1/255 rounding step.
  const loV = lo / (BINS - 1);
  const hiV = (hi + 1) / (BINS - 1);
  let min = Infinity;
  let max = -Infinity;
  for (let i = 0; i < g.length; i++) {
    const v = g[i];
    if (v < loV || v > hiV) continue;
    if (v < min) min = v;
    if (v > max) max = v;
  }
  if (min > max) return;
  const span = max - min;
  // Nothing to stretch, and blowing rounding noise up to 0..1 would print it.
  if (span < 0.01) return;
  for (let i = 0; i < g.length; i++) {
    const v = (g[i] - min) / span;
    g[i] = v < 0 ? 0 : v > 1 ? 1 : v;
  }
}

/** Floyd-Steinberg: push each cell's rounding error onto its neighbours. */
export function dither(
  g: Float32Array,
  cols: number,
  rows: number,
  cut: number
) {
  const mask = new Uint8Array(cols * rows);
  for (let y = 0; y < rows; y++) {
    for (let x = 0; x < cols; x++) {
      const i = y * cols + x;
      const on = g[i] >= cut ? 1 : 0;
      mask[i] = on;
      const err = g[i] - on;
      if (x + 1 < cols) g[i + 1] += (err * 7) / 16;
      if (y + 1 < rows) {
        if (x > 0) g[i + cols - 1] += (err * 3) / 16;
        g[i + cols] += (err * 5) / 16;
        if (x + 1 < cols) g[i + cols + 1] += (err * 1) / 16;
      }
    }
  }
  return mask;
}

/** 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 buildImageGrid(
  img: HTMLImageElement | HTMLCanvasElement,
  cols: number,
  threshold: number,
  invert: boolean,
  useDither: boolean,
  smooth: boolean,
  /** Fit the stencil to this w/h instead of the image's own proportions. */
  targetAspect?: number
): Grid | null {
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d", { willReadFrequently: true });
  const w = img instanceof HTMLCanvasElement ? img.width : img.naturalWidth;
  const h = img instanceof HTMLCanvasElement ? img.height : img.naturalHeight;
  if (!ctx || !w || !h) return null;

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

  canvas.width = cols * SUPERSAMPLE;
  canvas.height = rows * SUPERSAMPLE;
  // Drawing stretched to fill is exactly the aspect correction the grid needs.
  ctx.drawImage(img, 0, 0, canvas.width, canvas.height);

  const g = sampleBlocks(ctx, cols, rows, invert);
  autoLevel(g);
  // Dithering already spends every cell on tone, so there is no edge tier.
  if (useDither) {
    const mask = dither(g, cols, rows, threshold);
    return {
      cols,
      rows,
      mask,
      edge: new Uint8Array(mask.length),
      charAspect: ca,
    };
  }
  const t = tiers(g, threshold, threshold * 0.45, smooth);
  return { cols, rows, ...t, charAspect: ca };
}

const loadImage = (src: string) =>
  new Promise<HTMLImageElement>((resolve, reject) => {
    const img = new Image();
    img.crossOrigin = "anonymous";
    img.onload = () => resolve(img);
    img.onerror = () => reject(new Error(`could not load ${src}`));
    img.src = src;
  });

const SPIN = "numeral-image-spin";

/** A cropped ring, centred over whatever is already drawn. */
function Spinner() {
  return (
    <span
      aria-hidden
      style={{
        position: "absolute",
        top: "50%",
        left: "50%",
        marginTop: -8,
        marginLeft: -8,
        width: 16,
        height: 16,
        borderRadius: "50%",
        border: "1.5px solid currentColor",
        borderTopColor: "transparent",
        borderRightColor: "transparent",
        opacity: 0.45,
        animation: `${SPIN} 700ms linear infinite`,
      }}
    >
      <style>{`@keyframes ${SPIN}{to{transform:rotate(360deg)}}`}</style>
    </span>
  );
}

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 NumeralImage({
  src,
  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,
  threshold = 0.5,
  invert = false,
  dither: useDither = false,
  color,
  smooth = true,
  fps = 24,
  charset = "0123456789",
  className,
}: NumeralImageProps) {
  const [grid, setGrid] = useState<Grid | null>(null);
  const preRef = useRef<HTMLPreElement>(null);
  const edgeRef = useRef<HTMLPreElement>(null);

  // 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;

  // Only an explicit width *and* height overrides the image's own proportions.
  const boxAspect =
    size != null && typeof size !== "number" && size.height
      ? size.width / size.height
      : undefined;

  // Decoding is split from stencilling on purpose: changing cols or threshold
  // must not re-fetch the image, and must not blank what is already on screen.
  const [source, setSource] = useState<
    HTMLImageElement | HTMLCanvasElement | null
  >(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const resolved = resolveSrc(src);
    if (typeof resolved !== "string") {
      setSource(resolved);
      return;
    }
    let cancelled = false;
    setLoading(true);
    loadImage(resolved)
      .then((img) => {
        if (cancelled) return;
        setSource(img);
        setLoading(false);
      })
      .catch(() => {
        if (cancelled) return;
        setSource(null);
        setLoading(false);
      });
    return () => {
      cancelled = true;
    };
  }, [src]);

  useEffect(() => {
    // No source yet: hold the previous stencil rather than flashing empty.
    if (!source) return;
    setGrid(
      buildImageGrid(
        source,
        gridCols,
        threshold,
        invert,
        useDither,
        smooth,
        boxAspect
      )
    );
  }, [source, gridCols, threshold, invert, useDither, smooth, boxAspect]);

  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="image rendered as digits"
    >
      {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 image loads and the stencil is measured.
        <div aria-hidden style={{ aspectRatio: "3 / 1" }} />
      )}
      {loading ? <Spinner /> : null}
    </div>
  );
}
Numeral Image
