"use client";

import {
  InputGroup,
  InputGroupAddon,
  InputGroupInput,
  InputGroupText,
} from "@/components/ui/input-group";
import { formatMoneyInput, parseMoney } from "@/shared/money";

/**
 * Türkçe tutar girişi ("1.250,50"). Değer string olarak tutulur (zod sunucuda/istemcide ayrıştırır);
 * alandan çıkınca geçerliyse Türkçe biçime getirilir.
 */
export function MoneyInput({
  value,
  onChange,
  onBlur,
  allowNegative = false,
  ...props
}: Omit<React.ComponentProps<typeof InputGroupInput>, "value" | "onChange" | "type"> & {
  value: string;
  onChange: (value: string) => void;
  allowNegative?: boolean;
}) {
  return (
    <InputGroup>
      <InputGroupInput
        {...props}
        type="text"
        inputMode="decimal"
        autoComplete="off"
        className="text-right tabular-nums"
        value={value}
        onChange={(e) =>
          onChange(e.target.value.replace(allowNegative ? /[^\d.,\s-−]/g : /[^\d.,\s]/g, ""))
        }
        onBlur={(e) => {
          const minor = parseMoney(value);
          if (minor !== null && value.trim() !== "") onChange(formatMoneyInput(minor));
          onBlur?.(e);
        }}
      />
      <InputGroupAddon align="inline-end">
        <InputGroupText>₺</InputGroupText>
      </InputGroupAddon>
    </InputGroup>
  );
}