'use client';

import * as React from 'react';
import { Slider as SliderPrimitive } from 'radix-ui';

import { cn } from '@/lib/utils';
import { focusRing } from '@/lib/cva-presets';

export interface RangeSliderMark {
  /** Position on the scale, in the same units as `min` and `max`. */
  value: number;
  /** Text under the tick. Falls back to the value itself. */
  label?: React.ReactNode;
}

/** Per-slot overrides for the parts a caller cannot reach through `className`. */
export interface RangeSliderClassNames {
  track?: string;
  range?: string;
  thumb?: string;
  mark?: string;
}

export interface RangeSliderProps
  extends Omit<React.ComponentProps<typeof SliderPrimitive.Root>, 'asChild'> {
  /** Ticks drawn under the track. Purely decorative — they are not selectable. */
  marks?: RangeSliderMark[];
  /**
   * Accessible name for each thumb, in order.
   *
   * A thumb carries `role="slider"`, and that role takes **no** name from
   * surrounding content — without one, a screen reader announces a bare number.
   * Pass one name per thumb (`['Minimum', 'Maximum']`). For a single thumb an
   * `aria-label` on the slider itself is enough; with several, each thumb falls
   * back to that label suffixed with its position.
   */
  thumbLabels?: string[];
  classNames?: RangeSliderClassNames;
}

/**
 * Numeric slider for a single value or a range.
 *
 * The number of thumbs follows the length of `value`/`defaultValue`: one number
 * gives a plain slider, two give a range. Values are always arrays, even for a
 * single thumb.
 *
 * ```tsx
 * <RangeSlider defaultValue={[40]} aria-label="Volume" />
 * <RangeSlider defaultValue={[20, 60]} thumbLabels={['Minimum', 'Maximum']} />
 * ```
 */
function RangeSlider({
  className,
  classNames,
  marks,
  thumbLabels,
  value,
  defaultValue,
  min = 0,
  max = 100,
  orientation = 'horizontal',
  ...props
}: RangeSliderProps) {
  /* Radix derives the thumb count from the value it is given; mirroring that
     here is what lets one component cover both the single and range cases. */
  const values = React.useMemo(
    () => value ?? defaultValue ?? [min],
    [value, defaultValue, min]
  );

  const isVertical = orientation === 'vertical';
  const rootLabel = props['aria-label'];

  const labelFor = (index: number) => {
    if (thumbLabels?.[index]) return thumbLabels[index];
    if (!rootLabel) return undefined;
    return values.length > 1 ? `${rootLabel} ${index + 1}` : rootLabel;
  };

  /** Where a mark sits along the track, as a percentage of the scale. */
  const offsetOf = (markValue: number) => {
    const span = max - min;
    const ratio = span === 0 ? 0 : (markValue - min) / span;
    return `${Math.min(Math.max(ratio, 0), 1) * 100}%`;
  };

  return (
    <SliderPrimitive.Root
      data-slot="range-slider"
      value={value}
      defaultValue={defaultValue}
      min={min}
      max={max}
      orientation={orientation}
      className={cn(
        'relative flex touch-none select-none items-center',
        'data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-full',
        'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-4 data-[orientation=vertical]:flex-col',
        'data-[disabled]:opacity-50',
        className
      )}
      {...props}
    >
      <SliderPrimitive.Track
        data-slot="range-slider-track"
        className={cn(
          'relative grow overflow-hidden rounded-full bg-secondary',
          'data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full',
          'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5',
          classNames?.track
        )}
      >
        <SliderPrimitive.Range
          data-slot="range-slider-range"
          className={cn(
            'absolute bg-primary',
            'data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full',
            classNames?.range
          )}
        />
      </SliderPrimitive.Track>

      {values.map((_, index) => (
        <SliderPrimitive.Thumb
          /* Thumbs are purely positional — index is their only identity, and
             the list only changes length when the caller changes the value. */
          key={index}
          data-slot="range-slider-thumb"
          aria-label={labelFor(index)}
          className={cn(
            'block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm',
            'transition-[color,box-shadow] duration-(--ui-duration-fast) ease-(--ui-ease-standard)',
            'hover:ring-[3px] hover:ring-ring/30',
            'data-[disabled]:pointer-events-none',
            focusRing,
            classNames?.thumb
          )}
        />
      ))}

      {marks?.length ? (
        /* Decorative: the thumb already announces the live value, so repeating
           the scale to a screen reader would only add noise. */
        <div
          data-slot="range-slider-marks"
          aria-hidden
          className={cn(
            'pointer-events-none absolute',
            isVertical ? 'top-0 bottom-0 left-full ml-2' : 'top-full right-0 left-0 mt-2'
          )}
        >
          {marks.map((mark) => (
            <span
              key={mark.value}
              data-slot="range-slider-mark"
              style={isVertical ? { bottom: offsetOf(mark.value) } : { left: offsetOf(mark.value) }}
              className={cn(
                'absolute text-xs text-muted-foreground tabular-nums',
                isVertical ? 'translate-y-1/2' : '-translate-x-1/2',
                classNames?.mark
              )}
            >
              {mark.label ?? mark.value}
            </span>
          ))}
        </div>
      ) : null}
    </SliderPrimitive.Root>
  );
}

export { RangeSlider };