"use client";

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

type ValidatedNumberInputProps = {
  id?: string;
  placeholder: string;
  label?: string;
  min?: number;
  max?: number;
  step?: number;
  value: number | null;
  onValidChange?: (value: number | null) => void;
};

const ValidatedNumberInput: React.FC<ValidatedNumberInputProps> = ({
  id,
  placeholder,
  label = "Enter a number",
  min = 20,
  max = 50,
  step = 1,
  value,
  onValidChange,
}) => {
  const [inputValue, setInputValue] = useState<string>(value?.toString() ?? "");
  const [error, setError] = useState<string>("");

  useEffect(() => {
    const val = value?.toString() ?? "";
    setInputValue(val);

    const num = parseFloat(val);

    if (val === "") {
      setError("This field is required.");
      onValidChange?.(null);
    } else if (isNaN(num)) {
      setError("Please enter a valid number.");
      onValidChange?.(null);
    } else if (num < min || num > max) {
      setError(`Number must be between ${min} and ${max}.`);
      onValidChange?.(null);
    } else {
      setError("");
      onValidChange?.(num);
    }
  }, [value, min, max, onValidChange]);

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

    const num = parseFloat(newVal);

    if (newVal === "") {
      setError("This field is required.");
      onValidChange?.(null);
    } else if (isNaN(num)) {
      setError("Please enter a valid number.");
      onValidChange?.(null);
    } else if (num < min || num > max) {
      setError(`Number must be between ${min} and ${max}.`);
      onValidChange?.(null);
    } else {
      setError("");
      onValidChange?.(num);
    }
  };

  return (
    <div className="flex w-full flex-col">
      <label htmlFor={id} className="text-xs font-medium">{label}</label>
      <input
        id={id}
        type="number"
        placeholder={placeholder}
        value={inputValue}
        onChange={handleChange}
        min={min}
        max={max}
        step={step}
        className="w-full font-semibold placeholder:font-normal p-1 border-b-1 border-gray-950/25"
      />
      {error && <p className="text-sm text-red-600">{error}</p>}
    </div>
  );
};

export default ValidatedNumberInput;