Approval request

"use client"

import * as React from "react"
import type { ApprovalRequest as ApprovalData, Decision } from "@/lib/work"
import { ApprovalDecision, ApprovalRequest } from "@/components/approval-request"

const ago = (m: number) => new Date(Date.now() - m * 60_000).toISOString()
const ahead = (h: number) => new Date(Date.now() + h * 3_600_000).toISOString()

const initial: ApprovalData = {
  id: "ap1",
  title: "Add region to customers",
  summary: "A region column on customers, shown on the customer page and backfilled from billing country.",
  requester: { agent: { id: "a-orch", name: "Keel", role: "orchestrator" } },
  environment: "Acme web",
  production: true,
  artifactHash: "9f2c4e81b7a03d55c6e1f0a9b8d7c6e5f4a3b2c1d0e9f8a7b6c5d4e3f2a1b0c9",
  impact: {
    components: [
      { kind: "migration", name: "0142_add_customer_region", label: "Add customers.region" },
      { kind: "component", name: "web/src/customers/CustomerHeader.tsx", label: "CustomerHeader" },
      { kind: "job", name: "assign_region", label: "Assign region job" },
    ],
    rows: "unknown",
  },
  rollback: { available: true, how: "Revert the pull request and run the migration's down step; the backfilled values go with the column." },
  createdAt: ago(25),
  expiresAt: ahead(7 * 24 - 1),
  state: "pending",
}

// A change to one thing: its values before and after, decided only by the owner, shown compact as in a notification.
const roleChange: ApprovalData = {
  id: "ap2",
  title: "Change Jonas’s role",
  summary: "Jonas becomes an Admin on Acme web.",
  requester: { name: "Dana" },
  environment: "Acme web",
  production: false,
  detail: "Members",
  artifactHash: "4b1e09c2d7f35a8e6b0c1d2e3f4a5b6c7d8e9f0a1b2c3d4e5f6a7b8c9d0e1f2a",
  impact: { components: [{ kind: "member", name: "jonas", label: "Jonas" }], rows: 1 },
  rollback: { available: true, how: "Set the role back; nothing else changes." },
  createdAt: ago(5),
  expiresAt: ahead(48),
  state: "pending",
  target: { kind: "member", name: "jonas", label: "Jonas" },
  values: [{ label: "Role", from: "Member", to: "Admin" }],
  restrictedTo: { who: "the owner", reason: "It changes who can approve changes." },
}

// A change the approver may edit first: they see what they changed, and approve the edited change under its own hash.
const batchSize: ApprovalData = {
  id: "ap3",
  title: "Raise the nightly export’s batch size",
  summary: "Bigger batches so the export finishes before the morning reports run.",
  requester: { agent: { id: "a-ops", name: "Relay", role: "operator" } },
  environment: "Acme web",
  detail: "Jobs",
  production: false,
  artifactHash: "c3d9a7e1f05b2468ace0b1d2c3e4f5061728394a5b6c7d8e9f00112233445566",
  impact: { components: [{ kind: "job", name: "nightly_export", label: "Nightly export" }], rows: "unknown" },
  rollback: { available: true, how: "Set the batch size back; the next run uses it." },
  createdAt: ago(12),
  expiresAt: ahead(24),
  state: "pending",
  target: { kind: "job", name: "nightly_export", label: "Nightly export" },
  values: [{ label: "Batch size", from: "2000", to: "10000" }],
  input: { job: "nightly_export", batchSize: 10000 },
}

const limitReached: Decision = {
  id: "d1",
  question: "The backfill needs more than its limit. Raise it, or finish with what’s done?",
  facts: [
    { label: "Spent so far", value: "$1.62 of $2.00" },
    { label: "Done", value: "4,120 of 9,800 customers" },
  ],
  continues: "Showing the region on the customer page carries on; it doesn’t need the backfill.",
  choices: [
    { id: "raise", label: "Raise the limit to $4", detail: "About $1.90 more to finish." },
    { id: "finish", label: "Finish with what’s done", detail: "The rest keep an empty region." },
  ],
  recommended: "raise",
  state: "open",
}

export default function Example() {
  const [request, setRequest] = React.useState(initial)
  const [decision, setDecision] = React.useState(limitReached)
  const [role, setRole] = React.useState(roleChange)
  const [batch, setBatch] = React.useState(batchSize)
  const decide = (state: "approved" | "rejected", note?: string) => setRequest((r) => ({ ...r, state, decision: { by: "You", at: new Date().toISOString(), note } }))
  return (
    <div className="flex max-w-2xl flex-col gap-6">
      <ApprovalRequest request={request} onApprove={() => decide("approved")} onReject={(_hash, note) => decide("rejected", note)} rejectNote />
      <div className="max-w-sm">
        <ApprovalRequest
          density="compact"
          request={role}
          onApprove={() => setRole((r) => ({ ...r, state: "approved", decision: { by: "You", at: new Date().toISOString() } }))}
          onReject={() => setRole((r) => ({ ...r, state: "rejected", decision: { by: "You", at: new Date().toISOString() } }))}
          onOpen={() => {}}
        />
      </div>
      {/* Edit before approving: the edited change gets its own hash, and the record keeps the one proposed. */}
      <ApprovalRequest
        request={batch}
        onApprove={() => setBatch((r) => ({ ...r, state: "approved", decision: { by: "You", at: new Date().toISOString() } }))}
        onApproveEdited={(hash, input) =>
          setBatch((r) => ({ ...r, state: "approved", artifactHash: hash, input, values: [{ label: "Batch size", from: "2000", to: String(input.batchSize) }], decision: { by: "You", at: new Date().toISOString(), editedFrom: r.artifactHash } }))
        }
        onReject={() => setBatch((r) => ({ ...r, state: "rejected", decision: { by: "You", at: new Date().toISOString() } }))}
      />
      {/* ApprovalDecision: two equal answers, nothing pre-selected; the agent's pick is marked, not chosen. */}
      <ApprovalDecision decision={decision} onChoose={(id) => setDecision((d) => ({ ...d, state: "decided", chosen: id }))} />
    </div>
  )
}