/**
 * NumberInput Component
 *
 * Styled number input with optional label.
 */

interface NumberInputProps {
  value: number;
  onChange?: (value: number) => void;
  min?: number;
  max?: number;
  step?: number;
  disabled?: boolean;
  readOnly?: boolean;
  className?: string;
  placeholder?: string;
  /** Optional inline label prefix (e.g., "X", "Y", "W", "H") */
  label?: string;
  /** Optional suffix label (e.g., "°", "px") */
  suffix?: string;
  /** Use compact size for floating panels */
  size?: "default" | "compact";
}

export function NumberInput({
  value,
  onChange,
  min,
  max,
  step = 1,
  disabled = false,
  readOnly = false,
  className = "",
  placeholder,
  label,
  suffix,
  size = "default",
}: NumberInputProps) {
  const inputClass =
    size === "compact"
      ? "floating-settings__input floating-settings__input--sm"
      : "settings-input";

  const disabledClass =
    disabled || readOnly
      ? size === "compact"
        ? "floating-settings__input--disabled"
        : "bg-gray-100"
      : "";

  const wrapperClass = label || suffix ? "floating-settings__field" : "";

  // Ensure value is a valid number, defaulting to 0
  const displayValue = Number.isFinite(value) ? value : 0;

  const inputElement = (
    <input
      type="number"
      className={`${inputClass} ${disabledClass} ${className}`}
      value={displayValue}
      onChange={(e) => onChange?.(Number(e.target.value))}
      min={min}
      max={max}
      step={step}
      disabled={disabled}
      readOnly={readOnly}
      placeholder={placeholder}
    />
  );

  if (label || suffix) {
    return (
      <div className={wrapperClass}>
        {label && (
          <span className="floating-settings__field-label">{label}</span>
        )}
        {inputElement}
        {suffix && (
          <span className="floating-settings__field-suffix">{suffix}</span>
        )}
      </div>
    );
  }

  return inputElement;
}

export default NumberInput;
