import { chromium } from "playwright";
const b = await chromium.launch({
  headless: true,
  args: ["--host-resolver-rules=MAP canvas.flow-master.ai 65.21.71.186", "--ignore-certificate-errors"],
});
const ctx = await b.newContext({ viewport: { width: 1440, height: 900 } });
const p = await ctx.newPage();
await p.goto("https://canvas.flow-master.ai/", { waitUntil: "domcontentloaded" });
await p.waitForLoadState("networkidle");
await p.waitForTimeout(2000);

// Read the data-theme attribute repeatedly
console.log("docElement.dataset.theme:", await p.evaluate(() => document.documentElement.dataset.theme));
console.log("docElement attributes:", await p.evaluate(() => document.documentElement.getAttributeNames().join(",")));
console.log("html outerHTML head:", await p.evaluate(() => document.documentElement.outerHTML.slice(0, 200)));
console.log("computed --bp-paper:", await p.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue("--bp-paper")));

// Try setting dark via JS and reading
await p.evaluate(() => {
  document.documentElement.setAttribute("data-theme", "dark");
});
await p.waitForTimeout(500);
console.log("\nafter setAttribute('data-theme','dark'):");
console.log("dataset.theme:", await p.evaluate(() => document.documentElement.dataset.theme));
console.log("--bp-paper:", await p.evaluate(() => getComputedStyle(document.documentElement).getPropertyValue("--bp-paper")));
console.log("body bg:", await p.evaluate(() => getComputedStyle(document.body).backgroundColor));

await b.close();