"use client";

import { useState, type InputHTMLAttributes } from "react";

import { numeroDoTexto, textoDecimalValido } from "@/lib/numero-do-campo";

/* 12,9 aparece como 12,90; preço de milheiro pode ter até 4 casas (0,0850). */
function comCentavos(valor: number, casas: number) {
  if (!Number.isFinite(valor) || valor === 0) return "";
  return valor.toLocaleString("pt-BR", { minimumFractionDigits: 2, maximumFractionDigits: casas, useGrouping: false });
}

/**
 * Campo de valor em reais: aceita vírgula ou ponto enquanto a pessoa digita
 * (como o campo decimal da casa) e, ao sair, mostra com os centavos.
 */
export function CampoDeDinheiro({
  valor,
  aoMudar,
  casas = 2,
  onBlur,
  ...resto
}: {
  valor: number;
  aoMudar: (valor: number) => void;
  casas?: number;
} & Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "inputMode">) {
  const [texto, setTexto] = useState(() => comCentavos(valor, casas));
  const [conhecido, setConhecido] = useState(valor);
  if (valor !== conhecido) {
    /* O valor mudou por fora (produto escolhido, nota copiada): reescreve o texto. */
    setConhecido(valor);
    setTexto(comCentavos(valor, casas));
  }

  return (
    <input
      {...resto}
      inputMode="decimal"
      autoComplete="off"
      value={texto}
      onChange={(e) => {
        const digitado = e.target.value.replace(/\s/g, "");
        if (!textoDecimalValido(digitado)) return;
        const decimais = digitado.split(/[.,]/)[1];
        if (decimais && decimais.length > casas) return;
        const numero = numeroDoTexto(digitado);
        setTexto(digitado);
        setConhecido(numero);
        aoMudar(numero);
      }}
      onBlur={(e) => {
        setTexto(comCentavos(conhecido, casas));
        onBlur?.(e);
      }}
    />
  );
}