'use client'

import { useCallback, useMemo, useState } from 'react'
import { MinusIcon, PlusIcon } from 'lucide-react'

import { Button } from '@/components/ui/button'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

const clamp = (value: number, min = Number.MIN_SAFE_INTEGER, max = Number.MAX_SAFE_INTEGER) =>
  Math.min(Math.max(value, min), max)

const InputWithEndButtonsDemo = () => {
  const [value, setValue] = useState<number>(1024)
  const minValue = 0

  const formattedValue = useMemo(() => (Number.isFinite(value) ? value.toString() : ''), [value])

  const handleManualChange = useCallback(
    (event: React.ChangeEvent<HTMLInputElement>) => {
      const digitsOnly = event.target.value.replace(/\D/g, '')
      if (digitsOnly.length === 0) {
        setValue(minValue)
        return
      }
      const next = Number.parseInt(digitsOnly, 10)
      setValue(clamp(next, minValue))
    },
    [minValue],
  )

  const handleIncrement = useCallback(() => setValue((current) => clamp(current + 1, minValue)), [minValue])
  const handleDecrement = useCallback(() => setValue((current) => clamp(current - 1, minValue)), [minValue])

  return (
    <div className='w-full max-w-xs space-y-2'>
      <Label className='flex items-center gap-2 text-sm font-medium leading-none text-muted-foreground'>
        Input with end buttons
      </Label>
      <div className='dark:bg-input/30 relative inline-flex h-9 w-full min-w-0 items-center overflow-hidden rounded-md border border-input bg-transparent text-base shadow-xs transition-[color,box-shadow] focus-within:border-ring focus-within:ring-[3px] focus-within:ring-ring/40 md:text-sm'>
        <Input
          className='selection:bg-primary selection:text-primary-foreground w-full grow px-3 py-2 text-center tabular-nums outline-none'
          inputMode='numeric'
          pattern='[0-9]*'
          value={formattedValue}
          onChange={handleManualChange}
        />
        <Button
          type='button'
          variant='ghost'
          className='border-input text-muted-foreground hover:bg-accent hover:text-foreground -me-px flex aspect-square h-[inherit] items-center justify-center rounded-none border-l text-sm transition-[color,box-shadow]'
          onClick={handleDecrement}
          disabled={value <= minValue}
        >
          <MinusIcon className='size-4' />
          <span className='sr-only'>Decrement</span>
        </Button>
        <Button
          type='button'
          variant='ghost'
          className='border-input text-muted-foreground hover:bg-accent hover:text-foreground flex aspect-square h-[inherit] items-center justify-center rounded-none border-l text-sm transition-[color,box-shadow]'
          onClick={handleIncrement}
        >
          <PlusIcon className='size-4' />
          <span className='sr-only'>Increment</span>
        </Button>
      </div>
      <p className='text-xs text-muted-foreground'>Demonstração simples de input numérico com botões de incremento.</p>
    </div>
  )
}

export default InputWithEndButtonsDemo