"use client";

import { Input } from "@/components/ui/Field";
import {
  formatMoneyDisplay,
  moneyToWordsLabel,
  parseMoneyDigits,
} from "@/lib/money";

export function MoneyInput({
  value,
  onChange,
  disabled,
  unit = "ریال",
  placeholder = "0",
}: {
  /** Digits-only or numeric string (no separators). */
  value: string;
  onChange: (digits: string) => void;
  disabled?: boolean;
  unit?: string;
  placeholder?: string;
}) {
  const digits = parseMoneyDigits(String(value ?? ""));
  const words = moneyToWordsLabel(digits, unit);

  return (
    <div className="space-y-1.5">
      <div className="relative">
        <Input
          inputMode="numeric"
          disabled={disabled}
          placeholder={placeholder}
          value={formatMoneyDisplay(digits)}
          onChange={(e) => onChange(parseMoneyDigits(e.target.value))}
          className="pe-14 font-mono tracking-wide"
        />
        <span className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-xs text-[var(--muted)]">
          {unit}
        </span>
      </div>
      {digits ? (
        <p className="text-xs leading-6 text-[var(--muted)]">{words}</p>
      ) : (
        <p className="text-xs text-[var(--muted)]">مبلغ را به عدد وارد کنید؛ سه رقم‌سه رقم جدا می‌شود.</p>
      )}
    </div>
  );
}