import { useRef, useState, type KeyboardEvent, type PointerEvent } from 'react';

interface Props {
  value?: number;
  defaultValue?: number;
  min?: number;
  max?: number;
  step?: number;
  onChange?: (value: number) => void;
  disabled?: boolean;
  className?: string;
  showValue?: boolean;
  unit?: string;
  'aria-label'?: string;
}

const clamp = (v: number, lo: number, hi: number) => Math.min(hi, Math.max(lo, v));

const THUMB = 16;

export function MinimalSlider({
  value,
  defaultValue,
  min = 0,
  max = 100,
  step = 1,
  onChange,
  disabled,
  className = '',
  showValue,
  unit = '',
  ...rest
}: Props) {
  const isControlled = value !== undefined;
  const [internal, setInternal] = useState(defaultValue ?? min);
  const current = clamp(isControlled ? value : internal, min, max);
  const pct = max === min ? 0 : ((current - min) / (max - min)) * 100;
  const travelRef = useRef<HTMLDivElement>(null);

  const commit = (next: number) => {
    const snapped = clamp(min + Math.round((next - min) / step) * step, min, max);
    if (!isControlled) setInternal(snapped);
    if (snapped !== current) onChange?.(snapped);
  };

  const fromPointer = (clientX: number) => {
    const el = travelRef.current;
    if (!el) return;
    const rect = el.getBoundingClientRect();
    if (rect.width === 0) return;
    commit(min + ((clientX - rect.left) / rect.width) * (max - min));
  };

  const onPointerDown = (e: PointerEvent<HTMLDivElement>) => {
    if (disabled) return;
    e.currentTarget.setPointerCapture(e.pointerId);
    fromPointer(e.clientX);
  };

  const onPointerMove = (e: PointerEvent<HTMLDivElement>) => {
    if (disabled || !e.currentTarget.hasPointerCapture(e.pointerId)) return;
    fromPointer(e.clientX);
  };

  const onKeyDown = (e: KeyboardEvent<HTMLDivElement>) => {
    if (disabled) return;
    const big = step * 10;
    const targets: 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,
    };
    const next = targets[e.key];
    if (next === undefined) return;
    e.preventDefault();
    commit(next);
  };

  return (
    <div className={`flex items-center gap-3 ${className}`}>
      <div
        className={`
          relative h-6 flex-1 select-none
          ${disabled ? 'opacity-40 cursor-not-allowed' : 'cursor-pointer'}
        `}
      >
        <div className="absolute inset-x-0 top-1/2 h-1 -translate-y-1/2 rounded-[2px] bg-[var(--color-divider)]" />

        <div
          ref={travelRef}
          onPointerDown={onPointerDown}
          onPointerMove={onPointerMove}
          className="absolute inset-y-0 touch-none"
          style={{ left: THUMB / 2, right: THUMB / 2 }}
        >
          <div
            className="absolute top-1/2 left-0 h-1 -translate-y-1/2 rounded-[2px] bg-[var(--color-text)]"
            style={{ width: `${pct}%` }}
          />
          <div
            role="slider"
            tabIndex={disabled ? -1 : 0}
            aria-valuemin={min}
            aria-valuemax={max}
            aria-valuenow={current}
            aria-orientation="horizontal"
            aria-disabled={disabled || undefined}
            onKeyDown={onKeyDown}
            className="absolute top-1/2 size-4 -translate-x-1/2 -translate-y-1/2 rounded-[3px] bg-[var(--color-text)]"
            style={{ left: `${pct}%` }}
            {...rest}
          />
        </div>
      </div>

      {showValue && (
        <span className="w-10 shrink-0 text-right text-xs font-mono text-[var(--color-text-muted)]">
          {current}{unit}
        </span>
      )}
    </div>
  );
}