// Demo: the assistant dock driven by a mock transport. No network — the
// mock returns a canned reply with a rich table block so the card/table/
// tile/chart rendering (via @crema/agent-ui) is visible. Also the design-
// review surface for the dock.

import { AgentDock, type AgentDockTransport } from "../src"

const mockTransport: AgentDockTransport = {
  async chat(_agentId, req) {
    await new Promise((r) => setTimeout(r, 700))
    return {
      conversation_id: "demo-conversation",
      message:
        `You asked: **${req.user_message}**\n\n` +
        "Here's a rich block rendered inline:\n\n" +
        '```table { "id": "cities", "columns": [{"key":"city","label":"City"},{"key":"time","label":"Local time"}], "rows": [{"city":"Sydney","time":"09:00"},{"city":"London","time":"23:00"}] }\n```\n\n' +
        "Buttons inside cards/tiles send their value as your next message.",
    }
  },
}

export default function AgentDockDemo() {
  return (
    <div className="p-8">
      <h1 className="text-xl font-semibold">Assistant Dock</h1>
      <p className="mt-2 text-sm text-[var(--muted-foreground)]">
        The Sparkles button is fixed bottom-right. Open it and send a
        message — the mock transport replies with a rich table block.
      </p>
      <AgentDock
        transport={mockTransport}
        resolveAgents={async () => [{ id: "demo", name: "Demo Assistant" }]}
        getPageContext={() => ({ route: "/demo/agent-dock" })}
        onExpand={() => alert("onExpand — the host app decides what this does")}
      />
    </div>
  )
}