RateLock

"use client";

import * as React from "react";
import { cn } from "@/lib/ledger/cn";
import { formatRate } from "@/lib/ledger/format-money";
import { Button } from "@/components/ledger/button";
import { RateLine } from "@/components/ledger/rate-line";

export interface RateLockProps {
  className?: string;
  /** Seconds the lock is valid for. */
  durationSeconds?: number;
  from: string;
  lockedAt: Date;
  onRefresh: () => number;
  rate: number;
  to: string;
}

/**
 * On expiry the rate refreshes and the confirm action stays disabled until
 * the user acknowledges the new rate. Silently executing at a rate the user
 * didn't see is the worst failure this family can have.
 *
 * The countdown is a rule-line progress bar, linear — consistent with the
 * statement grammar rather than a rounded pill.
 */
export function RateLock({
  from,
  to,
  rate,
  lockedAt,
  durationSeconds = 30,
  onRefresh,
  className,
}: RateLockProps) {
  const [remaining, setRemaining] = React.useState(durationSeconds);
  const [pendingRate, setPendingRate] = React.useState<number | null>(null);
  const [currentRate, setCurrentRate] = React.useState(rate);
  const [lockTime, setLockTime] = React.useState(lockedAt);

  /* The latest callback, read at expiry: an inline `onRefresh` would otherwise
     restart the countdown on every parent render. */
  const refresh = React.useRef(onRefresh);
  refresh.current = onRefresh;
  const expired = remaining <= 0;

  React.useEffect(() => {
    if (pendingRate !== null || expired) return;
    const id = setInterval(() => setRemaining((r) => Math.max(0, r - 1)), 1000);
    return () => clearInterval(id);
  }, [pendingRate, expired]);

  /* Out of the state updater: an updater must be pure, and StrictMode runs it
     twice — which fetched two quotes per expiry. */
  React.useEffect(() => {
    if (expired && pendingRate === null) setPendingRate(refresh.current());
  }, [expired, pendingRate]);

  const fraction = remaining / durationSeconds;
  const warning = fraction <= 0.2 && pendingRate === null;

  const acknowledge = () => {
    if (pendingRate === null) return;
    setCurrentRate(pendingRate);
    setLockTime(new Date());
    setPendingRate(null);
    setRemaining(durationSeconds);
  };

  return (
    <div className={cn("space-y-2", className)}>
      <RateLine asOf={lockTime} from={from} locked={pendingRate === null} rate={currentRate} to={to} />

      <div
        aria-label="Rate lock remaining"
        aria-valuemax={durationSeconds}
        aria-valuemin={0}
        aria-valuenow={remaining}
        className="relative h-[3px] w-full bg-border-subtle"
        role="progressbar"
      >
        <div
          className={cn(
            // scaleX rather than width: the bar ticks every second, and a width
            // change relayouts the row each tick. Linear, because it is a clock.
            "absolute inset-0 origin-left transition-transform duration-[1000ms] ease-linear",
            warning ? "bg-[var(--warning)]" : "bg-accent",
          )}
          style={{ transform: `scaleX(${fraction})` }}
        />
      </div>

      {pendingRate !== null ? (
        <div className="ledger-crossfade flex flex-wrap items-center gap-3 rounded-sm bg-warning-subtle p-3">
          <p className="flex-1 text-caption text-text-primary">
            The rate expired and has been refreshed to{" "}
            <span className="numeric font-medium">{formatRate(pendingRate)}</span>. Review it before
            continuing.
          </p>
          <Button onClick={acknowledge} size="sm" variant="primary">
            Accept new rate
          </Button>
        </div>
      ) : (
        <p className={cn("numeric text-caption", warning ? "text-warning" : "text-text-tertiary")}>
          {warning ? "Expiring in " : "Rate held for "}
          {remaining}s
        </p>
      )}
    </div>
  );
}