Number field

"use client";

import * as React from "react";
import { AnimatePresence, animate, motion, useMotionValue } from "motion/react";
import { Minus, Plus } from "lucide-react";
import { cn } from "@/lib/utils";

export interface NumberFieldProps {
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  /** Display formatter, e.g. (n) => `${n} seats`. */
  format?: (value: number) => string;
  size?: "sm" | "md";
  /** Drag the label horizontally to change the value. */
  scrub?: boolean;
  disabled?: boolean;
  className?: string;
  "aria-label"?: string;
}

const PX_PER_STEP = 10;
const rubberBand = (overflow: number) => Math.sign(overflow) * Math.sqrt(Math.abs(overflow)) * 2.2;

export function NumberField({
  value,
  defaultValue = 0,
  onValueChange,
  min = -Infinity,
  max = Infinity,
  step = 1,
  format = String,
  size = "md",
  scrub = true,
  disabled,
  className,
  ...aria
}: NumberFieldProps) {
  const [internal, setInternal] = React.useState(defaultValue);
  const current = value ?? internal;
  const currentRef = React.useRef(current);
  React.useLayoutEffect(() => {
    currentRef.current = current;
  });

  const [direction, setDirection] = React.useState(1);
  const x = useMotionValue(0);

  const commit = (next: number) => {
    if (next === currentRef.current) return;
    setDirection(next > currentRef.current ? 1 : -1);
    currentRef.current = next;
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
  };

  // Past a limit the field nudges toward the push and springs back.
  const bump = (dir: 1 | -1) => {
    animate(x, [0, dir * 7, 0], { duration: 0.38, ease: [0.2, 0.8, 0.2, 1] });
  };

  const nudge = (delta: number) => {
    const raw = currentRef.current + delta;
    if (raw > max || raw < min) {
      const clamped = Math.min(max, Math.max(min, raw));
      if (clamped !== currentRef.current) commit(clamped);
      else bump(delta > 0 ? 1 : -1);
      return;
    }
    commit(raw);
  };

  const onKeyDown = (e: React.KeyboardEvent) => {
    const map: Record<string, () => void> = {
      ArrowUp: () => nudge(step),
      ArrowRight: () => nudge(step),
      ArrowDown: () => nudge(-step),
      ArrowLeft: () => nudge(-step),
      PageUp: () => nudge(step * 10),
      PageDown: () => nudge(-step * 10),
      Home: () => Number.isFinite(min) && commit(min),
      End: () => Number.isFinite(max) && commit(max),
    };
    const action = map[e.key];
    if (!action) return;
    e.preventDefault();
    action();
  };

  // --- scrubbing -----------------------------------------------------
  const drag = React.useRef<{ startX: number; startValue: number } | null>(null);

  const onPointerDown = (e: React.PointerEvent) => {
    if (!scrub || disabled || e.button !== 0) return;
    e.currentTarget.setPointerCapture(e.pointerId);
    drag.current = { startX: e.clientX, startValue: currentRef.current };
  };

  const onPointerMove = (e: React.PointerEvent) => {
    if (!drag.current) return;
    const dx = e.clientX - drag.current.startX;
    const raw = drag.current.startValue + Math.round(dx / PX_PER_STEP) * step;
    const clamped = Math.min(max, Math.max(min, raw));
    commit(clamped);
    if (raw !== clamped) {
      const limitPx = ((clamped - drag.current.startValue) / step) * PX_PER_STEP;
      x.set(rubberBand(dx - limitPx));
    } else {
      x.set(0);
    }
  };

  const endDrag = () => {
    if (!drag.current) return;
    drag.current = null;
    animate(x, 0, { type: "spring", stiffness: 500, damping: 30 });
  };

  const h = size === "sm" ? "h-11" : "h-14";

  return (
    <div
      data-slot="number-field"
      className={cn(
        "inline-flex max-w-full items-center rounded-lg border border-input bg-transparent p-1",
        h,
        size === "sm" ? "w-56 text-base" : "w-[19rem] text-xl",
        disabled && "pointer-events-none opacity-50",
        className,
      )}
    >
      <StepButton label="Decrease" onStep={() => nudge(-step)} disabled={disabled}>
        <Minus />
      </StepButton>

      <motion.div
        role="spinbutton"
        tabIndex={disabled ? -1 : 0}
        aria-label={aria["aria-label"]}
        aria-valuenow={current}
        aria-valuemin={Number.isFinite(min) ? min : undefined}
        aria-valuemax={Number.isFinite(max) ? max : undefined}
        aria-valuetext={format(current)}
        aria-disabled={disabled || undefined}
        onKeyDown={onKeyDown}
        onPointerDown={onPointerDown}
        onPointerMove={onPointerMove}
        onPointerUp={endDrag}
        onPointerCancel={endDrag}
        style={{ x }}
        className={cn(
          "relative flex h-full flex-1 items-center justify-center overflow-hidden rounded-md font-medium tabular-nums outline-none",
          "focus-visible:ring-2 focus-visible:ring-ring",
          scrub && "cursor-ew-resize touch-none select-none",
        )}
      >
        <AnimatePresence initial={false} mode="popLayout" custom={direction}>
          <motion.span
            key={current}
            custom={direction}
            variants={{
              enter: (d: number) => ({ y: d > 0 ? "70%" : "-70%", opacity: 0, filter: "blur(3px)" }),
              center: { y: "0%", opacity: 1, filter: "blur(0px)" },
              exit: (d: number) => ({ y: d > 0 ? "-70%" : "70%", opacity: 0, filter: "blur(3px)" }),
            }}
            initial="enter"
            animate="center"
            exit="exit"
            transition={{ type: "spring", bounce: 0, duration: 0.32 }}
            className="whitespace-nowrap"
          >
            {format(current)}
          </motion.span>
        </AnimatePresence>
      </motion.div>

      <StepButton label="Increase" onStep={() => nudge(step)} disabled={disabled}>
        <Plus />
      </StepButton>
    </div>
  );
}

/** Press and hold repeats the step, speeding up slightly. */
function StepButton({
  label,
  onStep,
  disabled,
  children,
}: {
  label: string;
  onStep: () => void;
  disabled?: boolean;
  children: React.ReactNode;
}) {
  const timer = React.useRef<ReturnType<typeof setTimeout> | null>(null);
  const stepRef = React.useRef(onStep);
  React.useLayoutEffect(() => {
    stepRef.current = onStep;
  });

  const stop = () => {
    if (timer.current) clearTimeout(timer.current);
    timer.current = null;
  };

  const start = (e: React.PointerEvent) => {
    if (e.button !== 0) return;
    stepRef.current();
    let delay = 380;
    const tick = () => {
      stepRef.current();
      delay = Math.max(50, delay * 0.8);
      timer.current = setTimeout(tick, delay);
    };
    timer.current = setTimeout(tick, delay);
  };

  React.useEffect(() => stop, []);

  return (
    <button
      type="button"
      tabIndex={-1}
      aria-label={label}
      disabled={disabled}
      onPointerDown={start}
      onPointerUp={stop}
      onPointerLeave={stop}
      onPointerCancel={stop}
      // Keyboard activation (detail === 0) still works for assistive tech.
      onClick={(e) => e.detail === 0 && onStep()}
      className={cn(
        "grid aspect-square h-full shrink-0 place-items-center rounded-md text-muted-foreground",
        "transition-[background-color,color,transform] duration-150 hover:bg-accent hover:text-foreground active:scale-90",
        "[&_svg]:size-[1.1em]",
      )}
    >
      {children}
    </button>
  );
}