Voiceprint

import { clsx, type ClassValue } from "clsx";
import { twMerge } from "tailwind-merge";

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

"use client";

import * as React from "react";

import { cn } from "@/lib/utils";

/**
 * Keep:
 * - Every frame runs in `createPrint`, outside React: one rAF loop draws to a canvas and reads a
 *   function `level` each frame, and it sleeps once the last sound has left both edges, off
 *   screen, or in a hidden tab.
 * - Nothing moves: each column shows the loudest history sample from as long ago as sound takes
 *   to reach it at `speed`, so sound travels out mirrored, and each sample keeps its tone.
 * - Marks are batched into one stroke per tone and opacity step, and the resting grid is drawn
 *   once per size and color, then copied under every frame.
 * - A `source` runs through a noise gate (a floor that drops fast and creeps up slowly, shut while
 *   it warms up), so tape hiss and room tone never print.
 * - Reduced motion keeps the print still: a band around the middle takes the speaker's color by
 *   opacity alone, read from a `useSyncExternalStore` flag that's false while hydrating.
 */
const TIMING = {
  /** What was said traveling out to both edges, in px/s (the `speed` prop). */
  speed: 90,
  /** The level rising to a new sound, as a time constant in seconds (the `attack` prop). */
  attack: 0.03,
  /** The level falling away after a sound, as a time constant in seconds (the `release` prop). */
  release: 0.14,
  /** History samples per second; each column reads the past from these. */
  sampleRate: 60,
  /** The noise floor dropping to a quieter moment, as a time constant in seconds. */
  noiseFall: 0.08,
  /** The noise floor creeping up under steady sound, as a time constant in seconds. */
  noiseRise: 3,
  /** How fast it rises while it learns the hiss, as a time constant in seconds. */
  noiseLearn: 0.15,
  /** How long a new source learns its hiss, in seconds. */
  learn: 1,
  /** The gate staying shut when a source starts, so the first hiss never prints, in seconds. */
  warmup: 0.3,
  /** Between level checks while asleep, in ms. */
  poll: 100,
} as const;

/* ─────────────────────────────────────────────────────────
 * VOICEPRINT STORYBOARD
 *
 *  rest     a calm grid of faint dots, one every `spacing`
 *           px, fading out toward the edges
 *  speak    sound comes in at the middle column. Dots inside
 *           its loudness envelope (above and below the middle
 *           line, up to `reach` of half the height) stretch
 *           into short vertical dashes in the speaker's color.
 *           The level rises in 30ms and falls in 140ms, so a
 *           syllable prints as one stroke
 *  travel   what was said moves outward to both edges at
 *           `speed` px/s, mirrored, so a sentence spreads
 *           across the surface like a pressed waveform. Sound
 *           loses 60% of its ink on the way to the edge
 *  turn     `tone` switches speakers. Sound already printed
 *           keeps the color it was spoken in, so a call reads
 *           as two colors leaving the middle
 *  listen   a `source` runs through a noise gate: the floor
 *           drops to any quieter moment in 80ms and creeps up
 *           under steady sound over 3s (0.15s in the first
 *           second, while it learns the hiss), and the gate is
 *           shut for the first 0.3s, so tape hiss and room
 *           tone never print
 *  silence  once the last sound has left both edges the field
 *           is back at rest, and the loop sleeps until the
 *           level rises again (checked every 100ms)
 *  paused   the print holds still where it is and the level
 *           isn't read
 *  sleep    off screen or in a hidden tab nothing draws, and
 *           the print picks up where it stopped
 *  reduced  nothing travels: the dots in a band around the
 *           middle take on the speaker's color as loud as the
 *           voice is, by opacity alone, and go back to rest in
 *           silence
 * ───────────────────────────────────────────────────────── */

const VOICEPRINT = {
  dot: 1.6, // px, diameter of a resting dot and the width of a faint dash
  thicken: 0.45, // a dash at full ink is this much wider than a dot
  dash: 0.5, // a dash at full depth is this share of `spacing` long; shorter keeps the grid showing through
  rest: 0.18, // opacity of a resting dot
  soft: 1.4, // spacings over which a dot inside the envelope grows into a full dash
  history: 4096, // samples kept: 68s at 60 a second, enough for any width at slow speeds
  ageFade: 0.6, // share of its ink a sound has lost when it reaches the edge (`falloff`)
  edge: 0.14, // share of the width the field fades out over at each side
  edgeY: 0.06, // share of the height it fades out over at the top and bottom
  silent: 0.02, // a level under this counts as silence
  levels: 10, // opacity steps the marks are batched into
  gain: 1.8, // microphone and media loudness: sqrt(rms over the noise floor) × gain …
  floor: 0.04, // … minus this
  gate: [1.5, 2.3], // loudness over the noise floor, as a ratio, from gate shut to fully open
  fft: 1024, // analyser window, in samples
  band: [0.06, 0.3], // reduced: the lit band fades out this far from the middle, as shares of the width
  bandY: [0.08, 0.3], // and of the height
  bandInk: 0.9, // reduced: opacity of the band's dots at full loudness
  maxDpr: 2,
} as const;

type Tone = "accent" | "ink";
type Level = number | (() => number);

type Options = {
  level: Level;
  tone: Tone;
  speed: number;
  spacing: number;
  reach: number;
  attack: number;
  release: number;
  falloff: number;
  paused: boolean;
  reduced: boolean;
};

const clamp01 = (t: number) => Math.min(1, Math.max(0, t));
const smoothstep = (a: number, b: number, x: number) => {
  const t = clamp01((x - a) / (b - a));
  return t * t * (3 - 2 * t);
};

const REDUCED = "(prefers-reduced-motion: reduce)";
const subscribeReduced = (onChange: () => void) => {
  const query = window.matchMedia(REDUCED);
  query.addEventListener("change", onChange);
  return () => query.removeEventListener("change", onChange);
};

/** Reduced motion from the media query, false on the server and in the hydration render. */
function useReduced() {
  return React.useSyncExternalStore(
    subscribeReduced,
    () => window.matchMedia(REDUCED).matches,
    () => false,
  );
}

/* ── Listening ─────────────────────────────────────────── */
// A media element can feed only one source node, ever, and its sound then
// plays through that node's context. So elements share one context that is
// never closed (closing it would mute them), wired on the element's first
// play so no context is made before a gesture. Streams get their own.

type Ear = {
  analyser: AnalyserNode | null; // null until a media element first plays
  data: Float32Array<ArrayBuffer>;
  noise: number; // running estimate of the source's noise floor (rms), -1 before the first reading
  heard: number; // s of sound read since the source started
  idle: () => boolean; // a paused element: its silence says nothing about its noise
  release: () => void;
};

let mediaContext: AudioContext | null = null;
const mediaNodes = new WeakMap<HTMLMediaElement, MediaElementAudioSourceNode>();

function createAnalyser(context: AudioContext) {
  const analyser = context.createAnalyser();
  analyser.fftSize = VOICEPRINT.fft;
  return analyser;
}

function listen(source: HTMLMediaElement | MediaStream): Ear | null {
  if (typeof window.AudioContext === "undefined") return null;
  const ear: Ear = {
    analyser: null,
    data: new Float32Array(VOICEPRINT.fft),
    noise: -1,
    heard: 0,
    idle: () => false,
    release: () => {},
  };
  try {
    if (source instanceof MediaStream) {
      if (source.getAudioTracks().length === 0) return null;
      const context = new AudioContext();
      const node = context.createMediaStreamSource(source);
      const analyser = createAnalyser(context);
      // Not connected to the speakers: a microphone would echo.
      node.connect(analyser);
      void context.resume();
      ear.analyser = analyser;
      ear.release = () => {
        node.disconnect();
        void context.close();
      };
      return ear;
    }

    const element = source;
    let node: MediaElementAudioSourceNode | null = null;
    let analyser: AnalyserNode | null = null;
    const wire = () => {
      ear.noise = -1;
      ear.heard = 0;
      try {
        mediaContext ??= new AudioContext();
        void mediaContext.resume();
        if (analyser) return;
        node = mediaNodes.get(element) ?? null;
        if (!node) {
          node = mediaContext.createMediaElementSource(element);
          node.connect(mediaContext.destination);
          mediaNodes.set(element, node);
        }
        analyser = createAnalyser(mediaContext);
        node.connect(analyser);
        ear.analyser = analyser;
      } catch {
        // Already wired into another context: it reads as silence.
      }
    };
    if (!element.paused) wire();
    element.addEventListener("play", wire);
    ear.idle = () => element.paused;
    ear.release = () => {
      element.removeEventListener("play", wire);
      if (!node || !analyser) return;
      try {
        node.disconnect(analyser);
      } catch {
        // already disconnected
      }
    };
    return ear;
  } catch {
    return null;
  }
}

function loudness(ear: Ear, dt: number) {
  const analyser = ear.analyser;
  if (!analyser || ear.idle()) return 0;
  analyser.getFloatTimeDomainData(ear.data);
  let sum = 0;
  for (let i = 0; i < ear.data.length; i++) sum += ear.data[i] * ear.data[i];
  const rms = Math.sqrt(sum / ear.data.length);
  // A noise floor that drops at once to a quieter moment and creeps up under
  // steady sound, so tape hiss and room tone sit under it and read as silence.
  ear.heard += dt;
  if (ear.noise < 0) ear.noise = rms;
  else {
    const rise = ear.heard < TIMING.learn ? TIMING.noiseLearn : TIMING.noiseRise;
    const tau = rms < ear.noise ? TIMING.noiseFall : rise;
    ear.noise += (rms - ear.noise) * (1 - Math.exp(-dt / tau));
  }
  if (ear.heard < TIMING.warmup) return 0;
  const open = smoothstep(VOICEPRINT.gate[0], VOICEPRINT.gate[1], rms / Math.max(ear.noise, 1e-4));
  return clamp01(Math.sqrt(Math.max(0, rms - ear.noise)) * VOICEPRINT.gain - VOICEPRINT.floor) * open;
}

/* ── Print ─────────────────────────────────────────────── */
// Everything that runs per frame, outside React.

function createPrint() {
  let root: HTMLElement | null = null;
  let canvas: HTMLCanvasElement | null = null;
  let ctx: CanvasRenderingContext2D | null = null;
  let probes: { ink: HTMLElement; accent: HTMLElement } | null = null;
  let colors: [string, string] = ["#18181b", "#2747ff"]; // by tone index: 0 ink, 1 accent
  let restLayer: HTMLCanvasElement | null = null;

  let options: Options = {
    level: 0,
    tone: "accent",
    speed: TIMING.speed,
    spacing: 10,
    reach: 0.9,
    attack: TIMING.attack,
    release: TIMING.release,
    falloff: VOICEPRINT.ageFade,
    paused: false,
    reduced: false,
  };
  let ear: Ear | null = null;

  // The grid, rebuilt when the root changes size.
  let width = 0;
  let height = 0;
  let dpr = 1;
  let cols = 0;
  let rows = 0;
  let ox = 0;
  let oy = 0;
  let colAge = new Float32Array(0); // s back in time each column shows
  let colFade = new Float32Array(0);
  let rowFade = new Float32Array(0);
  let maxAge = 0; // s for a sound to leave the edge
  let slot = 0; // s of history one column covers

  // Marks to stroke this frame: x, y, length, batched by tone × opacity step.
  let marks: Float32Array[] = [];
  let markCount = new Int32Array(0);

  // History: one loudness and speaker per sample, newest at head - 1.
  const N = VOICEPRINT.history;
  const DT = 1 / TIMING.sampleRate;
  const levels = new Float32Array(N);
  const tones = new Uint8Array(N);
  let head = 0;
  let sampledAt = 0;
  let lastLoud = -Infinity;
  let smooth = 0;
  let lastT = 0;

  let raf = 0;
  let poll = 0;
  let visible = false;
  let hidden = false;
  const cleanups: (() => void)[] = [];

  function readLevel(dt: number) {
    if (ear) return loudness(ear, dt);
    const level = options.level;
    const value = typeof level === "function" ? level() : level;
    return Number.isFinite(value) ? clamp01(value) : 0;
  }

  function readColors() {
    if (!probes) return;
    colors = [getComputedStyle(probes.ink).color, getComputedStyle(probes.accent).color];
  }

  function push(tone: number, alpha: number, x: number, y: number, length: number) {
    const step = Math.min(VOICEPRINT.levels - 1, Math.floor(alpha * VOICEPRINT.levels));
    if (step < 0) return;
    const b = tone * VOICEPRINT.levels + step;
    const n = markCount[b];
    const data = marks[b];
    if (!data || n * 3 + 2 >= data.length) return;
    data[n * 3] = x;
    data[n * 3 + 1] = y;
    data[n * 3 + 2] = length;
    markCount[b] = n + 1;
  }

  function flush(target: CanvasRenderingContext2D, thicken: boolean) {
    target.lineCap = "round";
    for (let tone = 0; tone < 2; tone++) {
      for (let step = 0; step < VOICEPRINT.levels; step++) {
        const b = tone * VOICEPRINT.levels + step;
        const n = markCount[b];
        if (!n) continue;
        const data = marks[b];
        const share = step / (VOICEPRINT.levels - 1);
        target.globalAlpha = (step + 1) / VOICEPRINT.levels;
        target.strokeStyle = colors[tone];
        target.lineWidth = VOICEPRINT.dot * (thicken ? 1 + VOICEPRINT.thicken * share : 1);
        target.beginPath();
        for (let i = 0; i < n; i++) {
          const x = data[i * 3];
          const y = data[i * 3 + 1];
          // A zero-length segment with round caps draws a dot.
          const half = data[i * 3 + 2] / 2 + 0.01;
          target.moveTo(x, y - half);
          target.lineTo(x, y + half);
        }
        target.stroke();
      }
    }
    target.globalAlpha = 1;
    markCount.fill(0);
  }

  /** The resting grid, drawn once per size and color, then copied under every frame. */
  function drawRest() {
    if (!canvas || !width) return;
    restLayer ??= document.createElement("canvas");
    restLayer.width = canvas.width;
    restLayer.height = canvas.height;
    const rest = restLayer.getContext("2d");
    if (!rest) return;
    rest.setTransform(dpr, 0, 0, dpr, 0, 0);
    rest.clearRect(0, 0, width, height);
    markCount.fill(0);
    const s = options.spacing;
    for (let c = 0; c < cols; c++) {
      if (colFade[c] < 0.02) continue;
      for (let r = 0; r < rows; r++) {
        push(0, VOICEPRINT.rest * colFade[c] * rowFade[r], ox + c * s, oy + r * s, 0);
      }
    }
    flush(rest, false);
  }

  function layout(force = false) {
    if (!root || !canvas) return;
    const w = root.clientWidth;
    const h = root.clientHeight;
    dpr = Math.min(window.devicePixelRatio || 1, VOICEPRINT.maxDpr);
    if (!force && w === width && h === height && canvas.width === Math.round(w * dpr)) return;
    width = w;
    height = h;
    canvas.width = Math.round(w * dpr);
    canvas.height = Math.round(h * dpr);

    const s = options.spacing;
    const speed = Math.max(1, options.speed);
    cols = Math.max(1, Math.floor(w / s));
    rows = Math.max(1, Math.floor(h / s));
    ox = (w - (cols - 1) * s) / 2;
    oy = (h - (rows - 1) * s) / 2;
    colAge = new Float32Array(cols);
    colFade = new Float32Array(cols);
    rowFade = new Float32Array(rows);
    for (let c = 0; c < cols; c++) {
      const x = ox + c * s;
      const xn = x / w;
      colAge[c] = Math.abs(x - w / 2) / speed;
      colFade[c] = smoothstep(0, VOICEPRINT.edge, xn) * smoothstep(0, VOICEPRINT.edge, 1 - xn);
    }
    for (let r = 0; r < rows; r++) {
      const yn = (oy + r * s) / h;
      rowFade[r] = smoothstep(0, VOICEPRINT.edgeY, yn) * smoothstep(0, VOICEPRINT.edgeY, 1 - yn);
    }
    slot = s / speed;
    maxAge = w / 2 / speed + slot;
    marks = Array.from({ length: 2 * VOICEPRINT.levels }, () => new Float32Array(cols * rows * 3));
    markCount = new Int32Array(2 * VOICEPRINT.levels);
    drawRest();
  }

  /** Dashes for every column, each showing the loudest moment of its slice of the past. */
  function collectPrint() {
    const s = options.spacing;
    const mid = height / 2;
    const half = (height / 2) * options.reach;
    const soft = VOICEPRINT.soft * s;
    const oldest = head - N;
    for (let c = 0; c < cols; c++) {
      const fade = colFade[c];
      if (fade < 0.02) continue;
      const age = colAge[c];
      const from = Math.max(0, Math.floor((age - slot / 2) / DT));
      const to = Math.ceil((age + slot / 2) / DT);
      let level = 0;
      let tone = 0;
      for (let k = from; k <= to; k++) {
        const i = head - 1 - k;
        if (i < 0 || i < oldest) break;
        const v = levels[i % N];
        if (v > level) {
          level = v;
          tone = tones[i % N];
        }
      }
      if (level < VOICEPRINT.silent) continue;
      const reach = level * half;
      if (reach < s * 0.3) continue;
      const ink = fade * (1 - options.falloff * Math.min(1, age / maxAge));
      const x = ox + c * s;
      const r0 = Math.max(0, Math.ceil((mid - reach - soft - oy) / s));
      const r1 = Math.min(rows - 1, Math.floor((mid + reach + soft - oy) / s));
      for (let r = r0; r <= r1; r++) {
        const y = oy + r * s;
        const depth = smoothstep(-0.3 * s, soft, reach - Math.abs(y - mid));
        if (depth < 0.03) continue;
        const alpha = (VOICEPRINT.rest + (1 - VOICEPRINT.rest) * depth) * ink * rowFade[r];
        push(tone, alpha, x, y, depth * VOICEPRINT.dash * s);
      }
    }
  }

  /** Reduced: the band around the middle takes the speaker's color as loud as the voice is. */
  function collectBand() {
    if (smooth < VOICEPRINT.silent) return;
    const s = options.spacing;
    const tone = options.tone === "accent" ? 1 : 0;
    const [x0, x1] = VOICEPRINT.band;
    const [y0, y1] = VOICEPRINT.bandY;
    for (let c = 0; c < cols; c++) {
      const x = ox + c * s;
      const bx = 1 - smoothstep(x0, x1, Math.abs(x / width - 0.5));
      if (bx < 0.02) continue;
      for (let r = 0; r < rows; r++) {
        const y = oy + r * s;
        const k = smooth * bx * (1 - smoothstep(y0, y1, Math.abs(y / height - 0.5)));
        if (k < 0.02) continue;
        const alpha = (VOICEPRINT.rest + (VOICEPRINT.bandInk - VOICEPRINT.rest) * k) * colFade[c] * rowFade[r];
        push(tone, alpha, x, y, 0);
      }
    }
  }

  function draw() {
    if (!ctx || !canvas || !width) return;
    ctx.setTransform(1, 0, 0, 1, 0, 0);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if (restLayer) ctx.drawImage(restLayer, 0, 0);
    ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
    if (options.reduced) collectBand();
    else collectPrint();
    flush(ctx, !options.reduced);
  }

  function sampleTo(t: number) {
    // Coming back from sleep: carry on from here instead of replaying the gap.
    if (t - sampledAt > 0.25) sampledAt = t - DT;
    const tone = options.tone === "accent" ? 1 : 0;
    while (sampledAt + DT <= t) {
      const i = head % N;
      levels[i] = smooth;
      tones[i] = tone;
      if (smooth >= VOICEPRINT.silent) lastLoud = head;
      head++;
      sampledAt += DT;
    }
  }

  function quiet() {
    if (smooth >= VOICEPRINT.silent) return false;
    if (options.reduced) return true;
    return (head - 1 - lastLoud) * DT > maxAge + slot;
  }

  function frame(ms: number) {
    raf = 0;
    if (!ctx || !visible || hidden) return;
    const t = ms / 1000;
    const dt = Math.min(0.1, Math.max(0, t - lastT));
    lastT = t;
    if (options.paused) {
      draw();
      return;
    }
    const target = readLevel(dt);
    const tau = target > smooth ? options.attack : options.release;
    smooth += (target - smooth) * (1 - Math.exp(-dt / tau));
    if (smooth < 1e-4) smooth = 0;
    if (!options.reduced) sampleTo(t);
    draw();
    if (quiet()) {
      schedulePoll();
      return;
    }
    raf = requestAnimationFrame(frame);
  }

  function schedulePoll() {
    window.clearTimeout(poll);
    poll = window.setTimeout(() => {
      poll = 0;
      if (!visible || hidden || options.paused) return;
      if (readLevel(TIMING.poll / 1000) >= VOICEPRINT.silent) wake();
      else schedulePoll();
    }, TIMING.poll);
  }

  function wake() {
    if (raf || !ctx || !visible || hidden) return;
    window.clearTimeout(poll);
    poll = 0;
    lastT = performance.now() / 1000;
    raf = requestAnimationFrame(frame);
  }

  function clearHistory() {
    levels.fill(0);
    head = 0;
    lastLoud = -Infinity;
  }

  return {
    connect(el: { root: HTMLElement; canvas: HTMLCanvasElement; ink: HTMLElement; accent: HTMLElement }) {
      root = el.root;
      canvas = el.canvas;
      ctx = canvas.getContext("2d");
      probes = { ink: el.ink, accent: el.accent };
      readColors();
      layout(true);
      draw();

      const resize = new ResizeObserver(() => {
        layout();
        draw();
      });
      resize.observe(root);
      const io = new IntersectionObserver(([entry]) => {
        visible = entry.isIntersecting;
        if (visible) wake();
      });
      io.observe(root);
      const onVisibility = () => {
        hidden = document.hidden;
        if (!hidden) wake();
      };
      document.addEventListener("visibilitychange", onVisibility);

      const scheme = window.matchMedia("(prefers-color-scheme: dark)");
      const recolor = () => {
        readColors();
        drawRest();
        draw();
      };
      scheme.addEventListener("change", recolor);
      const themeAttrs = new MutationObserver(recolor);
      themeAttrs.observe(document.documentElement, { attributes: true, attributeFilter: ["class", "data-theme", "style"] });

      cleanups.push(
        () => resize.disconnect(),
        () => io.disconnect(),
        () => document.removeEventListener("visibilitychange", onVisibility),
        () => scheme.removeEventListener("change", recolor),
        () => themeAttrs.disconnect(),
      );
      return () => {
        cancelAnimationFrame(raf);
        raf = 0;
        window.clearTimeout(poll);
        poll = 0;
        cleanups.splice(0).forEach((fn) => fn());
        ear?.release();
        ear = null;
        root = canvas = null;
        ctx = null;
        probes = null;
        restLayer = null;
        width = height = 0;
      };
    },

    setOptions(next: Options) {
      const relayout = next.spacing !== options.spacing || next.speed !== options.speed;
      const switched = next.reduced !== options.reduced;
      options = next;
      if (switched) {
        clearHistory();
        smooth = 0;
      }
      if (relayout) layout(true);
      draw();
      wake();
    },

    setSource(source: HTMLMediaElement | MediaStream | null) {
      ear?.release();
      ear = source ? listen(source) : null;
      wake();
    },
  };
}

/* ── Voiceprint ────────────────────────────────────────── */

export interface VoiceprintProps extends React.HTMLAttributes<HTMLDivElement> {
  /** Loudness now, from 0 to 1. Pass a function to have it read every frame, so a live level never re-renders your component. */
  level?: number | (() => number);
  /** An `<audio>` or `<video>` element, or a `MediaStream` (a microphone, a call), to listen to. While it's given, its loudness replaces `level`. A cross-origin file reads as silence unless it's served with CORS. */
  source?: HTMLMediaElement | MediaStream | null;
  /** Who is speaking now: the accent color or the ink color. Sound already printed keeps the color it was spoken in. */
  tone?: Tone;
  /** How fast what was said travels out to the edges, in px per second. */
  speed?: number;
  /** Distance between dots, in px. */
  spacing?: number;
  /** How far the loudest sound reaches from the middle line, as a share of half the height. */
  reach?: number;
  /** Seconds the level takes to rise to a new sound (a time constant). Longer softens the start of each stroke. */
  attack?: number;
  /** Seconds the level takes to fall away after a sound (a time constant). Longer smears syllables together. */
  release?: number;
  /** Share of its ink a sound has lost by the time it reaches the edge, from 0 (none) to 1 (all of it). */
  falloff?: number;
  /** Hold the print still where it is and stop reading the level. */
  paused?: boolean;
  /** Classes that set the resting dots and the `ink` speaker's color (a `text-*` color). */
  inkClassName?: string;
  /** Classes that set the `accent` speaker's color (a `text-*` color). */
  accentClassName?: string;
}

export function Voiceprint({
  level = 0,
  source = null,
  tone = "accent",
  speed = TIMING.speed,
  spacing = 10,
  reach = 0.9,
  attack = TIMING.attack,
  release = TIMING.release,
  falloff = VOICEPRINT.ageFade,
  paused = false,
  inkClassName,
  accentClassName,
  className,
  children,
  ...props
}: VoiceprintProps) {
  const rootRef = React.useRef<HTMLDivElement>(null);
  const canvasRef = React.useRef<HTMLCanvasElement>(null);
  const inkRef = React.useRef<HTMLSpanElement>(null);
  const accentRef = React.useRef<HTMLSpanElement>(null);
  const [print] = React.useState(createPrint);
  const reduced = useReduced();

  React.useLayoutEffect(() => {
    const root = rootRef.current;
    const canvas = canvasRef.current;
    const ink = inkRef.current;
    const accent = accentRef.current;
    if (!root || !canvas || !ink || !accent) return;
    return print.connect({ root, canvas, ink, accent });
  }, [print]);

  React.useEffect(() => {
    print.setOptions({
      level,
      tone,
      speed,
      spacing,
      reach,
      attack: Math.max(0.001, attack),
      release: Math.max(0.001, release),
      falloff: Math.min(1, Math.max(0, falloff)),
      paused,
      reduced,
    });
  }, [print, level, tone, speed, spacing, reach, attack, release, falloff, paused, reduced]);

  React.useEffect(() => {
    print.setSource(source);
    return () => print.setSource(null);
  }, [print, source]);

  return (
    <div ref={rootRef} className={cn("relative isolate overflow-hidden", className)} {...props}>
      <canvas ref={canvasRef} aria-hidden className="pointer-events-none absolute inset-0 -z-10 size-full" />
      {/* Probes the canvas reads its colors from. Defaults apply only when no class is given, so a `dark:` default can't win over yours. */}
      <span ref={inkRef} aria-hidden className={cn("hidden", inkClassName ?? "text-zinc-900 dark:text-zinc-100")} />
      <span ref={accentRef} aria-hidden className={cn("hidden", accentClassName ?? "text-[#2747ff] dark:text-[#6b84ff]")} />
      {children}
    </div>
  );
}