import { expect, test } from "@playwright/test";
import path from "node:path";

const basicBlend = path.resolve(import.meta.dirname, "../../../tests/files/web/basic_scene.blend");

for (const offscreen of [false, true]) {
  test(`M7-15 ${offscreen ? "Offscreen" : "main-thread"} viewport uses the shared camera and selection contract`, async ({ page }) => {
    await page.setViewportSize({ width: 1280, height: 720 });
    await page.goto(offscreen ? "/?offscreen=1" : "/");
    await page.setInputFiles("[data-testid=blend-file-input]", basicBlend);
    await expect(page.getByText("BasicCube", { exact: true })).toBeVisible({ timeout: 20_000 });
    const canvas = page.locator("canvas.viewport-canvas");
    await expect(canvas).toHaveAttribute("data-renderer-backend", offscreen ? "offscreen-worker" : "webgl-pbr");
    if (offscreen) await expect.poll(async () => Number(await canvas.getAttribute("data-renderer-pixels") ?? "0"), { timeout: 20_000 }).toBeGreaterThan(0);

    const initial = await canvas.evaluate((element) => ({
      position: element.getAttribute("data-camera-position"),
      target: element.getAttribute("data-camera-target"),
      yaw: element.getAttribute("data-camera-yaw"),
      pitch: element.getAttribute("data-camera-pitch"),
      distance: element.getAttribute("data-camera-distance"),
    }));
    expect(initial.position).toBe("4.219781,-4.219781,3.658811");
    expect(initial.target).toBe("0,0,0");
    expect(initial.yaw).toBe("-0.785398");
    expect(initial.pitch).toBe("0.550000");
    expect(initial.distance).toBe("7.000000");

    await canvas.evaluate((element, useOffscreen) => {
      const bounds = element.getBoundingClientRect();
      const x = bounds.left + bounds.width / 2;
      const y = bounds.top + bounds.height / 2;
      element.dispatchEvent(new MouseEvent("click", { bubbles: true, clientX: x, clientY: y }));
      if (useOffscreen) {
        element.dispatchEvent(new PointerEvent("pointerdown", { bubbles: true, clientX: x, clientY: y, pointerId: 11, buttons: 1 }));
        element.dispatchEvent(new PointerEvent("pointerup", { bubbles: true, clientX: x, clientY: y, pointerId: 11, buttons: 0 }));
      }
    }, offscreen);
    await expect(page.locator(".blender-app")).toHaveAttribute("data-selected-object-ids", /.+/);

    await canvas.evaluate((element) => element.dispatchEvent(new WheelEvent("wheel", { bubbles: true, cancelable: true, deltaY: 120 })));
    await expect.poll(async () => await canvas.getAttribute("data-camera-distance"), { timeout: 5_000 }).not.toBe(initial.distance);
    const zoomed = await canvas.getAttribute("data-camera-distance");
    expect(Number(zoomed)).toBeCloseTo(7 * Math.exp(0.12), 4);
  });
}

test("M7-15 main and Offscreen camera state stays identical for the same orbit input", async ({ browser }) => {
  const states: Array<Record<string, string | null>> = [];
  for (const offscreen of [false, true]) {
    const page = await browser.newPage({ viewport: { width: 1280, height: 720 } });
    await page.goto(offscreen ? "/?offscreen=1" : "/");
    const canvas = page.locator("canvas.viewport-canvas");
    if (offscreen) await expect.poll(async () => Number(await canvas.getAttribute("data-renderer-pixels") ?? "0"), { timeout: 20_000 }).toBeGreaterThan(0);
    await canvas.evaluate((element) => element.dispatchEvent(new WheelEvent("wheel", { bubbles: true, cancelable: true, deltaY: -80 })));
    await expect.poll(async () => await canvas.getAttribute("data-camera-distance"), { timeout: 5_000 }).not.toBe("7.000000");
    states.push(await canvas.evaluate((element) => ({ position: element.getAttribute("data-camera-position"), target: element.getAttribute("data-camera-target"), yaw: element.getAttribute("data-camera-yaw"), pitch: element.getAttribute("data-camera-pitch"), distance: element.getAttribute("data-camera-distance") })));
    await page.close();
  }
  expect(states[0]).toEqual(states[1]);
});