EntryReversalDialog

"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 { Button } from "@/components/ledger/button";
import { HoldToConfirm } from "@/components/ledger/hold-to-confirm";

export interface EntryReversalDialogProps {
  /** A reversal in a closed period is dated in the current open period,
      and the closed date is not offered. */
  closedThrough?: Date;
  currentPeriodStart: Date;
  entryDate: Date;
  entryNumber: string;
  onConfirm: (reversalDate: Date) => void;
  onOpenChange: (open: boolean) => void;
  open: boolean;
}

/** Never a delete. Says exactly what will happen, and to what. */
export function EntryReversalDialog({
  open,
  onOpenChange,
  entryNumber,
  entryDate,
  closedThrough,
  currentPeriodStart,
  onConfirm,
}: EntryReversalDialogProps) {
  const cancelRef = React.useRef<HTMLButtonElement>(null);
  const inClosedPeriod = closedThrough != null && entryDate <= closedThrough;
  const reversalDate = inClosedPeriod ? currentPeriodStart : entryDate;

  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)]" />
        <Dialog.Popup
          className={cn(
            "fixed left-1/2 top-1/2 z-dialog w-[calc(100vw-32px)] max-w-[460px]",
            "-translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-surface-raised p-6",
            "shadow-elevation-4 outline-none",
          )}
          /* Destructive dialog: focus lands on Cancel, never on the confirm. */
          initialFocus={cancelRef}
          role="alertdialog"
        >
          <Dialog.Title className="text-title-md font-medium">Reverse {entryNumber}?</Dialog.Title>
          <Dialog.Description className="mt-2 text-body text-text-secondary">
            This creates an offsetting entry dated {formatDate(reversalDate)}. The original stays in the
            ledger.
            {inClosedPeriod ? (
              <span className="mt-2 block text-text-primary">
                {formatDate(entryDate)} is in a closed period, so the reversal is dated in the current open
                period instead.
              </span>
            ) : null}
          </Dialog.Description>

          <div className="mt-6 flex flex-col gap-3">
            <HoldToConfirm
              label="Hold to reverse"
              onConfirm={() => {
                onConfirm(reversalDate);
                onOpenChange(false);
              }}
              typedConfirmation={entryNumber}
            />
            <Dialog.Close render={<Button ref={cancelRef} variant="secondary" />}>Cancel</Dialog.Close>
          </div>
        </Dialog.Popup>
      </Dialog.Portal>
    </Dialog.Root>
  );
}