// End-to-end mesh test with real Chromium (WebRTC needs real UDP; the embedded
// preview browser can't do it). Requires `go run ../server --dev` on :8080 and
// `npm run dev` on :5173. Run: node e2e/mesh.e2e.mjs
import { chromium } from "playwright";
import { deflateSync } from "node:zlib";

const BASE = process.env.BASE_URL ?? "http://localhost:5173";
const HEADED = !!process.env.HEADED;

// minimal valid 64x64 red PNG for the image-share test
function tinyPNG() {
  const S = 64;
  const crcT = [...Array(256)].map((_, n) => {
    let c = n;
    for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
    return c >>> 0;
  });
  const crc = (b) => {
    let c = 0xffffffff;
    for (const x of b) c = crcT[(c ^ x) & 0xff] ^ (c >>> 8);
    return (c ^ 0xffffffff) >>> 0;
  };
  const chunk = (t, d) => {
    const len = Buffer.alloc(4);
    len.writeUInt32BE(d.length);
    const td = Buffer.concat([Buffer.from(t), d]);
    const cc = Buffer.alloc(4);
    cc.writeUInt32BE(crc(td));
    return Buffer.concat([len, td, cc]);
  };
  const ihdr = Buffer.alloc(13);
  ihdr.writeUInt32BE(S, 0);
  ihdr.writeUInt32BE(S, 4);
  ihdr[8] = 8;
  ihdr[9] = 2; // RGB
  const raw = Buffer.alloc(S * (S * 3 + 1));
  for (let y = 0; y < S; y++) {
    raw[y * (S * 3 + 1)] = 0;
    for (let x = 0; x < S; x++) raw.writeUIntBE(0xcc3344, y * (S * 3 + 1) + 1 + x * 3, 3);
  }
  return Buffer.concat([
    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
    chunk("IHDR", ihdr),
    chunk("IDAT", deflateSync(raw)),
    chunk("IEND", Buffer.alloc(0)),
  ]);
}

const fail = (msg) => {
  console.error("❌ " + msg);
  process.exit(1);
};
const ok = (msg) => console.log("✅ " + msg);

const browser = await chromium.launch({
  headless: !HEADED,
  args: [
    "--disable-features=WebRtcHideLocalIpsWithMdns", // real host IPs → loopback works
    "--autoplay-policy=no-user-gesture-required",
  ],
});

async function openPeer(name, url) {
  const ctx = await browser.newContext({ permissions: [] });
  const page = await ctx.newPage();
  page.on("pageerror", (e) => console.log(`[${name}] pageerror:`, e.message));
  await page.goto(url);
  await page.fill("#name-in", name);
  await page.click("#name-ok");
  return page;
}

const secret = "E2eTestRoom" + Math.random().toString(36).slice(2, 10).padEnd(32, "x");
// use a proper 43-char fragment by letting the app generate one instead:
const first = await (async () => {
  const ctx = await browser.newContext();
  const page = await ctx.newPage();
  await page.goto(BASE);
  await page.click("#new-room"); // lobby → start a new room (label prompt auto-dismissed)
  await page.waitForFunction(() => location.hash.length > 40);
  const url = await page.evaluate(() => location.href);
  await page.fill("#name-in", "alice");
  await page.click("#name-ok");
  return { page, url };
})();

const alice = first.page;
const roomURL = first.url;
console.log("room:", roomURL);

const bob = await openPeer("bob", roomURL);

// 1. mesh forms
for (const [who, page] of [["alice", alice], ["bob", bob]]) {
  await page
    .waitForFunction(() => window.__sueta?.mesh?.debugState().some((p) => p.dc === "open"), { timeout: 20000 })
    .catch(() => fail(`${who}: datachannel never opened`));
}
ok("2-peer datachannel open");

// 2. text alice → bob
await alice.fill("#input", "hello bob, e2e over webrtc");
await alice.click("#send-btn");
await bob
  .waitForFunction(() => [...document.querySelectorAll(".msg-bubble")].some((b) => b.textContent.includes("hello bob")), { timeout: 5000 })
  .catch(() => fail("bob never received alice's message"));
ok("text message delivered");

// 3. third peer → 3-way mesh
const carol = await openPeer("carol", roomURL);
await carol
  .waitForFunction(() => window.__sueta?.mesh?.debugState().filter((p) => p.dc === "open").length === 2, { timeout: 20000 })
  .catch(() => fail("carol didn't form 2 channels"));
await alice.waitForFunction(() => window.__sueta?.mesh?.debugState().filter((p) => p.dc === "open").length === 2, { timeout: 10000 });
ok("3-way mesh formed");

// 4. carol sends; both alice and bob receive
await carol.fill("#input", "carol joined the mesh");
await carol.click("#send-btn");
for (const [who, page] of [["alice", alice], ["bob", bob]]) {
  await page
    .waitForFunction(() => [...document.querySelectorAll(".msg-bubble")].some((b) => b.textContent.includes("carol joined")), { timeout: 5000 })
    .catch(() => fail(`${who} missed carol's message`));
}
ok("broadcast to full mesh works");

// 4b. identity: bob must render alice's exact fingerprint next to her message
const aliceFp = await alice.evaluate(() => window.__sueta.identity?.fp.emoji);
if (aliceFp) {
  await bob
    .waitForFunction(
      (fp) =>
        [...document.querySelectorAll(".msg")].some(
          (m) => m.textContent.includes("hello bob") && m.querySelector(".msg-id")?.textContent.startsWith(fp),
        ),
      aliceFp,
      { timeout: 8000 },
    )
    .catch(() => fail("bob doesn't show alice's identity fingerprint"));
  ok(`identity fingerprints propagate & verify (alice = ${aliceFp})`);
} else {
  console.log("(identity unsupported in this browser — skipped)");
}

// 5. reaction: bob reacts to alice's message (hover bar is desktop path; use store API-equivalent via chip UI)
const msgId = await bob.evaluate(() => {
  const bubbles = [...document.querySelectorAll(".msg")];
  return bubbles.length; // sanity
});
await bob.hover(".msg:nth-of-type(2)"); // alice's "hello bob" message (after hello ordering may vary)
// react via the first hover button on the message containing the text
await bob.evaluate(() => {
  const msg = [...document.querySelectorAll(".msg")].find((m) => m.textContent.includes("hello bob"));
  msg.querySelector(".hb").click();
});
await alice
  .waitForFunction(() => [...document.querySelectorAll(".chip")].some((c) => c.textContent.includes("👍 1")), { timeout: 5000 })
  .catch(() => fail("alice never saw bob's reaction"));
ok("reactions propagate");

// 6. thread: alice replies in a thread on her own message; bob sees reply count
await alice.evaluate(() => {
  const msg = [...document.querySelectorAll(".msg")].find((m) => m.textContent.includes("hello bob"));
  [...msg.querySelectorAll(".hb")].at(-1).click(); // 💬 open thread
});
await alice.fill("#thread-input", "replying to myself in a thread");
await alice.click("#thread-send-btn");
await bob
  .waitForFunction(() => [...document.querySelectorAll(".thread-btn")].some((b) => b.textContent.includes("1 reply")), { timeout: 5000 })
  .catch(() => fail("bob never saw the thread reply count"));
ok("threads propagate");
await alice.click("#thread-close");

// 7. image share via file input
await bob.setInputFiles("#file-in", { name: "photo.png", mimeType: "image/png", buffer: tinyPNG() });
await alice
  .waitForFunction(() => [...document.querySelectorAll(".img-box img")].length >= 1, { timeout: 15000 })
  .catch(() => fail("alice never received bob's image"));
await carol.waitForFunction(() => [...document.querySelectorAll(".img-box img")].length >= 1, { timeout: 15000 });
ok("image transfer (re-encoded, chunked, encrypted) works");

// 8. blind relay proof: watch a fresh join's WS frames for plaintext
const spy = await browser.newContext();
const spyPage = await spy.newPage();
const frames = [];
spyPage.on("websocket", (ws) => {
  ws.on("framesent", (f) => frames.push(String(f.payload)));
  ws.on("framereceived", (f) => frames.push(String(f.payload)));
});
await spyPage.goto(roomURL);
await spyPage.fill("#name-in", "eve-observer");
await spyPage.click("#name-ok");
await spyPage.waitForFunction(() => window.__sueta?.mesh?.debugState().some((p) => p.dc === "open"), { timeout: 20000 });
await spyPage.fill("#input", "SECRET-CANARY-9000");
await spyPage.click("#send-btn");
await spyPage.waitForTimeout(1000);
const leaked = frames.filter((f) => /sdp|candidate:|SECRET-CANARY|eve-observer/i.test(f) && !/"payload"/.test(f));
const anyPlain = frames.some((f) => /v=0|a=ice|SECRET-CANARY|eve-observer/.test(f));
if (anyPlain) fail("PLAINTEXT LEAKED over signaling: " + frames.find((f) => /v=0|a=ice|SECRET-CANARY|eve-observer/.test(f)).slice(0, 200));
ok(`blind relay verified: ${frames.length} WS frames, zero plaintext SDP/names/messages`);

// 8b. history sync: a brand-new peer receives the room's past from members
const dave = await openPeer("dave", roomURL);
await dave.waitForFunction(() => window.__sueta?.mesh?.debugState().some((p) => p.dc === "open"), { timeout: 20000 });
await dave
  .waitForFunction(() => [...document.querySelectorAll(".msg-bubble")].some((b) => b.textContent.includes("hello bob")), { timeout: 15000 })
  .catch(() => fail("dave didn't receive history messages"));
await dave
  .waitForFunction(() => [...document.querySelectorAll(".img-box img")].length >= 1, { timeout: 25000 })
  .catch(() => fail("dave didn't receive the history image"));
const daveExtras = await dave.evaluate(() => ({
  thread: [...document.querySelectorAll(".thread-btn")].some((b) => /1 repl/.test(b.textContent)),
  chip: [...document.querySelectorAll(".chip")].some((c) => c.textContent.includes("👍 1")),
}));
if (!daveExtras.thread || !daveExtras.chip) fail("dave missing thread/reaction state from history");
ok("history sync: late joiner got text, image, threads & reactions");

// 9. signaling-down resilience: chat keeps working with WS closed
await alice.evaluate(() => window.__sueta.signaling.close());
await alice.fill("#input", "sent while signaling is down");
await alice.click("#send-btn");
await bob
  .waitForFunction(() => [...document.querySelectorAll(".msg-bubble")].some((b) => b.textContent.includes("while signaling is down")), { timeout: 5000 })
  .catch(() => fail("chat died with signaling down — it must not"));
ok("chat survives signaling outage (pure p2p)");

// 9b. device-local persistence: reload alone in a fresh room → history intact
{
  const solo = await browser.newContext().then((c) => c.newPage());
  await solo.goto(BASE);
  await solo.click("#new-room");
  await solo.waitForSelector("#name-in");
  await solo.fill("#name-in", "hermit");
  await solo.click("#name-ok");
  await solo.fill("#input", "note to future self");
  await solo.click("#send-btn");
  await solo.waitForTimeout(2200); // let the debounced IndexedDB save land
  await solo.reload();
  await solo.waitForSelector("#name-in");
  await solo.click("#name-ok");
  await solo
    .waitForFunction(
      () => [...document.querySelectorAll(".msg-bubble")].some((b) => b.textContent.includes("note to future self")),
      { timeout: 8000 },
    )
    .catch(() => fail("history did not survive a reload (device persistence)"));
  const mineStyled = await solo.evaluate(() => !!document.querySelector(".msg.mine"));
  if (!mineStyled) fail("restored own message lost its 'mine' styling");
  ok("history persists on-device across reloads (incl. authorship)");
}

// 9c. identity sheet: "save in password app" must not crash and must close the sheet
await dave.click("#peers-pill");
await dave.click(".roster-row.clickable");
await dave.waitForSelector("#id-save");
await dave.click("#id-save button[type=submit]");
await dave.waitForFunction(() => !document.querySelector("#id-save"), { timeout: 5000 }).catch(() => fail("identity save did not complete/close"));
const savedToast = await dave.evaluate(() => [...document.querySelectorAll(".toast")].some((t) => t.textContent.includes("🗝️")));
if (!savedToast) fail("identity save gave no feedback");
ok("identity save flow completes (PasswordCredential / AutoFill heuristic)");

// 10. wrong secret lands in an empty room
const outsider = await browser.newContext().then((c) => c.newPage());
await outsider.goto(BASE + "#" + "X".repeat(43));
await outsider.fill("#name-in", "outsider");
await outsider.click("#name-ok");
await outsider.waitForTimeout(2500);
const outsiderPeers = await outsider.evaluate(() => window.__sueta.mesh.debugState().length);
if (outsiderPeers !== 0) fail("outsider with different secret saw peers!");
ok("different secret ⇒ isolated room");

console.log("\n🎉 all e2e checks passed");
await browser.close();
process.exit(0);