import { DataTable } from "@/components/tool-ui/data-table";

// AI flagged these expenses as anomalies. User decides before processing.
<DataTable
  id="flagged-expenses"
  rowIdKey="id"
  columns={[
    { key: "merchant", label: "Merchant", priority: "primary" },
    {
      key: "amount",
      label: "Amount",
      align: "right",
      format: { kind: "currency", currency: "USD" },
    },
    {
      key: "flag",
      label: "Flag",
      format: {
        kind: "status",
        statusMap: {
          duplicate: { tone: "warning", label: "Possible duplicate" },
          policy: { tone: "danger", label: "Over policy limit" },
          missing: { tone: "info", label: "Missing receipt" },
        },
      },
    },
  ]}
  data={[
    { id: "1", merchant: "Delta Airlines", amount: 847.00, flag: "duplicate" },
    { id: "2", merchant: "The Capital Grille", amount: 312.50, flag: "policy" },
    { id: "3", merchant: "Uber", amount: 45.20, flag: "missing" },
  ]}
  responseActions={{
    items: [
      { id: "reject", label: "Reject All", variant: "destructive", confirmLabel: "Confirm" },
      { id: "approve", label: "Approve All", variant: "default", confirmLabel: "Confirm" },
    ],
    align: "right",
  }}
  onResponseAction={(id) => {
    if (id === "approve") submitExpenses();
    if (id === "reject") returnToSubmitter();
  }}
/>

import { Image } from "@/components/tool-ui/image";

// AI generated this image. User approves before publishing.
<Image
  id="generated-hero"
  assetId="gen-img-7f3a"
  src="https://images.unsplash.com/photo-1620712943543-bcc4688e7485"
  alt="Abstract visualization of neural networks with glowing nodes"
  title="Generated: AI Infrastructure"
  description="Style: technical illustration. Prompt: 'neural network visualization...'"
  ratio="16:9"
  maxWidth="420px"
  responseActions={[
    { id: "regenerate", label: "Try Again", variant: "secondary" },
    { id: "edit", label: "Edit Prompt", variant: "outline" },
    { id: "use", label: "Use This", variant: "default" },
  ]}
  onResponseAction={(id) => {
    if (id === "use") attachToPost(assetId);
    if (id === "regenerate") generateNewImage();
    if (id === "edit") openPromptEditor();
  }}
/>

import { XPost } from "@/components/tool-ui/x-post";

// AI drafted this post. User approves before it goes live.
<XPost
  post={{
    id: "draft-post-1",
    author: {
      name: "Acme Dev",
      handle: "acme_dev",
      avatarUrl: "https://api.dicebear.com/7.x/shapes/svg?seed=acme",
      verified: true,
    },
    text: "We just hit 10,000 stars on GitHub! Huge thanks to everyone...",
  }}
  responseActions={[
    { id: "edit", label: "Edit", variant: "secondary" },
    { id: "schedule", label: "Schedule", variant: "outline" },
    { id: "post", label: "Post Now", variant: "default", confirmLabel: "Confirm" },
  ]}
  onResponseAction={(id) => {
    if (id === "post") publishImmediately();
    if (id === "schedule") openScheduler();
    if (id === "edit") openEditor();
  }}
/>

// Tool output (serializable)
const toolOutput = {
  responseActions: [
    { id: "open", label: "Open", variant: "default" },
    { id: "save", label: "Save", variant: "secondary" },
  ],
};

// Runtime rendering (can add icons, handlers)
<LinkPreview
  {...toolOutput}
  onResponseAction={(id) => {
    if (id === "open") window.open(url, "_blank");
    if (id === "save") saveToLibrary(url);
  }}
/>;

// Visual order: Cancel | Preview | Deploy
responseActions={[
  { id: "cancel", label: "Cancel", variant: "ghost" },
  { id: "preview", label: "Preview", variant: "secondary" },
  { id: "deploy", label: "Deploy", variant: "default" },
]}

// Array form
responseActions={[
  { id: "approve", label: "Approve", variant: "default" },
  { id: "reject", label: "Reject", variant: "destructive", confirmLabel: "Confirm" },
]}

// Config form with alignment
responseActions={{
  items: [
    { id: "export", label: "Export", variant: "secondary" },
    { id: "sync", label: "Sync", variant: "default", confirmLabel: "Confirm" },
  ],
  align: "right",      // default "right"
  confirmTimeout: 3000 // default 3000ms
}}