"use client";

import { CalendarClock } from "lucide-react";

import { Button } from "@/components/ui/button";

import { formatYmd, type AsOfViewState } from "../lib/as-of-snapshot-view";

/** Strip shown above a report that is displaying a past "as of" date instead of live data. */
export function AsOfSnapshotBanner({
  asOf,
  view,
  buildingAsOf,
  onBackToLive,
  className,
}: {
  asOf: string;
  view: AsOfViewState;
  /** Date of the build currently holding the slot, when it is not ours (`busy_other`). */
  buildingAsOf?: string;
  onBackToLive: () => void;
  className?: string;
}) {
  const status = view.busyOther
    ? ` Waiting for another snapshot (${formatYmd(buildingAsOf ?? "")}) to finish first…`
    : view.waiting
      ? " Building this snapshot — it will load here when ready."
      : "";

  return (
    <div
      className={`flex flex-wrap items-center gap-2 rounded-lg border border-sky-300/60 bg-sky-50 px-4 py-2.5 text-sky-900 text-sm dark:border-sky-800 dark:bg-sky-950/40 dark:text-sky-200${className ? ` ${className}` : ""}`}
    >
      <CalendarClock className="size-4 shrink-0" />
      <span>
        Showing holdings as of <strong>{formatYmd(asOf)}</strong> — transactions up to that date,
        valued at the market prices and FX rates known then.
        {status}
      </span>
      <Button type="button" variant="ghost" size="sm" className="ml-auto h-7" onClick={onBackToLive}>
        Back to live
      </Button>
    </div>
  );
}