import React, { useEffect, useState } from "react";

interface MoneyInputProps {
  label?: string;
  value: number | string;
  onChange: (value: number | "") => void;
  placeholder?: string;
  required?: boolean;
  id?: string;
  disabled?: boolean;
}

/* format number with commas */
const formatNumber = (value: number | string) => {
  if (value === "" || value === null || value === undefined) return "";
  return Number(value).toLocaleString("en-US");
};

/* remove commas */
const unformatNumber = (value: string) => value.replace(/,/g, "");

const MoneyInput: React.FC<MoneyInputProps> = ({
  value,
  onChange,
  placeholder = "Enter amount",
  required = false,
  id = "money-input",
  disabled = false,
}) => {
  const [displayValue, setDisplayValue] = useState("");

  /* sync external value (edit mode, resets, etc.) */
  useEffect(() => {
    if (value !== "" && value !== null && value !== undefined) {
      setDisplayValue(formatNumber(value));
    } else {
      setDisplayValue("");
    }
  }, [value]);

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const raw = unformatNumber(e.target.value);

    if (raw === "" || isNaN(Number(raw))) {
      setDisplayValue("");
      onChange("");
      return;
    }

    setDisplayValue(formatNumber(raw));
    onChange(Number(raw)); // 👈 backend-safe number
  };

  return (
      <input
        id={id}
        type="text"
        inputMode="numeric"
        placeholder={placeholder}
        value={displayValue}
        onChange={handleChange}
        required={required}
        disabled={disabled}
      />
  );
};

export default MoneyInput;