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));

/** 旋钮 20px：拖拽区两端各让出半个旋钮，值走到 0 / 100 时旋钮不出槽 */
const THUMB = 20;

export function GlassAppleSlider({
  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);
  };

  /** 跟手 1:1：位置直接由指针算值，不做阻尼、不挂过渡（interaction.md §4） */
  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);
  };

  /** APG Slider：左右 / 上下步进，PageUp/Down 十步，Home/End 到端 */
  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.5 -translate-y-1/2 rounded-full bg-[var(--glass-recess)] border border-[var(--glass-border)]" />

        <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.5 -translate-y-1/2 rounded-full bg-[var(--color-accent)]"
            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-5 -translate-x-1/2 -translate-y-1/2 rounded-full
              bg-[var(--color-surface)] border border-[var(--glass-border)]
              shadow-[var(--shadow-sm)]
            "
            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>
  );
}