Sparkline

"use client";

import * as React from "react";
import { useReducedMotion } from "@/hooks/ledger/use-media-query";
import { cn } from "@/lib/ledger/cn";

export interface SparklineProps extends React.ComponentPropsWithoutRef<"div"> {
  data: number[];
  height?: number;
  label?: string;
  polarity?: "standard" | "inverted" | "neutral";
  showEndpoint?: boolean;
}

/**
 * An impression, not a chart. No axes, no gridlines, no scrub — if a user
 * needs values they need `MoneyChart`.
 *
 * Draws once, on first paint or scroll-into-view. Never on data change.
 */
export const Sparkline = React.forwardRef<HTMLDivElement, SparklineProps>(
  ({ className, data, height = 32, polarity = "standard", showEndpoint = true, label, ...props }, ref) => {
    const drawRef = React.useRef<SVGGElement | null>(null);
    const containerRef = React.useRef<HTMLDivElement | null>(null);
    const reduced = useReducedMotion();
    const drawn = React.useRef(false);

    React.useEffect(() => {
      const node = containerRef.current;
      const group = drawRef.current;
      if (!node || !group || reduced || drawn.current) return;
      const observer = new IntersectionObserver((entries) => {
        if (!entries[0]?.isIntersecting || drawn.current) return;
        drawn.current = true;
        group.style.animation = "ledger-wipe 600ms var(--ease-out) forwards";
        observer.disconnect();
      });
      observer.observe(node);
      return () => observer.disconnect();
    }, [reduced]);

    if (data.length < 2) return null;

    const width = 120;
    const min = Math.min(...data);
    const max = Math.max(...data);
    const span = max - min || 1;
    const points = data.map((v, i) => ({
      x: (i / (data.length - 1)) * width,
      y: height - 2 - ((v - min) / span) * (height - 4),
    }));
    const d = points.map((p, i) => `${i === 0 ? "M" : "L"}${p.x.toFixed(2)},${p.y.toFixed(2)}`).join(" ");

    const net = data[data.length - 1] - data[0];
    const stroke =
      polarity === "neutral"
        ? "var(--text-secondary)"
        : (polarity === "standard") === net >= 0
          ? "var(--positive)"
          : "var(--negative)";

    const last = points[points.length - 1];

    return (
      <div
        aria-label={label ?? `Trend, ${net >= 0 ? "up" : "down"} over ${data.length} points`}
        className={cn("relative w-full", className)}
        ref={mergeRefs(ref, containerRef)}
        role="img"
        {...props}
      >
        <svg
          aria-hidden="true"
          className="w-full"
          preserveAspectRatio="none"
          style={{ height }}
          viewBox={`0 0 ${width} ${height}`}
        >
          <g ref={drawRef}>
            <path
              d={d}
              fill="none"
              stroke={stroke}
              strokeLinecap="round"
              strokeLinejoin="round"
              strokeWidth={1.5}
              vectorEffect="non-scaling-stroke"
            />
            {showEndpoint ? (
              <circle cx={last.x} cy={last.y} fill={stroke} r={2} vectorEffect="non-scaling-stroke" />
            ) : null}
          </g>
        </svg>
      </div>
    );
  },
);
Sparkline.displayName = "Sparkline";

function mergeRefs<T>(...refs: (React.Ref<T> | undefined)[]) {
  return (node: T) => {
    for (const ref of refs) {
      if (typeof ref === "function") ref(node);
      else if (ref) (ref as React.MutableRefObject<T | null>).current = node;
    }
  };
}