CutoffWarning

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatDate } from "@/lib/ledger/fiscal-period";
import { ExclamationTriangleIcon } from "@/components/ledger/icons";

export interface CutoffWarningProps extends React.ComponentPropsWithoutRef<"div"> {
  closedThrough: Date;
  entryDate: Date;
  onPostAccrual?: () => void;
  onRequestReopen?: () => void;
}

/**
 * Inline at the date field, never a toast. States the consequence **and both
 * legitimate remedies** — a bare rejection leaves the user with no path.
 */
export const CutoffWarning = React.forwardRef<HTMLDivElement, CutoffWarningProps>(
  ({ className, entryDate, closedThrough, onRequestReopen, onPostAccrual, ...props }, ref) => {
    const postingPeriod = new Date(closedThrough.getFullYear(), closedThrough.getMonth() + 1, 1);
    return (
      <div
        className={cn("flex items-start gap-2 rounded-sm bg-warning-subtle px-3 py-2", className)}
        ref={ref}
        role="alert"
        {...props}
      >
        <ExclamationTriangleIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0 text-warning" />
        <p className="text-body text-text-primary">
          This is dated {formatDate(entryDate)}, in a closed period. It will post to{" "}
          {postingPeriod.toLocaleDateString("en-GB", { month: "long", year: "numeric" })} and be flagged for
          cutoff review. If it belongs in the earlier period,{" "}
          <button
            className="text-accent underline underline-offset-2"
            onClick={onRequestReopen}
            type="button"
          >
            request a reopen
          </button>{" "}
          or{" "}
          <button className="text-accent underline underline-offset-2" onClick={onPostAccrual} type="button">
            post an accrual
          </button>
          .
        </p>
      </div>
    );
  },
);
CutoffWarning.displayName = "CutoffWarning";