// Inline transcript card asking the operator to confirm or deny one or more
// write tool calls the model has proposed. Renders below the assistant
// message that emitted them; the auto-loop is paused until the user picks.

import { ShieldAlert } from "lucide-react"

import type { ToolCall } from "@crema/llm-ui"
import { formatToolCallArgs } from "~/lib/admin-tools"

import { Button } from "~/components/ui/button"

export function ConfirmCard({
  calls,
  onConfirm,
  onDeny,
  busy,
}: {
  calls: ToolCall[]
  onConfirm: () => void
  onDeny: () => void
  busy?: boolean
}) {
  return (
    <div className="self-start max-w-[80ch] rounded-2xl border border-amber-400/40 bg-amber-50 px-4 py-3 text-sm shadow-sm dark:border-amber-300/40 dark:bg-amber-950/30">
      <div className="mb-2 flex items-center gap-2 font-medium text-amber-900 dark:text-amber-200">
        <ShieldAlert className="size-4" />
        Confirm write{calls.length > 1 ? "s" : ""}
      </div>
      <ul className="mb-3 list-disc pl-5 text-amber-900/90 dark:text-amber-100/90">
        {calls.map((c) => (
          <li key={c.id} className="font-mono text-[12px]">
            {c.name}({formatToolCallArgs(c)})
          </li>
        ))}
      </ul>
      <div className="flex items-center gap-2">
        <Button size="sm" onClick={onConfirm} disabled={busy} data-action="confirm-tool-call">
          Confirm
        </Button>
        <Button
          size="sm"
          variant="outline"
          onClick={onDeny}
          disabled={busy}
          data-action="deny-tool-call"
        >
          Deny
        </Button>
      </div>
    </div>
  )
}