Payment Modal

"use client";

import { useId, useState, type ReactNode } from "react";
import { Dialog } from "radix-ui";
import { CheckCircle2, CreditCard, Landmark, Lock, X } from "lucide-react";
import { cn } from "@/lib/utils";

export interface PaymentModalProps {
  trigger?: ReactNode;
  open?: boolean;
  defaultOpen?: boolean;
  onOpenChange?: (open: boolean) => void;
  invoice?: string;
  payee?: string;
  amount?: number;
  currency?: string;
  onPay?: (method: "card" | "ach") => void;
  da?: string;
}

/** Pay-invoice dialog: amount summary, card/bank method radio cards, method-specific fields, secure note and a pay button that switches to a success state. */
export function PaymentModal({
  trigger,
  open,
  defaultOpen,
  onOpenChange,
  invoice = "INV-2041",
  payee = "Ledgerly Inc.",
  amount = 19872,
  currency = "USD",
  onPay,
  da = "neo-corporate",
}: PaymentModalProps) {
  const id = useId();
  const [method, setMethod] = useState<"card" | "ach">("ach");
  const [paid, setPaid] = useState(false);
  const fmt = amount.toLocaleString("en-US", { style: "currency", currency });
  const fee = method === "card" ? amount * 0.024 + 0.2 : Math.min(amount * 0.008, 5);
  const field = "da-stroke h-10 w-full rounded-da-md bg-da-surface px-3 text-sm outline-none focus:border-da-primary focus:ring-3 focus:ring-da-ring/25";
  return (
    <Dialog.Root
      open={open}
      defaultOpen={defaultOpen}
      onOpenChange={(o) => {
        if (!o) setPaid(false);
        onOpenChange?.(o);
      }}
    >
      {trigger && <Dialog.Trigger asChild>{trigger}</Dialog.Trigger>}
      <Dialog.Portal>
        <Dialog.Overlay
          data-da={da}
          className="fixed inset-0 z-50 bg-da-overlay transition-opacity duration-(--da-duration) starting:opacity-0 motion-reduce:transition-none"
        />
        <Dialog.Content
          data-da={da}
          className="da-stroke fixed top-1/2 left-1/2 z-50 max-h-[calc(100dvh-2rem)] w-[calc(100%-2rem)] max-w-md -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-da-lg bg-da-surface text-da-surface-fg shadow-da-lg outline-none transition-[opacity,scale] duration-(--da-duration) starting:scale-[0.98] starting:opacity-0 motion-reduce:transition-none"
        >
          <Dialog.Close
            aria-label="Close"
            className="da-focus absolute top-4 right-4 grid size-8 place-items-center rounded-da-md text-da-muted-fg hover:bg-da-muted"
          >
            <X aria-hidden className="size-4" />
          </Dialog.Close>
          {paid ? (
            <div role="status" className="px-6 py-12 text-center">
              <CheckCircle2 aria-hidden className="mx-auto size-12 text-da-success" />
              <Dialog.Title className="mt-4 font-da-display text-xl font-bold">Payment submitted</Dialog.Title>
              <Dialog.Description className="mt-1 text-sm text-da-muted-fg">
                {fmt} to {payee}. A receipt is on its way to your inbox.
              </Dialog.Description>
            </div>
          ) : (
            <form
              onSubmit={(e) => {
                e.preventDefault();
                onPay?.(method);
                setPaid(true);
              }}
            >
              <div className="border-b border-da-border bg-da-surface-2 px-6 pt-6 pb-5">
                <Dialog.Title className="text-sm font-medium text-da-muted-fg">
                  Pay {invoice} · {payee}
                </Dialog.Title>
                <Dialog.Description className="mt-1 font-da-mono text-3xl font-medium tabular-nums">{fmt}</Dialog.Description>
              </div>
              <div className="grid gap-4 px-6 py-5">
                <fieldset>
                  <legend className="mb-2 text-sm font-medium">Payment method</legend>
                  <div className="grid grid-cols-2 gap-2">
                    {(
                      [
                        { v: "ach", l: "Bank (ACH)", s: "0.8%, max $5", i: Landmark },
                        { v: "card", l: "Card", s: "2.4% + 20¢", i: CreditCard },
                      ] as const
                    ).map((m) => (
                      <label
                        key={m.v}
                        className={cn(
                          "da-stroke flex cursor-pointer flex-col gap-1 rounded-da-md p-3 text-sm has-focus-visible:ring-3 has-focus-visible:ring-da-ring/40",
                          method === m.v && "border-da-primary bg-da-primary/5 ring-1 ring-da-primary",
                        )}
                      >
                        <input type="radio" name={`${id}-m`} value={m.v} checked={method === m.v} onChange={() => setMethod(m.v)} className="sr-only" />
                        <m.i aria-hidden className="size-5 text-da-primary" />
                        <span className="font-semibold">{m.l}</span>
                        <span className="text-xs text-da-muted-fg">{m.s}</span>
                      </label>
                    ))}
                  </div>
                </fieldset>
                {method === "card" ? (
                  <label className="grid gap-1.5 text-sm font-medium">
                    Card number
                    <input className={cn(field, "font-da-mono")} inputMode="numeric" autoComplete="cc-number" placeholder="4242 4242 4242 4242" required />
                  </label>
                ) : (
                  <div className="grid grid-cols-2 gap-3">
                    <label className="grid gap-1.5 text-sm font-medium">
                      Routing number
                      <input className={cn(field, "font-da-mono")} inputMode="numeric" defaultValue="021000021" required />
                    </label>
                    <label className="grid gap-1.5 text-sm font-medium">
                      Account number
                      <input className={cn(field, "font-da-mono")} inputMode="numeric" placeholder="••••6612" required />
                    </label>
                  </div>
                )}
                <p className="flex justify-between text-sm text-da-muted-fg">
                  <span>Processing fee</span>
                  <span className="font-da-mono">{fee.toLocaleString("en-US", { style: "currency", currency })}</span>
                </p>
              </div>
              <div className="border-t border-da-border px-6 py-4">
                <button type="submit" className="da-focus h-11 w-full rounded-da-md bg-da-primary font-semibold text-da-primary-fg hover:bg-da-primary/90">
                  Pay {fmt}
                </button>
                <p className="mt-3 flex items-center justify-center gap-1.5 text-xs text-da-muted-fg">
                  <Lock aria-hidden className="size-3.5" /> Encrypted and processed by Ledgerly Payments
                </p>
              </div>
            </form>
          )}
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}

export default PaymentModal;