ApprovalChain

"use client";

import { cn } from "@/lib/ledger/cn";
import { formatTimestamp } from "@/lib/ledger/fiscal-period";
import type { MoneyValue } from "@/lib/ledger/money.types";
import { CheckIcon, ExclamationTriangleIcon, ShieldExclamationIcon, UserIcon } from "@/components/ledger/icons";
import { Money } from "@/components/ledger/money";

export type ApprovalStep = {
  id: string;
  role: string;
  approver: string;
  threshold?: MoneyValue;
  state: "approved" | "pending" | "blocked" | "not-required";
  at?: Date;
  /** Approvals bind to a version. */
  approvedVersion?: number;
};

export interface ApprovalChainProps {
  amount: MoneyValue;
  className?: string;
  currentVersion: number;
  preparer: string;
  steps: ApprovalStep[];
  /** The current viewer, so segregation of duties can be enforced. */
  viewer: { name: string; role: string };
}

/**
 * Who, in what order, what's done, what's blocking — **visible before
 * submission**. Threshold escalation shows while the amount is being typed,
 * not after submitting.
 *
 * Segregation of duties is enforced, not advisory: for the preparer, the
 * approve action is **absent**, not disabled.
 *
 * Approvals bind to a version. Editing an approved bill voids the approvals
 * and re-requests them with the change shown — this closes the classic
 * post-approval-edit fraud path.
 */
export function ApprovalChain({
  amount,
  steps,
  viewer,
  preparer,
  currentVersion,
  className,
}: ApprovalChainProps) {
  const viewerIsPreparer = viewer.name === preparer;
  const staleApprovals = steps.filter(
    (s) => s.state === "approved" && s.approvedVersion !== undefined && s.approvedVersion < currentVersion,
  );
  const blocking = steps.find((s) => s.state === "pending" || s.state === "blocked");

  return (
    <div className={cn("rounded-xl border border-border bg-surface p-6", className)}>
      <div className="flex flex-wrap items-baseline justify-between gap-3">
        <h3 className="text-title-sm font-medium">Approval chain</h3>
        <span className="text-caption text-text-secondary">
          For <Money size="xs" tone="inherit" value={amount} /> · version{" "}
          <span className="numeric">{currentVersion}</span>
        </span>
      </div>

      {staleApprovals.length > 0 ? (
        <p
          className="mt-3 flex items-start gap-2 rounded-sm bg-negative-subtle px-3 py-2 text-body text-negative"
          role="alert"
        >
          <ShieldExclamationIcon aria-hidden="true" className="mt-0.5 size-4 shrink-0" />
          This bill changed after approval. {staleApprovals.length} approval
          {staleApprovals.length === 1 ? " was" : "s were"} voided and must be re-requested, with the change
          shown to the re-approver.
        </p>
      ) : null}

      <ol className="mt-4 space-y-3">
        {steps.map((step, i) => {
          const last = i === steps.length - 1;
          const stale = staleApprovals.includes(step);
          const canAct = step.state === "pending" && viewer.role === step.role && !viewerIsPreparer;

          return (
            <li className="flex gap-3" key={step.id}>
              <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 === "approved" && !stale && "border-positive bg-positive-subtle text-positive",
                    stale && "border-negative bg-negative-subtle text-negative",
                    step.state === "pending" && "border-accent text-accent",
                    step.state === "blocked" && "border-border-strong text-text-tertiary",
                    step.state === "not-required" && "border-border text-text-disabled",
                  )}
                >
                  {step.state === "approved" && !stale ? (
                    <CheckIcon className="size-3" />
                  ) : stale ? (
                    <ExclamationTriangleIcon className="size-3" />
                  ) : (
                    <span aria-hidden="true" className="size-2 rounded-full bg-current" />
                  )}
                </span>
                {!last ? (
                  <span
                    aria-hidden="true"
                    className={cn(
                      "w-px flex-1",
                      step.state === "approved" && !stale ? "bg-positive" : "bg-border",
                    )}
                  />
                ) : null}
              </div>

              <div className={cn("flex-1", last ? "pb-0" : "pb-3")}>
                <p className="flex flex-wrap items-baseline gap-2 text-body">
                  <span className="font-medium">{step.role}</span>
                  <span className="text-text-secondary">{step.approver}</span>
                  {step.threshold ? (
                    <span className="text-caption text-text-tertiary">
                      required above <Money size="xs" tone="inherit" value={step.threshold} />
                    </span>
                  ) : null}
                </p>
                {step.at ? (
                  <p className="numeric text-caption text-text-tertiary">
                    {stale ? "Voided — approved " : "Approved "}
                    {formatTimestamp(step.at)}
                    {step.approvedVersion !== undefined ? ` on version ${step.approvedVersion}` : ""}
                  </p>
                ) : (
                  <p className="text-caption text-text-tertiary">
                    {step.state === "not-required"
                      ? "Not required at this amount"
                      : step.state === "blocked"
                        ? "Blocked until the previous approval completes"
                        : "Awaiting approval"}
                  </p>
                )}

                {/* Segregation of duties: absent for the preparer, not disabled. */}
                {canAct ? (
                  <div className="mt-2 flex gap-2">
                    <button
                      className="press h-8 rounded-sm bg-accent px-3 text-label font-medium text-accent-fg"
                      type="button"
                    >
                      Approve
                    </button>
                    <button
                      className="press h-8 rounded-sm border border-border px-3 text-label font-medium"
                      type="button"
                    >
                      Reject
                    </button>
                  </div>
                ) : null}
              </div>
            </li>
          );
        })}
      </ol>

      {viewerIsPreparer ? (
        <p className="mt-4 flex items-start gap-2 rounded-sm bg-surface-sunken px-3 py-2 text-caption text-text-secondary">
          <UserIcon aria-hidden="true" className="mt-0.5 size-3.5 shrink-0" />
          You prepared this bill, so you cannot approve it. That separation is structural, not a setting.
        </p>
      ) : null}

      {blocking ? (
        <p className="mt-2 text-caption text-text-secondary">
          Currently blocking: {blocking.role} ({blocking.approver}).
        </p>
      ) : null}
    </div>
  );
}