import "../src/docs/element.ts";
import { agentControls, editor, playground } from "./peers.ts";

const SWATCH =
  "data:image/svg+xml," +
  encodeURIComponent(
    `<svg xmlns="http://www.w3.org/2000/svg" width="480" height="120"><defs><linearGradient id="g"><stop offset="0" stop-color="#e5484d"/><stop offset="1" stop-color="#0090ff"/></linearGradient></defs><rect width="480" height="120" rx="12" fill="url(#g)"/></svg>`,
  );

const SAMPLE = `---
title: Field notes
---

# Field notes

Every tab on this page edits the same **Loro** doc. Remote edits, cursors and the agent's writes all arrive over a \`BroadcastChannel\`.

## Things to try

- Type in both editors at once
- Move the cursor onto a line to see its *raw Markdown*
- [ ] Let the agent read, type here, then let it write
- [x] Fix teh typo by hand, or let the agent do it

> Writes carry the version they were computed from, so concurrent typing survives.

\`\`\`js
doc.write(next, { base: read.version });
\`\`\`

---

![A gradient swatch](${SWATCH})

See [D16](https://tangled.org/did:plc:qgte7qw4zeutobb5h7joxoyt/core) for why Loro.
`;

const agent = playground("nib-doc:playground", SAMPLE, { Ada: editor("nib-doc", "ada"), Grace: editor("nib-doc", "grace") });

agentControls(agent, (text) => {
  const stamp = new Date().toLocaleTimeString();
  return `${text.replaceAll("teh", "the").trimEnd()}\n\n## Agent summary\n\nRewritten from the version read at ${stamp}.\n`;
});