PaymentStatusTimeline

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

export type TimelineStep = {
  label: string;
  at: Date | null;
  state: "done" | "pending" | "failed";
  /** On failure: what happened and what to do about it. */
  reason?: string;
  remedy?: string;
};

export interface PaymentStatusTimelineProps extends React.ComponentPropsWithoutRef<"ol"> {
  steps: TimelineStep[];
  timeZone?: string;
}

/**
 * Submitted → Sent → In transit → Settled, each with a real timestamp and a
 * stated timezone. Pending is a state, not a load — a clock icon, never a
 * spinner.
 */
export const PaymentStatusTimeline = React.forwardRef<HTMLOListElement, PaymentStatusTimelineProps>(
  ({ className, steps, timeZone = "UTC", ...props }, ref) => (
    <ol className={cn("flex flex-col", className)} ref={ref} {...props}>
      {steps.map((step, i) => {
        const last = i === steps.length - 1;
        return (
          <li className="flex gap-3" key={step.label}>
            <div className="flex flex-col items-center">
              <span
                aria-hidden="true"
                className={cn(
                  "grid size-6 shrink-0 place-items-center rounded-full border",
                  step.state === "done" && "border-positive bg-positive-subtle text-positive",
                  step.state === "pending" && "border-border-strong text-text-tertiary",
                  step.state === "failed" && "border-negative bg-negative-subtle text-negative",
                )}
              >
                {step.state === "done" ? (
                  <CheckIcon className="size-3" />
                ) : step.state === "failed" ? (
                  <ExclamationTriangleIcon className="size-3" />
                ) : (
                  <ClockIcon className="size-3" />
                )}
              </span>
              {!last ? (
                <span
                  aria-hidden="true"
                  className={cn("w-px flex-1", step.state === "done" ? "bg-positive" : "bg-border")}
                />
              ) : null}
            </div>
            <div className={cn("pb-6", last && "pb-0")}>
              <p
                className={cn(
                  "text-body font-medium",
                  step.state === "pending" && "text-text-secondary",
                  step.state === "failed" && "text-negative",
                )}
              >
                {step.label}
              </p>
              {step.at ? (
                <p className="numeric text-caption text-text-tertiary">
                  {formatTimestamp(step.at, timeZone)}
                </p>
              ) : (
                <p className="text-caption text-text-tertiary">Not yet</p>
              )}
              {step.reason ? <p className="mt-1 text-caption text-text-secondary">{step.reason}</p> : null}
              {step.remedy ? (
                <p className="mt-1 text-caption font-medium text-text-primary">{step.remedy}</p>
              ) : null}
            </div>
          </li>
        );
      })}
    </ol>
  ),
);
PaymentStatusTimeline.displayName = "PaymentStatusTimeline";