import { useState, useEffect } from 'react'
import { toEnglishNumeric, englishToPersian } from '../utils/numberUtils'

interface NumberInputProps {
  value: number | string
  onChange: (value: number) => void
  placeholder?: string
  className?: string
  disabled?: boolean
  required?: boolean
  min?: number
  max?: number
  step?: number
  showPersianDigits?: boolean
}

export const NumberInput = ({
  value,
  onChange,
  placeholder = '',
  className = '',
  disabled = false,
  required = false,
  min,
  max,
  step = 1,
  showPersianDigits = true,
}: NumberInputProps) => {
  const [displayValue, setDisplayValue] = useState('')

  // فقط مقدار پروپ را به صورت ساده در ورودی نشان می‌دهیم (بدون فرمت پیچیده)
  useEffect(() => {
    if (value === '' || value === null || value === undefined) {
      setDisplayValue('')
    } else {
      const str = String(value)
      setDisplayValue(showPersianDigits ? englishToPersian(str) : str)
    }
  }, [value, showPersianDigits])

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value
    // اول تبدیل ارقام فارسی/عربی به انگلیسی، بعد حذف غیرعددی (به جز نقطه)
    const cleaned = toEnglishNumeric(inputValue)

    setDisplayValue(inputValue)

    if (cleaned === '' || cleaned === '.' || cleaned === '-.') {
      onChange(0)
      return
    }

    const numValue = parseFloat(cleaned)
    if (!isNaN(numValue)) {
      let finalValue = numValue
      if (min !== undefined && finalValue < min) finalValue = min
      if (max !== undefined && finalValue > max) finalValue = max
      onChange(finalValue)
    } else {
      onChange(0)
    }
  }

  return (
    <input
      type="text"
      inputMode="numeric"
      className={`w-full border rounded-lg px-3 py-2 text-sm ${className}`}
      value={displayValue}
      onChange={handleChange}
      placeholder={placeholder}
      disabled={disabled}
      required={required}
      dir="ltr"
      style={{ textAlign: 'right' }}
    />
  )
}

