Plan

"use client"

import * as React from "react"
import { Plan, PlanState, PlanStep } from "@/components/ui/plan"

/** Opens with the first steps already written, so the first frame shows the plan arriving. */
const START_MS = 900

/** How long a choice holds a tour before it carries on. */
const RESUME_MS = 1800

/** True until `RESUME_MS` after the last `hold()`, for tours with their own state. */
function useHold() {
  const [held, setHeld] = React.useState(false)
  const timer = React.useRef(0)
  React.useEffect(() => () => window.clearTimeout(timer.current), [])
  const hold = React.useCallback(() => {
    setHeld(true)
    window.clearTimeout(timer.current)
    timer.current = window.setTimeout(() => setHeld(false), RESUME_MS)
  }, [])
  return [held, hold] as const
}

/** The loop, in ms: the plan is written, waits for approval, then runs step by step. */
const WRITE_MS = 2100

const STEPS: PlanStep[] = [
  { id: "read", title: "Read the billing webhook handler", detail: "src/app/api/stripe/route.ts" },
  { id: "verify", title: "Verify the signature before parsing the body" },
  { id: "idempotent", title: "Make invoice.paid idempotent with the event id" },
  { id: "order", title: "Ignore events older than the stored invoice state" },
  { id: "tests", title: "Add tests for replayed and out of order events", detail: "route.test.ts" },
  { id: "log", title: "Log skipped events with their id and type" },
]

const APPROVE_AT = WRITE_MS + 1300

const RUN_AT = APPROVE_AT + 500

const STEP_MS = 750

const DONE_AT = RUN_AT + STEPS.length * STEP_MS

/** The plan as it stands `t` ms into the loop. */
function planAt(t: number): { steps: PlanStep[]; state: PlanState; current?: string } {
  if (t < WRITE_MS) {
    // Each step streams its title in, the way a model writes it.
    const per = WRITE_MS / STEPS.length
    const steps = STEPS.flatMap((step, i) => {
      const local = t - i * per
      if (local <= 0) return []
      const share = Math.min(1, local / (per * 0.85))
      const title = step.title.slice(0, Math.max(1, Math.ceil(step.title.length * share)))
      return [{ ...step, title, detail: share < 1 ? undefined : step.detail }]
    })
    return { steps, state: "drafting" }
  }
  if (t < APPROVE_AT) return { steps: STEPS, state: "awaiting-approval" }
  if (t < RUN_AT) return { steps: STEPS, state: "approved" }
  if (t < DONE_AT) {
    const index = Math.floor((t - RUN_AT) / STEP_MS)
    const steps = STEPS.map((step, i) => ({
      ...step,
      status: i < index ? ("done" as const) : i === index ? ("in-progress" as const) : ("pending" as const),
    }))
    return { steps, state: "running", current: STEPS[index]!.id }
  }
  return { steps: STEPS.map((s) => ({ ...s, status: "done" as const })), state: "done" }
}

const reducedMotion = () => window.matchMedia("(prefers-reduced-motion: reduce)").matches

const LOOP_MS = DONE_AT + 1600

const FIT_CSS = "html,body{overflow:hidden}[data-fit-small] [data-fit-hide]{display:none!important}"

/**
 * 21st shows a demo in a small frame: about 674 by 421 on a component page, 358 by 224 on a
 * phone and 245 by 139 on a profile card. A demo taller than its frame gets scrollbars, which
 * render white on dark pages. FitFrame fills the frame exactly instead.
 *
 * - "scale": the content shrinks until it fits, centered. For visuals such as orbs.
 * - "crop": the content stays at full size from the top and fades out at the bottom. For text
 *   that streams in, where a changing scale would make the page breathe.
 *
 * `minWidth` lays out a wide demo (a table, a two column panel) at that width and scales it down
 * to the frame, instead of letting it collapse to a narrow layout. The frame centers it, so it
 * shrinks evenly on both sides.
 *
 * Anything marked `data-fit-hide` (state buttons, the chatcn.dev line) drops out in frames
 * shorter than `hideBelow`, so a profile card shows the visual alone.
 */
function FitFrame({
  children,
  mode = "scale",
  hideBelow = 360,
  minWidth,
}: {
  children: React.ReactNode
  mode?: "scale" | "crop"
  hideBelow?: number
  minWidth?: string
}) {
  const content = React.useRef<HTMLDivElement>(null)
  const [cropped, setCropped] = React.useState(false)

  React.useLayoutEffect(() => {
    const el = content.current
    if (!el) return
    const measure = () => {
      const vw = window.innerWidth
      const vh = window.innerHeight
      el.toggleAttribute("data-fit-small", vh < hideBelow)
      // Layout sizes ignore the transform, so measuring never feeds back.
      const w = Math.max(el.offsetWidth, el.scrollWidth)
      const h = Math.max(el.offsetHeight, el.scrollHeight)
      const scale = mode === "scale" ? Math.min(1, vw / w, vh / h) : 1
      el.style.transform = scale < 1 ? `scale(${scale})` : ""
      setCropped(mode === "crop" && h > vh + 1)
    }
    measure()
    const observer = new ResizeObserver(measure)
    observer.observe(el)
    // Content that changes inside a fixed width box (a headline that cycles words) never resizes
    // the box itself, so changes below it measure again on the next frame.
    let frame = 0
    const mutations = new MutationObserver(() => {
      cancelAnimationFrame(frame)
      frame = requestAnimationFrame(measure)
    })
    mutations.observe(el, { subtree: true, childList: true, characterData: true })
    window.addEventListener("resize", measure)
    return () => {
      observer.disconnect()
      mutations.disconnect()
      cancelAnimationFrame(frame)
      window.removeEventListener("resize", measure)
    }
  }, [mode, hideBelow])

  const fade = "linear-gradient(to bottom, #000 calc(100% - 40px), transparent)"
  return (
    <div
      className="flex w-full justify-center overflow-hidden"
      style={{
        height: "100dvh",
        alignItems: mode === "crop" ? "flex-start" : "center",
        maskImage: cropped ? fade : undefined,
        WebkitMaskImage: cropped ? fade : undefined,
      }}
    >
      <style>{FIT_CSS}</style>
      <div
        ref={content}
        className="w-full shrink-0"
        style={{ transformOrigin: mode === "crop" ? "top center" : "center", minWidth }}
      >
        {children}
      </div>
    </div>
  )
}

/** The line under each 21st demo that points back to the kit. */
function MoreOn({ slug, children }: { slug: string; children: React.ReactNode }) {
  return (
    <p data-fit-hide className="text-[0.75rem]/[1rem] text-(color:--chatcn-fg-faint) text-center text-balance">
      {children}{" "}
      <a
        href={`https://chatcn.dev/docs/components/${slug}`}
        target="_blank"
        rel="noopener"
        className="text-(color:--chatcn-fg-subtle) hover:text-(color:--chatcn-fg) underline underline-offset-2"
      >
        chatcn.dev
      </a>
    </p>
  )
}

/**
 * An agent drafts a plan to harden a Stripe webhook: the steps stream in, the plan waits for
 * approval, then runs one step at a time until every step is done. Loops. Approve, reject or
 * edit it yourself and the tour waits on your choice for a moment.
 */
export default function PlanPreview() {
  const [clock, setClock] = React.useState(START_MS)
  const [held, hold] = useHold()
  const [mine, setMine] = React.useState<ReturnType<typeof planAt> | null>(null)

  React.useEffect(() => {
    if (reducedMotion()) {
      setClock(WRITE_MS)
      return
    }
    if (held) return
    setMine(null)
    const began = performance.now() - clock
    const id = window.setInterval(() => setClock((performance.now() - began) % LOOP_MS), 50)
    return () => window.clearInterval(id)
    // biome-ignore lint/correctness/useExhaustiveDependencies: resumes from the clock it held at.
  }, [held])

  const tour = planAt(clock)
  const plan = held && mine ? mine : tour
  const take = (next: Partial<ReturnType<typeof planAt>>) => {
    hold()
    setMine({ ...plan, ...next })
  }

  return (
    <FitFrame minWidth="36rem">
      <div className="flex w-full flex-col items-center justify-center gap-4 p-6">
        <div className="h-[23.5rem] w-full max-w-xl">
          <Plan
            className="w-full"
            title="Harden the Stripe webhook"
            description="Replayed events can mark an invoice paid twice. Six steps, all in one file and its tests."
            steps={plan.steps}
            state={plan.state}
            currentStepId={plan.current}
            onApprove={() => take({ state: "approved" })}
            onReject={() => take({ state: "rejected" })}
            onStepsChange={(steps) => take({ steps })}
            onEditingChange={() => hold()}
          />
        </div>
        <MoreOn slug="plan">Draft, approve, edit and run an agent's plan. On</MoreOn>
      </div>
    </FitFrame>
  )
}