gitfor/platform

import { TONE_SURFACE } from "~/ui/tones";
import { useDemoTimeline } from "~/hooks/use-demo-timeline";
import { Avatar } from "~/ui/Avatar";
import { Badge } from "~/ui/Badge";
import { StatusDot } from "~/ui/StatusDot";
import { cn } from "~/utils/cn";
import { DemoWindow } from "../DemoWindow";

const STEPS = 6;
const INTERVAL_MS = 1100;
const APPROVED_AT = 4;
const QUEUED_AT = 5;

const CHECKS = [
  { name: "ci / lint", done: 1, time: "9s" },
  { name: "ci / test (node 22)", done: 2, time: "38s" },
  { name: "ci / test (node 24)", done: 3, time: "41s" },
] as const;

function queuePhase(step: number): { state: string; text: string } {
  if (step >= STEPS) return { state: "success", text: "Merged by the queue into main" };
  if (step >= QUEUED_AT) return { state: "in_progress", text: "Testing against latest main…" };
  return { state: "queued", text: "Auto-merge when ready" };
}

function checkState(step: number, done: number): string {
  if (step >= done) return "success";
  return step >= done - 1 ? "in_progress" : "queued";
}

export function PullRequestDemo({ className }: { className?: string }) {
  const step = useDemoTimeline(STEPS, INTERVAL_MS);
  const approved = step >= APPROVED_AT;
  const merged = step >= STEPS;
  const queue = queuePhase(step);
  return (
    <DemoWindow
      title="acme/web · pull request #128"
      label="A pull request whose checks pass, gets approved and merges itself"
      className={className}