AmountInput

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import {
  currencyScale,
  currencySymbol,
  formatMoneyInput,
  moneyAriaLabel,
  parseMoneyInput,
} from "@/lib/ledger/format-money";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { Button } from "@/components/ledger/button";
import { Money } from "@/components/ledger/money";

export interface AmountInputProps
  extends Omit<React.ComponentPropsWithoutRef<"input">, "value" | "onChange" | "type" | "max"> {
  currency: string;
  error?: string;
  label?: string;
  locale?: string;
  max?: MoneyValue;
  onMaxClick?: () => void;
  onValueChange: (minorUnits: number | null) => void;
  /** Minor units, or null for empty. */
  value: number | null;
}

/**
 * The hardest input in fintech.
 *
 * `type="text"` + `inputMode="decimal"`, never `type="number"` — the scroll
 * wheel on a number input will silently change someone's payment amount.
 * Parse permissively, format on blur only: inserting a thousands separator
 * mid-typing moves the caret and is the single most infuriating input bug
 * in this domain. Paste is never blocked. Max is soft — an overdraft may be
 * legitimate, and blocking input to prevent an invalid state prevents valid
 * ones too.
 */
export const AmountInput = React.forwardRef<HTMLInputElement, AmountInputProps>(
  (
    {
      className,
      currency,
      value,
      onValueChange,
      max,
      onMaxClick,
      label = "Amount",
      locale = "en-US",
      error,
      id,
      ...props
    },
    ref,
  ) => {
    const reactId = React.useId();
    const inputId = id ?? reactId;
    const describedBy = `${inputId}-parsed`;
    const errorId = `${inputId}-error`;

    const [draft, setDraft] = React.useState(() =>
      value == null ? "" : formatMoneyInput(value, currency, locale),
    );
    const [focused, setFocused] = React.useState(false);
    const scale = currencyScale(currency, locale);
    const symbol = currencySymbol(currency, locale);

    // Reformat when the value changes from outside (a Max click, a swap flip),
    // but never while the field is being typed into.
    React.useEffect(() => {
      if (focused) return;
      setDraft(value == null ? "" : formatMoneyInput(value, currency, locale));
    }, [value, currency, locale, focused]);

    const exceedsMax = max != null && value != null && value > Number(max.amount);

    const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
      const next = e.target.value;
      setDraft(next);
      const parsed = parseMoneyInput(next, currency, locale);
      onValueChange(next.trim() === "" ? null : parsed);
    };

    const handleBlur = (e: React.FocusEvent<HTMLInputElement>) => {
      setFocused(false);
      const parsed = parseMoneyInput(draft, currency, locale);
      if (parsed == null) {
        setDraft("");
        onValueChange(null);
      } else {
        setDraft(formatMoneyInput(parsed, currency, locale));
        onValueChange(parsed);
      }
      props.onBlur?.(e);
    };

    const inlineError =
      error ??
      (exceedsMax && max
        ? `Exceeds available balance of ${formatMoneyInput(Number(max.amount), max.currency, locale)} ${max.currency}`
        : undefined);

    return (
      <div className={cn("w-full", className)}>
        <div className="flex items-baseline justify-between">
          <label className="text-label font-medium text-text-secondary" htmlFor={inputId}>
            {label}
          </label>
          {max ? (
            <span className="text-caption text-text-secondary">
              Balance <Money size="xs" tone="inherit" value={max} />
            </span>
          ) : null}
        </div>

        <div
          className={cn(
            "mt-2 flex items-center gap-2 rounded-md border bg-surface px-4",
            "transition-colors duration-1 ease-standard",
            inlineError ? "border-negative" : "border-border hover:border-border-strong",
            "focus-within:border-accent",
          )}
        >
          {/* The symbol is part of the field, not a floating adornment that
              misaligns as the value grows. */}
          <span aria-hidden="true" className="numeric text-figure-lg text-text-tertiary">
            {symbol}
          </span>
          <input
            {...props}
            aria-describedby={cn(describedBy, inlineError && errorId)}
            aria-invalid={inlineError ? true : undefined}
            aria-label={`${label} in ${currency}`}
            autoComplete="off"
            /* 16px minimum or iOS Safari zooms the viewport and never zooms back. */
            className={cn(
              "numeric h-16 w-0 min-w-0 flex-1 bg-transparent text-figure-lg font-medium",
              "outline-none placeholder:text-text-disabled",
            )}
            id={inputId}
            inputMode="decimal"
            onBlur={handleBlur}
            onChange={handleChange}
            onFocus={(e) => {
              setFocused(true);
              props.onFocus?.(e);
            }}
            placeholder={scale === 0 ? "0" : `0.${"0".repeat(scale)}`}
            ref={ref}
            type="text"
            value={draft}
          />
          {onMaxClick && max ? (
            <Button onClick={onMaxClick} size="sm" variant="ghost">
              Max
            </Button>
          ) : null}
        </div>

        {/* The parsed value, announced on blur. */}
        <span className="sr-only" id={describedBy}>
          {value == null ? "No amount entered" : moneyAriaLabel({ amount: value, currency }, { locale })}
        </span>

        {inlineError ? (
          // 140ms opacity + 4px translate. A shake is forbidden: it is a stress
          // signal in a context where the user is already anxious about money.
          <p className="ledger-crossfade mt-2 text-caption text-negative" id={errorId} role="alert">
            {inlineError}
          </p>
        ) : null}
      </div>
    );
  },
);
AmountInput.displayName = "AmountInput";