const { chromium } = require("C:/Users/ramez/AppData/Roaming/npm/node_modules/playwright");

(async () => {
  console.log("Simulating HTML5 drag & drop event with relative canvas bounds...");
  const browser = await chromium.launch({ headless: true });
  const page = await browser.newPage({ viewport: { width: 1440, height: 900 } });

  await page.goto("http://localhost:3001", { waitUntil: "networkidle" });
  await page.waitForTimeout(1000);

  // Dispatch drop event on React Flow pane
  await page.evaluate(() => {
    const canvasPane = document.querySelector(".react-flow__pane");
    if (!canvasPane) return;

    const rect = canvasPane.getBoundingClientRect();

    const dataTransfer = new DataTransfer();
    dataTransfer.setData("application/entropyk-type", "ModuleInstance:BaseChiller");
    dataTransfer.setData("application/entropyk-ports", JSON.stringify(["chw_in", "chw_out", "cond_water_in", "cond_water_out"]));

    const dropEvent = new DragEvent("drop", {
      bubbles: true,
      cancelable: true,
      clientX: rect.left + 300,
      clientY: rect.top + 200,
      dataTransfer,
    });

    canvasPane.dispatchEvent(dropEvent);
  });

  await page.waitForTimeout(1000);

  // Screenshot Mode 1: Dymola Icon View
  await page.screenshot({ path: "C:/Users/ramez/.gemini/antigravity-ide/brain/e16f5552-47ce-4483-9b25-8266bb395491/dymola_mode_1_icon.png" });

  // Click Mode Schéma button in header
  const schemaBtn = page.locator("button:has-text('Mode Schéma')").first();
  if (await schemaBtn.isVisible()) {
    console.log("Clicking Mode Schéma button...");
    await schemaBtn.click();
    await page.waitForTimeout(800);
  }

  // Screenshot Mode 2: In-Place Diagram View
  await page.screenshot({ path: "C:/Users/ramez/.gemini/antigravity-ide/brain/e16f5552-47ce-4483-9b25-8266bb395491/dymola_mode_2_diagram.png" });

  console.log("Both Dymola modes captured successfully!");
  await browser.close();
})();