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}
    >
      <div className="space-y-4 p-5">
        <div className="space-y-2">
          <p className="text-base font-semibold text-kumo-strong">
            Add fuzzy matching to the command palette <span className="font-normal text-kumo-subtle">#128</span>
          </p>
          <div className="flex flex-wrap items-center gap-2 text-xs text-kumo-subtle">
            <Badge tone={merged ? "merged" : "success"}>{merged ? "Merged" : "Open"}</Badge>
            <Avatar name="mara" size="sm" src={null} />
            <span>
              mara {merged ? "merged" : "wants to merge"} into <span className="font-mono text-kumo-default">main</span>
            </span>
          </div>
        </div>
        <ul className="divide-y divide-kumo-hairline rounded-lg border border-kumo-hairline">
          {CHECKS.map((check) => (
            <li key={check.name} className="flex items-center gap-3 px-3 py-2">
              <StatusDot state={checkState(step, check.done)} />
              <span className="font-mono text-xs text-kumo-default">{check.name}</span>
              <span className="ml-auto font-mono text-xs text-kumo-inactive">
                {step >= check.done ? check.time : ""}
              </span>
            </li>
          ))}
          <li className="flex items-center gap-3 px-3 py-2">
            <Avatar name="devon" size="sm" src={null} />
            <span className={cn("text-xs transition-colors", approved ? "text-kumo-success" : "text-kumo-subtle")}>
              {approved ? "devon approved these changes" : "Review requested from devon"}
            </span>
          </li>
        </ul>
        <div
          className={cn(
            "flex items-center gap-3 rounded-lg px-3 py-2.5 text-xs transition-colors",
            TONE_SURFACE[merged ? "merged" : "neutral"],
          )}
        >
          <StatusDot state={queue.state} />
          {queue.text}
        </div>
      </div>
    </DemoWindow>
  );
}