import { test, expect } from "bun:test";
import { readFileSync } from "node:fs";
import { renderComponent, mountHtml } from "../../test/src/index.ts";
const source = readFileSync(new URL("../components/FlowCanvas.wrn", import.meta.url), "utf8");
test("canvas renders branch edges, saved positions and escaped node labels", async () => {
  const nodes = [
    {
      id: "branch",
      label: "<script>Condition</script>",
      x: 40,
      y: 60,
      ports: [{ key: "yes", label: "Match", target: "end" }],
    },
    { id: "end", label: "Finish", x: 340, y: 100, ports: [] },
  ];
  const html = await renderComponent(source, { nodes });
  const dom = mountHtml(html);
  const root = dom.querySelector('[data-ui-component="FlowCanvas"]') as HTMLElement;
  expect(root.querySelectorAll("path")).toHaveLength(1);
  expect(root.querySelector("path")?.getAttribute("d")).toBe("M 270 122 C 340 122 270 125 340 125");
  expect(root.querySelector(".wrn-flow-node")?.getAttribute("style")).toContain("left: 40px");
  expect(root.querySelector(".wrn-flow-node-title")?.textContent).toContain(
    "<script>Condition</script>",
  );
  expect(root.querySelector("script")).toBeNull();
  expect(nodes[0].x).toBe(40);
  const seen: any[] = [];
  for (const name of ["connect", "select", "move"])
    root.addEventListener(name, (e: any) => seen.push({ name, detail: e.detail }));
  (root.querySelector(".wrn-flow-port") as HTMLButtonElement).click();
  (root.querySelectorAll(".wrn-flow-node-title")[1] as HTMLButtonElement).click();
  expect(seen.map((e) => e.name)).toEqual(["connect", "select"]);
  const title = root.querySelectorAll(".wrn-flow-node-title")[1] as HTMLButtonElement;
  title.dispatchEvent(
    new (dom.window as { KeyboardEvent: typeof KeyboardEvent }).KeyboardEvent("keydown", {
      key: "ArrowRight",
      bubbles: true,
    }),
  );
  expect(seen.at(-1).name).toBe("move");
  expect(seen.at(-1).detail.nodes).toHaveLength(2);
});