Plan

"use client"

import * as React from "react"
import type { AgentIdentity } from "@/lib/chat"
import type { PlanStep } from "@/lib/work"
import { Plan } from "@/components/plan"
import { Button } from "@/components/ui/button"

const dev: AgentIdentity = { id: "a-dev", name: "Dev agent", role: "dev" }
const qa: AgentIdentity = { id: "a-qa", name: "QA agent", role: "qa" }

const proposed: PlanStep[] = [
  { id: "s1", title: "Add the region column", summary: "us, eu, apac, other; nullable; indexed.", status: "idle", agent: dev, touches: [{ kind: "migration", name: "0142_add_customer_region" }, { kind: "column", name: "customers.region", label: "region" }] },
  { id: "s2", title: "Show it on the customer page", status: "idle", agent: dev, dependsOn: ["s1"], touches: [{ kind: "component", name: "web/src/customers/CustomerHeader.tsx", label: "CustomerHeader" }] },
  { id: "s3", title: "Backfill from billing country", status: "idle", agent: dev, dependsOn: ["s1"] },
  { id: "s4", title: "Test on Staging", status: "idle", agent: qa, dependsOn: ["s2", "s3"] },
]

// In a thread: compact, the running step's summary as its "now" line, and actions underneath.
const running: PlanStep[] = [
  { id: "r1", title: "Add the region column", status: "succeeded", agent: dev },
  { id: "r2", title: "Backfill from billing country", summary: "4,120 of 9,800 customers so far.", status: "running", agent: dev },
  { id: "r3", title: "Test on Staging", summary: "Runs the checkout suite.", status: "idle", agent: qa, dependsOn: ["r2"] },
]

// Where the run left the approved plan, from the app's own records: Candor shows drift, it never works it out.
const drifted: PlanStep[] = [
  { id: "d1", title: "Add the region column", status: "succeeded", agent: dev },
  {
    id: "d2",
    title: "Backfill from shipping country",
    status: "succeeded",
    agent: dev,
    drift: { kind: "changed", from: "Backfill from billing country", note: "212 customers had no billing country." },
  },
  { id: "d3", title: "Flag customers with no country", status: "running", agent: dev, drift: { kind: "added", note: "So someone can fill them in by hand." } },
  { id: "d4", title: "Show it on the customer page", status: "skipped", agent: dev, drift: { kind: "skipped", note: "Waiting on design." } },
  { id: "d5", title: "Test on Staging", status: "idle", agent: qa },
]

export default function Example() {
  const [mode, setMode] = React.useState<"proposed" | "accepted" | "sent-back">("proposed")
  const [steps, setSteps] = React.useState(proposed)
  const [paused, setPaused] = React.useState(false)
  const [granted, setGranted] = React.useState<string>()
  return (
    <div className="flex max-w-xl flex-col gap-6">
      <Plan
        title="Add region to customers"
        steps={steps}
        mode={mode}
        autonomy={[{ id: "askBeforeEdits" }, { id: "runWithoutAsking" }]}
        onAccept={(skipped, autonomy) => {
          setGranted(autonomy)
          setSteps((s) => s.map((x, i) => (skipped.includes(x.id) ? { ...x, status: "skipped" } : i === 0 ? { ...x, status: "running" } : x)))
          setMode("accepted")
        }}
        onRevise={() => setMode("sent-back")}
      />
      {granted && <p className="-mt-4 text-xs text-muted-foreground">onAccept got autonomy: {granted}</p>}
      <Plan title="Add region to customers (running)" steps={drifted} mode="accepted" />
      <Plan
        density="compact"
        title="Backfill customer regions"
        steps={running}
        mode="accepted"
        actions={
          <>
            <Button variant="ghost" size="sm" onClick={() => setPaused((p) => !p)}>
              {paused ? "Resume" : "Pause"}
            </Button>
            <Button variant="outline" size="sm">
              Stop and keep what’s done
            </Button>
          </>
        }
      />
    </div>
  )
}