interface NumberStepperProps {
  value: number
  /** Inclusive minimum, applied only to ▲▼ stepper clicks (not free typing). */
  min?: number
  /** Inclusive maximum, applied only to ▲▼ stepper clicks (not free typing). */
  max?: number
  /** Increment per ▲▼ click. */
  step: number
  onChange: (v: number) => void
  /** Trailing unit label (e.g. "FR", "SEC", "%"). */
  suffix: string
}

/**
 * Number input with ▲▼ stepper buttons next to it and a trailing unit
 * label. Stepper buttons clamp to [min, max]; direct typing does NOT —
 * so `userEvent.clear()` + `type('9')` behaves as expected without being
 * snapped mid-keystroke. Invalid intermediate values fall through; the
 * caller validates on save.
 */
export function NumberStepper({ value, min, max, step, onChange, suffix }: NumberStepperProps) {
  const clamp = (v: number) => Math.max(min ?? -Infinity, Math.min(max ?? Infinity, v))
  return (
    <div className="flex items-stretch gap-2">
      <input
        className="inp inp-mono"
        type="number"
        value={value}
        onChange={e => {
          const raw = e.target.value
          const parsed = raw === '' ? 0 : Number(raw)
          onChange(Number.isFinite(parsed) ? parsed : 0)
        }}
        style={{ textAlign: 'right', width: 88 }}
      />
      <div className="flex flex-col" style={{ border: '1px solid var(--border-hair)', borderRadius: 2 }}>
        <button
          type="button"
          onClick={() => onChange(clamp(value + step))}
          className="mono"
          aria-label="Increment"
          style={{ width: 24, height: 15, fontSize: 9, color: 'var(--text-secondary)', background: 'var(--surface-input)', borderBottom: '1px solid var(--border-hair)' }}
        >▲</button>
        <button
          type="button"
          onClick={() => onChange(clamp(value - step))}
          className="mono"
          aria-label="Decrement"
          style={{ width: 24, height: 15, fontSize: 9, color: 'var(--text-secondary)', background: 'var(--surface-input)' }}
        >▼</button>
      </div>
      <span className="micro self-center" style={{ color: 'var(--text-muted)' }}>{suffix}</span>
    </div>
  )
}
