BankAccountInput

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { CheckIcon } from "@/components/ledger/icons";

/** ABA routing checksum: 3·(d1+d4+d7) + 7·(d2+d5+d8) + 1·(d3+d6+d9) ≡ 0 mod 10. */
export function validateAba(routing: string): boolean {
  const d = routing.replace(/\D/g, "");
  if (d.length !== 9) return false;
  const w = [3, 7, 1, 3, 7, 1, 3, 7, 1];
  const sum = d.split("").reduce((acc, ch, i) => acc + Number(ch) * w[i], 0);
  return sum % 10 === 0;
}

/** IBAN mod-97: move the first four characters to the end, letters → numbers. */
export function validateIban(iban: string): boolean {
  const s = iban.replace(/\s/g, "").toUpperCase();
  if (!/^[A-Z]{2}\d{2}[A-Z0-9]{10,30}$/.test(s)) return false;
  const rearranged = s.slice(4) + s.slice(0, 4);
  const expanded = rearranged.replace(/[A-Z]/g, (c) => String(c.charCodeAt(0) - 55));
  let remainder = 0;
  for (const ch of expanded) remainder = (remainder * 10 + Number(ch)) % 97;
  return remainder === 1;
}

const INSTITUTIONS: Record<string, string> = {
  "021000021": "JPMorgan Chase Bank, N.A.",
  "026009593": "Bank of America, N.A.",
  "071000013": "JPMorgan Chase Bank, N.A. (Illinois)",
  "121000248": "Wells Fargo Bank, N.A.",
};

export interface BankAccountInputProps {
  className?: string;
  mode?: "us" | "iban";
  onChange?: (value: { routing: string; account: string; valid: boolean }) => void;
}

/**
 * The resolved institution name is the point: instant confirmation that the
 * user typed the right bank, before any money moves.
 */
export function BankAccountInput({ mode = "us", className, onChange }: BankAccountInputProps) {
  const [routing, setRouting] = React.useState("");
  const [account, setAccount] = React.useState("");
  const [iban, setIban] = React.useState("");

  const routingValid = validateAba(routing);
  const ibanValid = validateIban(iban);
  const institution = routingValid
    ? (INSTITUTIONS[routing.replace(/\D/g, "")] ?? "Verified routing number")
    : null;

  React.useEffect(() => {
    onChange?.(
      mode === "us"
        ? { account, routing, valid: routingValid && account.length >= 4 }
        : { account: iban, routing: "", valid: ibanValid },
    );
  }, [mode, routing, account, iban, routingValid, ibanValid, onChange]);

  if (mode === "iban") {
    return (
      <label className={cn("block", className)}>
        <span className="mb-2 block text-label font-medium text-text-secondary">IBAN</span>
        <input
          aria-invalid={iban.length > 0 && !ibanValid}
          aria-label="International bank account number"
          className={cn(
            "reference-numeric h-10 w-full rounded-sm border bg-surface px-3 text-body outline-none focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-subtle",
            iban && !ibanValid ? "border-negative" : "border-border focus-visible:border-accent",
          )}
          onChange={(e) => setIban(e.target.value.toUpperCase())}
          placeholder="DE89 3704 0044 0532 0130 00"
          value={iban}
        />
        {iban && !ibanValid ? (
          <span className="mt-1 block text-caption text-negative" role="alert">
            That IBAN fails its checksum — check the country code and digits.
          </span>
        ) : ibanValid ? (
          <span className="mt-1 flex items-center gap-1 text-caption text-positive">
            <CheckIcon aria-hidden="true" className="size-3" /> Valid IBAN
          </span>
        ) : null}
      </label>
    );
  }

  return (
    <div className={cn("grid gap-3 sm:grid-cols-2", className)}>
      <label className="block">
        <span className="mb-2 block text-label font-medium text-text-secondary">Routing number</span>
        <input
          aria-invalid={routing.length === 9 && !routingValid}
          aria-label="ABA routing number"
          className={cn(
            "reference-numeric h-10 w-full rounded-sm border bg-surface px-3 text-body outline-none focus-visible:border-accent focus-visible:ring-2 focus-visible:ring-accent-subtle",
            routing.length === 9 && !routingValid
              ? "border-negative"
              : "border-border focus-visible:border-accent",
          )}
          inputMode="numeric"
          maxLength={9}
          onChange={(e) => setRouting(e.target.value.replace(/\D/g, ""))}
          placeholder="021000021"
          value={routing}
        />
        {institution ? (
          <span className="ledger-crossfade mt-1 flex items-center gap-1 text-caption text-positive">
            <CheckIcon aria-hidden="true" className="size-3" /> {institution}
          </span>
        ) : routing.length === 9 ? (
          <span className="mt-1 block text-caption text-negative" role="alert">
            That routing number fails its checksum.
          </span>
        ) : null}
      </label>

      <label className="block">
        <span className="mb-2 block text-label font-medium text-text-secondary">Account number</span>
        <input
          aria-label="Bank account number"
          className="reference-numeric h-10 w-full rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
          inputMode="numeric"
          onChange={(e) => setAccount(e.target.value.replace(/\D/g, ""))}
          value={account}
        />
      </label>
    </div>
  );
}