"use client";
import React from "react";

import { Input } from "@/components/ui/input";
import { FormFieldWrapper } from "./FormFieldWrapper";
import { FormControl } from "@/components/ui/form";
import { UseFormReturn, FieldPath, FieldValues } from "react-hook-form";

export interface NumberFieldProps<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
> {
  form: UseFormReturn<TFieldValues>;
  name: TName;
  label?: string;
  placeholder?: string;
  description?: string;
  required?: boolean;
  disabled?: boolean;
  className?: string;
  min?: number;
  max?: number;
  step?: number;
  allowDecimal?: boolean;
  suffix?: string;
  prefix?: string;
}

export function NumberField<
  TFieldValues extends FieldValues = FieldValues,
  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>({
  form,
  name,
  label,
  placeholder,
  description,
  required = false,
  disabled = false,
  className,
  min,
  max,
  step,
  allowDecimal = true,
  suffix,
  prefix,
}: NumberFieldProps<TFieldValues, TName>) {
  return (
    <FormFieldWrapper
      form={form}
      name={name}
      label={label}
      description={description}
      required={required}
      className={className}
      skipFormControl
    >
      {(field) => (
        <div className="relative">
          {prefix && (
            <span className="absolute left-3 top-1/2 transform -translate-y-1/2 text-muted-foreground text-sm">
              {prefix}
            </span>
          )}
          <FormControl>
            <Input
              type="number"
              placeholder={placeholder}
              disabled={disabled}
              min={min}
              max={max}
              step={allowDecimal ? step || "0.01" : "1"}
              className={prefix ? "pl-8" : ""}
              {...field}
              onChange={(e) => {
                const value = e.target.value;
                if (value === "" || value === "-") {
                  field.onChange(value);
                } else {
                  const numValue = allowDecimal ? parseFloat(value) : parseInt(value, 10);
                  field.onChange(isNaN(numValue) ? "" : numValue);
                }
              }}
              value={field.value || ""}
            />
          </FormControl>
          {suffix && (
            <span className="absolute right-3 top-1/2 transform -translate-y-1/2 text-muted-foreground text-sm">
              {suffix}
            </span>
          )}
        </div>
      )}
    </FormFieldWrapper>
  );
}