Slider

"use client";

import { cn } from "@/lib";
import { useState } from "react";

export interface SliderProps {
  value?: number | number[];
  defaultValue?: number | number[];
  onValueChange?: (value: number | number[]) => void;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  label?: string;
  showValue?: boolean;
}

export function Slider({
  value: controlledValue,
  defaultValue,
  onValueChange,
  min = 0,
  max = 100,
  step = 1,
  disabled = false,
  label,
  showValue = false,
}: SliderProps) {
  const [internalValue, setInternalValue] = useState<number | number[]>(
    controlledValue ?? defaultValue ?? 0
  );
  const currentValue = controlledValue ?? internalValue;

  function handleChange(newValue: number | number[]) {
    if (disabled) return;
    if (controlledValue === undefined) {
      setInternalValue(newValue);
    }
    onValueChange?.(newValue);
  }

  function getPercentage(val: number) {
    return ((val - min) / (max - min)) * 100;
  }

  const isRange = Array.isArray(currentValue);
  const values = isRange ? currentValue : [currentValue];
  const minVal = Math.min(...values);
  const maxVal = Math.max(...values);

  return (
    <div className="w-full space-y-2">
      {(label || showValue) && (
        <div className="flex items-center justify-between">
          {label && (
            <label className="text-[12px] font-medium text-[rgb(var(--text-secondary))]">
              {label}
            </label>
          )}
          {showValue && (
            <span className="text-[12px] font-medium text-[rgb(var(--text-primary))]">
               {isRange ? minVal + " – " + maxVal : minVal}
            </span>
          )}
        </div>
      )}
      <div className="relative h-2 flex items-center">
        {/* Track */}
        <div className="absolute h-[3px] rounded-full w-full bg-[rgb(var(--border))]" />
        {/* Fill */}
        <div
          className="absolute h-[3px] rounded-full bg-[rgb(var(--accent))]"
          style={{
             left: getPercentage(minVal) + "%",
             width: getPercentage(maxVal) - getPercentage(minVal) + "%",
          }}
        />
        {/* Thumbs */}
        {values.map((val, i) => (
          <div
            key={i}
            className={cn(
              "absolute w-4 h-4 rounded-full border-2 cursor-pointer",
              "bg-white border-[rgb(var(--accent))]",
              "transition-transform hover:scale-110",
              disabled && "opacity-40 cursor-not-allowed"
            )}
            style={{
               left: getPercentage(val) + "%",
              transform: "translateX(-50%)",
              top: "50%",
              marginTop: "-6px",
            }}
            role="slider"
            aria-valuemin={min}
            aria-valuemax={max}
            aria-valuenow={val}
            aria-label={label}
            tabIndex={disabled ? undefined : 0}
            onKeyDown={(e) => {
              if (disabled) return;
              const delta = e.shiftKey ? step * 10 : step;
              let newVal = val;
              if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
                newVal = Math.max(val - delta, min);
              } else if (e.key === "ArrowRight" || e.key === "ArrowUp") {
                newVal = Math.min(val + delta, max);
              }
              if (newVal !== val) {
                e.preventDefault();
                const newValue = isRange
                  ? (values.map((v, idx) => (idx === i ? newVal : v)) as [number, number])
                  : newVal;
                handleChange(newValue);
              }
            }}
          >
            <input
              type="range"
              min={min}
              max={max}
              step={step}
              value={val}
              onChange={(e) => {
                const newVal = parseFloat(e.target.value);
                if (isRange) {
                  const newValue = [...values] as [number, number];
                  newValue[i] = newVal;
                  handleChange(newValue);
                } else {
                  handleChange(newVal);
                }
              }}
              className="sr-only"
              disabled={disabled}
            />
          </div>
        ))}
      </div>
      <div className="flex justify-between text-[10px] text-[rgb(var(--text-tertiary))]">
        <span>{min}</span>
        <span>{max}</span>
      </div>
    </div>
  );
}