import React from 'react';
import { clsx } from 'clsx';

export interface SliderProps extends Omit<
  React.InputHTMLAttributes<HTMLInputElement>,
  'type' | 'onChange'
> {
  value?: number;
  onChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  showValue?: boolean;
  label?: string;
  className?: string;
}

/**
 * Slider/Range input component
 */
export const Slider = React.forwardRef<HTMLInputElement, SliderProps>(
  (
    {
      value = 0,
      onChange,
      min = 0,
      max = 100,
      step = 1,
      showValue = false,
      label,
      className,
      disabled,
      ...props
    },
    ref
  ) => {
    const percentage = ((value - min) / (max - min)) * 100;

    return (
      <div className={clsx('flex flex-col gap-2', className)}>
        {label && (
          <div className="flex items-center justify-between">
            <label className="text-sm font-medium text-foreground">{label}</label>
            {showValue && <span className="text-sm text-muted-foreground">{value}</span>}
          </div>
        )}
        <div className="relative flex items-center">
          <input
            ref={ref}
            type="range"
            value={value}
            onChange={(e) => onChange?.(Number(e.target.value))}
            min={min}
            max={max}
            step={step}
            disabled={disabled}
            className={clsx(
              'w-full h-2 bg-muted rounded-lg appearance-none cursor-pointer',
              'accent-primary',
              {
                'opacity-50 cursor-not-allowed': disabled,
              },
              '[&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-primary [&::-webkit-slider-thumb]:cursor-pointer',
              '[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:bg-primary [&::-moz-range-thumb]:border-0 [&::-moz-range-thumb]:cursor-pointer',
              '[&::-moz-range-thumb]:disabled:cursor-not-allowed',
              '[&::-webkit-slider-thumb]:disabled:cursor-not-allowed'
            )}
            style={{
              background: `linear-gradient(to right, hsl(var(--primary)) 0%, hsl(var(--primary)) ${percentage}%, hsl(var(--muted)) ${percentage}%, hsl(var(--muted)) 100%)`,
            }}
            {...props}
          />
        </div>
        {!label && showValue && (
          <div className="flex justify-between text-xs text-muted-foreground">
            <span>{min}</span>
            <span>{max}</span>
          </div>
        )}
      </div>
    );
  }
);
Slider.displayName = 'Slider';