import { usePage } from "@inertiajs/react";
import { useState, type ReactNode } from "react";

import InputError from "@/back/Components/InputError";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { type MinMax } from "@/hooks/use-laravel-validation";
import trans from "@/hooks/use-translations";
import { cn } from "@/lib/utils";

interface SimpleNumberProps {
  className?: string;
  name: string;
  label: ReactNode | string;
  value?: number;
  id?: string;
  step?: number;
  limits?: MinMax;
  placeholder?: string;
  required?: boolean;
  disabled?: boolean;
  parentErrors?: Record<string, string> | null;
  setData: (name: string, value: string) => void;
}

export default function SimpleNumber({
  className,
  value = 0,
  name,
  label,
  id = name,
  step = 1,
  limits,
  placeholder = "uwil-backend::back.enter_number_here",
  required = true,
  disabled = false,
  parentErrors = null,
  setData,
}: Readonly<SimpleNumberProps>) {
  const { errors } = usePage().props;
  const localErrors = parentErrors ?? errors;

  const localLimits = {
    min: limits?.min ?? 1,
    max: limits?.max ?? 1000,
  };
  const safeValue =
    value >= localLimits.min && value <= localLimits.max
      ? value
      : localLimits.min;

  const [inputValue, setInputValue] = useState<number>(safeValue);

  return (
    <div className={cn("flex flex-col w-full gap-1.5", className)}>
      <Label htmlFor={id} className="font-bold flex items-center gap-1.5">
        {label}
        {required && " *"}
      </Label>
      <div className="flex w-full">
        <Input
          id={id}
          name={name}
          type="number"
          placeholder={trans(placeholder)}
          value={inputValue}
          min={localLimits.min}
          max={localLimits.max}
          step={step}
          onChange={(e) => {
            const num = Number(e.target.value);
            const clamped = Math.min(
              localLimits.max,
              Math.max(localLimits.min, num),
            );
            setInputValue(clamped);
            setData(name, e.target.value);
          }}
          required={required}
          disabled={disabled}
          className={cn("w-full", {
            "border-destructive/50": localErrors[name],
          })}
        />
      </div>
      <InputError message={localErrors[name]} />
    </div>
  );
}