import { useEffect, useId, useState } from "react"
import { Minus, Plus } from "lucide-react"
import { Label } from "@/components/ui/label"
import { cn } from "@/lib/utils"

export function NumberStepper({ label, value, onChange, min, max, step = 1, unit = 'px', orientation = 'column' }: {
  label: string
  value: number
  onChange: (value: number) => void
  min: number
  max: number
  step?: number
  unit?: string
  orientation?: 'row' | 'column'
}) {
  const id = useId()
  const clamp = (next: number) => Math.min(max, Math.max(min, next))
  const [draft, setDraft] = useState(`${value}${unit}`)
  useEffect(() => setDraft(`${value}${unit}`), [value, unit])
  const commitDraft = () => {
    const parsed = parseInt(draft, 10)
    const next = Number.isNaN(parsed) ? value : clamp(parsed)
    setDraft(`${next}${unit}`)
    if (next !== value) onChange(next)
  }
  const actionClass = "flex size-8 shrink-0 items-center justify-center text-muted-foreground transition-colors hover:text-foreground disabled:opacity-30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
  return (
    <div className={cn("min-w-0 gap-2", orientation === 'row' ? 'flex flex-wrap items-center justify-between' : 'grid')}>
      {label && <Label htmlFor={id} className="text-sm">{label}</Label>}
      <div className="inline-flex w-fit items-center rounded-md border bg-background">
        <button type="button" aria-label={`Decrease ${label || 'value'}`} disabled={value <= min} onClick={() => onChange(clamp(value - step))} className={actionClass}><Minus className="size-3" aria-hidden="true" /></button>
        <input id={id} aria-label={label || 'Value'} inputMode="numeric" type="text" value={draft}
          onChange={event => setDraft(event.target.value)} onBlur={commitDraft}
          onKeyDown={event => { if (event.key === 'Enter') { event.preventDefault(); commitDraft() } }}
          className="h-8 w-14 border-x bg-transparent text-center text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
        <button type="button" aria-label={`Increase ${label || 'value'}`} disabled={value >= max} onClick={() => onChange(clamp(value + step))} className={actionClass}><Plus className="size-3" aria-hidden="true" /></button>
      </div>
    </div>
  )
}