Slider

"use client";

import * as React from "react";
import { AnimatePresence, motion } from "motion/react";
import { cn } from "@/lib/utils";

export interface SliderProps {
  value?: number;
  defaultValue?: number;
  onValueChange?: (value: number) => void;
  /** Fires once when the drag ends or a key is released. */
  onValueCommit?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  /** Shows the value in a bubble above the thumb while dragging. */
  format?: (value: number) => string;
  disabled?: boolean;
  className?: string;
  "aria-label"?: string;
}

export function Slider({
  value,
  defaultValue = 50,
  onValueChange,
  onValueCommit,
  min = 0,
  max = 100,
  step = 1,
  format,
  disabled,
  className,
  ...aria
}: SliderProps) {
  const [internal, setInternal] = React.useState(defaultValue);
  const current = value ?? internal;
  const [dragging, setDragging] = React.useState(false);
  const [hover, setHover] = React.useState(false);
  const trackRef = React.useRef<HTMLDivElement>(null);
  const latest = React.useRef(current);

  const set = (raw: number) => {
    const snapped = Math.round((Math.min(max, Math.max(min, raw)) - min) / step) * step + min;
    const next = Number(snapped.toFixed(6));
    latest.current = next;
    if (value === undefined) setInternal(next);
    onValueChange?.(next);
  };

  const fromPointer = (clientX: number) => {
    const box = trackRef.current?.getBoundingClientRect();
    if (!box) return;
    set(min + ((clientX - box.left) / box.width) * (max - min));
  };

  const pct = ((current - min) / (max - min)) * 100;

  const onKeyDown = (e: React.KeyboardEvent) => {
    const big = (max - min) / 10;
    const map: Record<string, number> = {
      ArrowRight: current + step,
      ArrowUp: current + step,
      ArrowLeft: current - step,
      ArrowDown: current - step,
      PageUp: current + big,
      PageDown: current - big,
      Home: min,
      End: max,
    };
    if (map[e.key] === undefined) return;
    e.preventDefault();
    set(map[e.key]);
  };

  return (
    <div
      ref={trackRef}
      onPointerDown={(e) => {
        if (disabled || e.button !== 0) return;
        e.currentTarget.setPointerCapture(e.pointerId);
        setDragging(true);
        fromPointer(e.clientX);
      }}
      onPointerMove={(e) => dragging && fromPointer(e.clientX)}
      onPointerUp={() => {
        if (!dragging) return;
        setDragging(false);
        onValueCommit?.(latest.current);
      }}
      onPointerEnter={() => setHover(true)}
      onPointerLeave={() => setHover(false)}
      className={cn("relative flex h-6 w-full touch-none select-none items-center", disabled ? "opacity-40" : "cursor-pointer", className)}
    >
      <div className="relative h-1.5 w-full overflow-hidden rounded-full bg-muted">
        <div className="absolute inset-y-0 left-0 rounded-full bg-primary" style={{ width: `${pct}%` }} />
      </div>
      <motion.div
        role="slider"
        tabIndex={disabled ? -1 : 0}
        aria-label={aria["aria-label"]}
        aria-valuemin={min}
        aria-valuemax={max}
        aria-valuenow={current}
        aria-valuetext={format?.(current)}
        aria-disabled={disabled || undefined}
        onKeyDown={onKeyDown}
        onKeyUp={() => onValueCommit?.(latest.current)}
        className="absolute top-1/2 grid size-5 -translate-x-1/2 -translate-y-1/2 place-items-center rounded-full border border-border bg-background shadow-md outline-none focus-visible:ring-2 focus-visible:ring-ring"
        style={{ left: `${pct}%` }}
        animate={{ scale: dragging ? 1.2 : hover ? 1.08 : 1 }}
        transition={{ type: "spring", stiffness: 500, damping: 30 }}
      >
        <span className="size-1.5 rounded-full bg-primary" />
        <AnimatePresence>
          {format && dragging && (
            <motion.span
              initial={{ opacity: 0, y: 4, scale: 0.9 }}
              animate={{ opacity: 1, y: 0, scale: 1 }}
              exit={{ opacity: 0, y: 4, scale: 0.9 }}
              transition={{ duration: 0.15 }}
              className="absolute bottom-full mb-2 whitespace-nowrap rounded-md bg-primary px-2 py-1 font-mono text-[11px] text-primary-foreground tabular-nums"
            >
              {format(current)}
            </motion.span>
          )}
        </AnimatePresence>
      </motion.div>
    </div>
  );
}