AsOf

"use client";

import * as React from "react";
import { useSharedNow } from "@/hooks/ledger/use-shared-now";
import { cn } from "@/lib/ledger/cn";
import { formatDate, formatRelative, formatTimestamp } from "@/lib/ledger/fiscal-period";
import { Tooltip } from "@/components/ledger/tooltip";

export interface AsOfProps extends React.ComponentPropsWithoutRef<"time"> {
  /**
   * Beyond an hour, render the date alone and leave the clock time and zone to
   * the tooltip. For dense meta rows, where the full stamp is the single
   * longest run of text on a card and the least often read.
   *
   * Off by default: the unabridged form states its timezone inline, and that
   * is the correct default for a figure whose basis is being asserted.
   */
  compact?: boolean;
  date: Date;
  /** Suppress the absolute-timestamp tooltip — e.g. inside a cell that has its own. */
  noTooltip?: boolean;
  prefix?: string;
  timeZone?: string;
}

/**
 * A balance without an "as of" is a rumour.
 *
 * Relative under an hour, absolute beyond, timezone always stated. Driven by
 * one shared interval that pauses on tab hide — never one per instance.
 */
export const AsOf = React.forwardRef<HTMLTimeElement, AsOfProps>(
  ({ className, date, timeZone = "UTC", prefix, noTooltip, compact, ...props }, ref) => {
    const now = useSharedNow();
    const absolute = formatTimestamp(date, timeZone);
    const initial = compact ? formatDate(date) : absolute;
    const [text, setText] = React.useState(initial);

    // Render the absolute form on the server and on first paint so hydration
    // matches; swap to relative once the client clock is available.
    React.useEffect(() => {
      const relative = formatRelative(date, now);
      // `formatRelative` falls back to the full stamp beyond an hour; in
      // compact mode that fallback is the date alone.
      setText(compact && relative === formatTimestamp(date) ? formatDate(date) : relative);
    }, [compact, date, now]);

    // Supplementary by definition — the relative form is already readable, and
    // the absolute one is a restatement. Exactly what a hover tooltip is for.
    return (
      <Tooltip content={absolute} disabled={noTooltip}>
        <time
          // A stamp never breaks: "30 Sep / 2026" across two lines reads as two
          // facts. A tight row moves the whole stamp, not half of it.
          className={cn("numeric whitespace-nowrap text-caption text-text-tertiary", className)}
          dateTime={date.toISOString()}
          ref={ref}
          {...props}
        >
          {/* Words in the text face, the stamp in the figure face. */}
          {prefix ? <span className="font-sans">{`${prefix} `}</span> : null}
          {text}
        </time>
      </Tooltip>
    );
  },
);
AsOf.displayName = "AsOf";