Restore dialog

"use client"

import { Button } from "@/components/ui/button"
import { RestoreDialog, RestoreResult, type RestoreOutcome, type RestoreTarget } from "@/components/restore-dialog"

const checkpoint = { label: "Added tests for burst traffic", createdAt: new Date(Date.now() - 9 * 60_000), captured: "both" as const }

// The app restores, then compares each file with the checkpoint's snapshot and reports what it found.
async function restore(target: RestoreTarget): Promise<RestoreOutcome> {
  await new Promise((r) => setTimeout(r, 1200))
  return {
    target,
    checkedAt: new Date(),
    checks: [
      { id: "1", kind: "file", label: "src/server/limiter.ts", status: "matches" },
      { id: "2", kind: "file", label: "src/server/routes.ts", status: "differs", detail: "A formatter on save re-wrapped 3 lines after the restore." },
      { id: "3", kind: "file", label: "package-lock.json", status: "not-checked" },
      ...(target !== "code" ? [{ id: "4", label: "Conversation", area: "conversation" as const, status: "matches" as const }] : []),
    ],
  }
}

const earlier: RestoreOutcome = {
  target: "code",
  checks: [
    { id: "a", kind: "file", label: "src/server/limiter.ts", status: "matches" },
    { id: "b", kind: "file", label: "src/server/limiter.test.ts", status: "matches" },
  ],
}

export default function Example() {
  return (
    <div className="flex max-w-xl flex-col items-start gap-4">
      <RestoreDialog
        checkpoint={checkpoint}
        onRestore={restore}
        commandsRun={["npm install ioredis@5", "npm run db:migrate", "rm -rf .cache/limiter"]}
        outsideChanges={["Priya Shah edited src/config/limits.ts"]}
        externalEffects={["Pushed branch rate-limiter to origin", "Deployed a preview build"]}
        trigger={<Button variant="outline">Restore this checkpoint…</Button>}
      />
      <RestoreResult className="w-full" result={earlier} />
    </div>
  )
}