"use client";

import React from "react";
import { Input } from "@/components/ui/input";

interface CurrencyInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "value"> {
  value: number | null | undefined;
  onChange: (value: number) => void;
}

export function CurrencyInput({ value, onChange, className, ...props }: CurrencyInputProps) {
  const formatCurrency = (val: number) => {
    return new Intl.NumberFormat("pt-BR", {
      minimumFractionDigits: 2,
      maximumFractionDigits: 2,
    }).format(val);
  };

  const displayValue = value !== undefined && value !== null ? formatCurrency(value) : "";

  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const inputValue = e.target.value;
    
    // Remove tudo que não é dígito
    const digits = inputValue.replace(/\D/g, "");
    
    if (!digits) {
      onChange(0);
      return;
    }

    // Converte para número (dividir por 100 para centavos)
    const numberValue = parseInt(digits) / 100;
    
    // Atualiza o display formatado imediatamente (máscara em tempo real)
    // Ex: digita 7 -> 0,07. Digita 0 -> 0,70. Digita 0 -> 7,00.
    // O usuário reclamou de "digito 7 e vira 7,00".
    // Se ele quer digitar "7" e virar "7", sem ser centavos automáticos, a lógica é outra.
    // Mas o padrão bancário/máquina de cartão é digitar centavos.
    // Se o comportamento anterior era "digito 7, vira 7,00" (instantâneo) e bloqueia, é porque estava formatando errado.
    
    onChange(numberValue);
  };

  return (
    <Input
      {...props}
      value={displayValue}
      onChange={handleChange}
      className={className}
      placeholder="0,00"
    />
  );
}