Decision bar

"use client"

import * as React from "react"
import { Bot, Inbox, MessagesSquare, Settings } from "lucide-react"
import { AppLayout } from "@/components/candor/app-layout"
import { DecisionBar } from "@/components/candor/decision-bar"
import { TabBar } from "@/components/candor/tab-bar"

const reports = [
  { id: "r12", title: "Weekly report 12", summary: "The agent drafted the weekly report from 14 runs. Two charts were redrawn after the data refresh." },
  { id: "r13", title: "Weekly report 13", summary: "The agent drafted the weekly report from 9 runs. One section is shorter than usual: 3 runs failed." },
  { id: "q4", title: "Question 4 from the research agent", summary: "Should the summary include last quarter's figures, or only this quarter's?" },
]

// On a phone, the decision for the item on screen sits above the tab bar; Next moves to another item, and the bar
// locks its actions for half a second as the title changes, so a tap meant for the last item can't land on this one.
export default function Example() {
  const [at, setAt] = React.useState(0)
  const [done, setDone] = React.useState<string | null>(null)
  const item = reports[at]!
  return (
    <div className="flex flex-col gap-2">
      <div className="h-[460px] w-[360px] max-w-full overflow-hidden rounded-lg border">
        <AppLayout
          // A phone-sized preview: the tab bar shows below 640 px, so the bar sits above it.
          defaultWidth={360}
          sidebar={<nav aria-label="Places" className="p-3 text-sm">Places</nav>}
          tabBar={
            <TabBar
              destinations={[
                { id: "threads", label: "Threads", icon: MessagesSquare },
                { id: "inbox", label: "Inbox", icon: Inbox, badge: reports.length },
                { id: "agents", label: "Agents", icon: Bot },
                { id: "settings", label: "Settings", icon: Settings },
              ]}
              activeId="inbox"
            />
          }
          bottomBar={
            <DecisionBar
              itemId={item.id}
              title={item.title}
              actions={
                item.id === "q4"
                  ? [{ id: "answer", label: "Answer", locked: "Answer it in the thread: it needs your words." }]
                  : [
                      { id: "accept", label: "Accept" },
                      { id: "return", label: "Send back" },
                      { id: "discard", label: "Discard", destructive: true, undoable: "The draft can be restored for 30 days; the runs it used aren't undone." },
                    ]
              }
              onAction={(action, itemId) => setDone(`${action} on ${itemId}`)}
            />
          }
        >
          <article className="flex flex-col gap-2 overflow-y-auto p-4 text-sm">
            <h3 className="font-semibold">{item.title}</h3>
            <p>{item.summary}</p>
            <button type="button" className="self-start rounded-md border px-2 py-1 text-xs" onClick={() => setAt((at + 1) % reports.length)}>
              Next item
            </button>
          </article>
        </AppLayout>
      </div>
      <p className="text-xs text-muted-foreground" aria-live="polite">
        {done ? `Last decision: ${done}` : "No decision yet."}
      </p>
    </div>
  )
}