ConfirmPaymentDialog

"use client";

import { Dialog } from "@base-ui-components/react/dialog";
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 { Button } from "@/components/ledger/button";
import { HoldToConfirm } from "@/components/ledger/hold-to-confirm";
import { Money } from "@/components/ledger/money";
import { MaskedAccount } from "@/components/ledger/reference";

export interface ConfirmPaymentDialogProps {
  amount: MoneyValue;
  arrivalDate: Date;
  /** Wires and post-cutoff ACH: irreversible, so hold-to-confirm. */
  irreversible?: boolean;
  onConfirm: () => void;
  onOpenChange: (open: boolean) => void;
  open: boolean;
  payeeLast4: string;
  payeeName: string;
}

/**
 * Amount, destination, timing. In that order. Every time.
 *
 * Focus lands on Cancel, never on the destructive action. Escape cancels.
 */
export function ConfirmPaymentDialog({
  open,
  onOpenChange,
  amount,
  payeeName,
  payeeLast4,
  arrivalDate,
  irreversible = true,
  onConfirm,
}: ConfirmPaymentDialogProps) {
  const cancelRef = React.useRef<HTMLButtonElement>(null);

  return (
    <Dialog.Root onOpenChange={onOpenChange} open={open}>
      <Dialog.Portal>
        <Dialog.Backdrop className="fixed inset-0 z-overlay bg-[oklch(0.21_0.02_265/0.4)] data-[open]:animate-[ledger-enter_240ms_var(--ease-out)]" />
        <Dialog.Popup
          className={cn(
            // Dialogs stay centred. No transform-origin games.
            "fixed left-1/2 top-1/2 z-dialog w-[calc(100vw-32px)] max-w-[420px]",
            "-translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-surface-raised p-6",
            "shadow-elevation-4 outline-none",
            "data-[open]:ledger-enter",
          )}
          /* Money leaves the building here: focus lands on Cancel. */
          initialFocus={cancelRef}
          role="alertdialog"
        >
          <Dialog.Title className="text-title-md font-medium">
            Send <Money className="align-baseline" size="md" value={amount} /> to {payeeName}?
          </Dialog.Title>
          <Dialog.Description className="mt-2 space-y-1 text-body text-text-secondary" render={<div />}>
            <p className="flex items-center gap-1">
              To account <MaskedAccount last4={payeeLast4} /> · Arrives {formatDate(arrivalDate)}
            </p>
            {irreversible ? <p className="text-text-primary">This can’t be undone once submitted.</p> : null}
          </Dialog.Description>

          <div className="mt-6 flex flex-col gap-3">
            {irreversible ? (
              <HoldToConfirm
                label={`Hold to send ${plain(amount)}`}
                onConfirm={() => {
                  onConfirm();
                  onOpenChange(false);
                }}
                typedConfirmation="SEND"
              />
            ) : (
              <Button
                onClick={() => {
                  onConfirm();
                  onOpenChange(false);
                }}
                variant="primary"
              >
                Send {plain(amount)}
              </Button>
            )}
            <Dialog.Close render={<Button ref={cancelRef} variant="secondary" />}>Cancel</Dialog.Close>
          </div>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

function plain(value: MoneyValue) {
  return new Intl.NumberFormat("en-US", {
    currency: value.currency,
    currencyDisplay: "narrowSymbol",
    style: "currency",
  }).format(Number(value.amount) / 10 ** (value.scale ?? 2));
}