// @design-system: domain/RadiusSlider

'use client';

import { cn } from '@/lib/cn';
import { useT } from '@/lib/i18n/react';
import * as RadixSlider from '@radix-ui/react-slider';

export interface RadiusSliderProps {
  /** Current radius value in km (1–50). */
  value: number;
  /** Called when user changes the slider value. */
  onChange: (km: number) => void;
  /**
   * Disabled when geolocation not yet granted.
   * When disabled, the slider renders but cannot be interacted with.
   */
  disabled?: boolean;
  /** Additional class names. */
  className?: string;
}

/**
 * RadiusSlider — single-handle 1–50 km radius selector.
 *
 * Built directly on Radix Slider (single thumb) rather than the dual-handle
 * Slider primitive which wraps [min, max] ranges.
 *
 * Large touch target (thumb: 20×20 px) for mobile. Disabled when geolocation
 * coords not yet provided (caller sets disabled={true}).
 *
 * a11y: Radix Slider supplies role=slider, aria-valuenow, aria-valuemin/max,
 * aria-label. Keyboard: Arrow keys ±1 km; Page Up/Down ±10 km.
 *
 * @example
 * ```tsx
 * <RadiusSlider value={radius} onChange={setRadius} disabled={!coordsGranted} />
 * ```
 */
export function RadiusSlider({ value, onChange, disabled = false, className }: RadiusSliderProps) {
  const t = useT('near_you');
  const label = `${t('radius_label')}: ${value} ${t('km_unit')}`;

  return (
    <div className={cn('flex flex-col gap-2', className)}>
      {/* Label row */}
      <div className="flex items-center justify-between">
        <span id="radius-slider-label" className="text-text-secondary text-sm font-medium">
          {t('radius_label')}
        </span>
        <span className="text-text-primary text-sm font-semibold tabular-nums">
          {value} {t('km_unit')}
        </span>
      </div>

      {/* Radix single-thumb slider — dir=ltr: numeric scale always left→right */}
      <RadixSlider.Root
        dir="ltr"
        min={1}
        max={50}
        step={1}
        value={[value]}
        onValueChange={([km]) => km !== undefined && onChange(km)}
        disabled={disabled}
        aria-label={label}
        aria-labelledby="radius-slider-label"
        className={cn(
          'relative flex h-5 w-full touch-none items-center select-none',
          disabled && 'opacity-40',
        )}
      >
        <RadixSlider.Track className="relative h-1.5 w-full grow overflow-hidden rounded-full bg-neutral-200">
          <RadixSlider.Range
            className={cn('absolute h-full', disabled ? 'bg-neutral-400' : 'bg-brand-primary-600')}
          />
        </RadixSlider.Track>
        <RadixSlider.Thumb
          className={cn(
            'block h-5 w-5 rounded-full bg-white',
            'border-2',
            disabled ? 'border-neutral-400' : 'border-brand-primary-600',
            'shadow-sm transition-colors',
            'focus-visible:ring-brand-primary-500 focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
            'disabled:pointer-events-none',
          )}
        />
      </RadixSlider.Root>

      {/* Min/max hints */}
      <div className="flex justify-between text-xs" dir="ltr">
        <span className="text-text-muted">1 {t('km_unit')}</span>
        <span className="text-text-muted">50 {t('km_unit')}</span>
      </div>
    </div>
  );
}