blockchain/apps/portal/components/explorer/hybrid-timeline.tsx

import { cn } from "@/lib/utils";
import type { TxStatus } from "@/lib/explorer-types";

const STEPS = [
  {
    key: "submit" as const,
    title: "Submit",
    body: "Transaction enters the private permissioned layer.",
  },
  {
    key: "confirm" as const,
    title: "Confirm",
    body: "Validators finalize it on the private layer.",
  },
  {
    key: "anchor" as const,
    title: "Anchor",
    body: "A public-chain commitment proves the private state.",
  },
];

function stepState(
  status: TxStatus,
  key: "submit" | "confirm" | "anchor",
): "done" | "active" | "todo" {
  if (status === "pending") {
    if (key === "submit") return "active";
    return "todo";
  }
  if (status === "confirmed") {
    if (key === "submit") return "done";
    if (key === "confirm") return "active";
    return "todo";
  }
  // anchored
  return "done";
}

export function HybridTimeline({ status }: { status: TxStatus }) {
  return (
    <ol className="grid gap-4 md:grid-cols-3">
      {STEPS.map((step, i) => {
        const state = stepState(status, step.key);
        return (
          <li
            key={step.key}
            className={cn(
              "relative rounded-xl border p-5",
              state === "done" && "border-proof/40 bg-proof-muted/40",
              state === "active" && "border-pending/50 bg-pending-muted/40",
              state === "todo" && "border-border bg-card",
            )}
          >
            <div className="flex items-center gap-2">
              <span
                className={cn(
                  "flex h-7 w-7 items-center justify-center rounded-full font-mono text-xs font-medium",
                  state === "done" && "bg-proof text-background",
                  state === "active" && "bg-pending text-background",
                  state === "todo" && "bg-muted text-muted-foreground",
                )}
              >
                {i + 1}
              </span>
              <span className="font-display text-base font-semibold">
                {step.title}
              </span>
            </div>
            <p className="mt-2 text-sm leading-relaxed text-muted-foreground">
              {step.body}
            </p>
            <p className="mt-3 text-[11px] font-medium uppercase tracking-wider text-muted-foreground">
              {state === "done" && "complete"}
              {state === "active" && "current"}
              {state === "todo" && "waiting"}
            </p>
          </li>
        );
      })}
    </ol>
  );
}