const formatAmount = (n: number) => (n ? n.toLocaleString('en-US') : '')
const digitsOnly = (s: string) => s.replace(/\D/g, '')
const countDigitsBefore = (s: string, index: number) => digitsOnly(s.substring(0, index)).length

const itemAmount = useAppSelector(selectItemAmount)
const dispatch = useAppDispatch()

const [infoVisible, setInfoVisible] = useState(false)
const [value, setValue] = useState(formatAmount(itemAmount))

const inputRef = useRef<HTMLInputElement>(null)
const cursorRef = useRef<number | null>(null)

const commitValue = (raw: string, cursorIndex: number) => {
  const digitsBefore = countDigitsBefore(raw, cursorIndex)
  const num = parseInt(digitsOnly(raw), 10) || 0

  setValue(formatAmount(num))
  dispatch(setItemAmount(num))
  cursorRef.current = digitsBefore
}

// use `handleChange` instead of `inputHandler` for naming consistency
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) =>
  commitValue(event.target.value, event.target.selectionStart ?? 0)

const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
  const el = event.currentTarget
  const pos = el.selectionStart ?? 0

  if (pos !== el.selectionEnd) return

  if (event.key === 'Backspace' && el.value[pos - 1] === ',') {
    event.preventDefault()
    commitValue(el.value.slice(0, pos - 2) + el.value.slice(pos), pos - 2)
  } else if (event.key === 'Delete' && el.value[pos] === ',') {
    event.preventDefault()
    commitValue(el.value.slice(0, pos) + el.value.slice(pos + 2), pos)
  }
}

useEffect(() => {
  if (!inputRef.current || cursorRef.current === null) return
  let newPos = 0
  let count = 0

  for (let i = 0; i < value.length && count < cursorRef.current; i++) {
    if (/\d/.test(value[i])) count++
    newPos++
  }

  inputRef.current.setSelectionRange(newPos, newPos)
  cursorRef.current = null
}, [value])```