PaymentForm

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { AmountInput } from "@/components/ledger/amount-input";
import { Button } from "@/components/ledger/button";
import { ConfirmPaymentDialog } from "@/components/ledger/confirm-payment-dialog";
import { CurrencySelect } from "@/components/ledger/currency-select";
import { ChevronDownIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";
import { type Payee, PayeeSelect } from "@/components/ledger/payee-select";
import { type PaymentMethod, PaymentMethodList } from "@/components/ledger/payment-method-list";

export interface PaymentFormProps {
  balance: MoneyValue;
  className?: string;
  methods: PaymentMethod[];
  onSubmit?: (payload: {
    amount: number;
    currency: string;
    payeeId: string;
    methodId: string;
    date: string;
    memo: string;
  }) => void;
  payees: Payee[];
  /** Computed by the caller — components never do arithmetic. */
  quote?: (amount: number, methodId: string) => { fee: MoneyValue; arrival: Date };
}

/**
 * amount → payee → method → date → memo. That order: the amount is what the
 * user came to do, and it contextualizes everything after it.
 *
 * Validation on blur, never per keystroke. The submit button states the
 * amount. On phone the submit is bottom-anchored above the safe area and
 * above the keyboard.
 */
export function PaymentForm({ payees, methods, balance, quote, onSubmit, className }: PaymentFormProps) {
  const [amount, setAmount] = React.useState<number | null>(null);
  const [currency, setCurrency] = React.useState(balance.currency);
  const [payeeId, setPayeeId] = React.useState<string | null>(null);
  const [methodId, setMethodId] = React.useState(methods[0]?.id ?? "");
  const [date, setDate] = React.useState(() => new Date().toISOString().slice(0, 10));
  const [memo, setMemo] = React.useState("");
  const [reference, setReference] = React.useState("");
  const [showDetails, setShowDetails] = React.useState(false);
  const [confirming, setConfirming] = React.useState(false);

  const payee = payees.find((p) => p.id === payeeId);
  const estimate = quote && amount != null ? quote(amount, methodId) : undefined;
  const ready = amount != null && amount > 0 && payee != null && methodId !== "";

  return (
    <form
      className={cn("flex flex-col gap-6", className)}
      onSubmit={(e) => {
        e.preventDefault();
        if (ready) setConfirming(true);
      }}
    >
      <div className="flex items-end gap-3">
        <AmountInput
          className="flex-1"
          currency={currency}
          max={balance}
          onMaxClick={() => setAmount(Number(balance.amount))}
          onValueChange={setAmount}
          value={amount}
        />
        <CurrencySelect
          className="mb-1"
          onValueChange={setCurrency}
          recents={["USD", "EUR", "GBP"]}
          value={currency}
        />
      </div>

      {/* Fee and arrival update live below the amount, with a crossfade —
          never a count-up. */}
      {estimate ? (
        <p
          className="ledger-crossfade -mt-4 flex items-center gap-2 text-caption text-text-secondary"
          key={`${amount}-${methodId}`}
        >
          Fee <Money size="xs" tone="inherit" value={estimate.fee} />
          <span aria-hidden="true">·</span>
          Arrives {formatDate(estimate.arrival)}
        </p>
      ) : null}

      <Field label="Recipient">
        <PayeeSelect onValueChange={setPayeeId} payees={payees} value={payeeId} />
      </Field>

      <Field label="Pay from">
        <PaymentMethodList methods={methods} onValueChange={setMethodId} value={methodId} />
      </Field>

      <Field label="Send on">
        <input
          className="numeric h-10 w-full rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
          onChange={(e) => setDate(e.target.value)}
          type="date"
          value={date}
        />
      </Field>

      {/* Progressive disclosure: memo, reference and attachments. */}
      <div>
        <button
          aria-expanded={showDetails}
          className="flex items-center gap-1 text-label font-medium text-accent"
          onClick={() => setShowDetails((v) => !v)}
          type="button"
        >
          <ChevronDownIcon
            aria-hidden="true"
            className={cn(
              "size-4 transition-transform duration-2 ease-standard",
              showDetails && "rotate-180",
            )}
          />
          Add details
        </button>
        {showDetails ? (
          <div className="mt-3 space-y-4">
            <Field label="Memo">
              <input
                className="h-10 w-full rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
                maxLength={140}
                onChange={(e) => setMemo(e.target.value)}
                value={memo}
              />
            </Field>
            <Field label="Reference">
              <input
                className="reference-numeric h-10 w-full rounded-sm border border-border bg-surface px-3 text-body outline-none focus-visible:border-accent"
                onChange={(e) => setReference(e.target.value)}
                value={reference}
              />
            </Field>
          </div>
        ) : null}
      </div>

      <div
        className="sticky bottom-0 -mx-6 border-t border-border-subtle bg-surface px-6 pt-4 md:static md:mx-0 md:border-0 md:px-0 md:pt-0"
        style={{ paddingBottom: "max(16px, env(safe-area-inset-bottom))" }}
      >
        <Button className="w-full" disabled={!ready} size="lg" type="submit" variant="primary">
          {amount != null && amount > 0 ? (
            <>
              Send <Money size="sm" tone="inherit" value={{ amount, currency }} />
            </>
          ) : (
            "Send payment"
          )}
        </Button>
      </div>

      {ready && payee ? (
        <ConfirmPaymentDialog
          amount={{ amount: amount ?? 0, currency }}
          arrivalDate={estimate?.arrival ?? new Date()}
          onConfirm={() =>
            onSubmit?.({
              amount: amount ?? 0,
              currency,
              date,
              memo,
              methodId,
              payeeId: payee.id,
            })
          }
          onOpenChange={setConfirming}
          open={confirming}
          payeeLast4={payee.last4}
          payeeName={payee.name}
        />
      ) : null}
    </form>
  );
}

function Field({ label, children }: { label: string; children: React.ReactNode }) {
  return (
    <label className="block">
      <span className="mb-2 block text-label font-medium text-text-secondary">{label}</span>
      {children}
    </label>
  );
}