// CustomRange.jsx
import { useMemo } from '@wordpress/element';

export default function CustomRange({
	id,
	label,
	value,
	onChange,
	min = 0,
	max = 100,
	step = 1,
	className = '',
	activeColor = '#007bff', // filled track + thumb
	trackColor = '#e0e0e0', // unfilled track
	thumbSize = 16,
}) {
	const safeMin = Number(min);
	const safeMax = Number(max);
	const safeStep = Number(step);

	const numeric = Number.isFinite(Number(value)) ? Number(value) : safeMin;
	const clamped = Math.min(safeMax, Math.max(safeMin, numeric));
	const pct = useMemo(() => {
		const span = safeMax - safeMin || 1;
		return ((clamped - safeMin) / span) * 100;
	}, [clamped, safeMin, safeMax]);

	const handleChange = (next) => {
		const n = Number(next);
		if (!Number.isFinite(n)) return;
		const clamped = Math.min(safeMax, Math.max(safeMin, n));
		onChange?.(clamped);
	};

	const trackBg = `linear-gradient(to right, ${activeColor} 0%, ${activeColor} ${pct}%, ${trackColor} ${pct}%, ${trackColor} 100%)`;

	return (
		<div className={`edbi-range ${className}`}>
			{label && (
				<label className='edbi-range__label' htmlFor={id}>
					{label}
				</label>
			)}

			<div className='edbi-range__row'>
				<input
					id={id}
					type='range'
					className='edbi-range__slider'
					value={clamped}
					min={safeMin}
					max={safeMax}
					step={safeStep}
					onChange={(e) => handleChange(e.target.value)}
					style={{
						background: trackBg,
					}}
					aria-label={label}
				/>

				<input
					type='number'
					className='edbi-value-box'
					value={clamped}
					min={safeMin}
					max={safeMax}
					step={safeStep}
					onChange={(e) => handleChange(e.target.value)}
					aria-label={`${label} value`}
					inputMode='numeric'
				/>
			</div>
		</div>
	);
}