import { defineConfig } from "@playwright/test";

const matrices = [
  ["compact-dark-100", 1120, 720, "dark", 1, false],
  ["desktop-light-125", 1440, 900, "light", 1.25, false],
  ["wide-dark-150", 1920, 1080, "dark", 1.5, false],
  ["compact-light-reduced", 1120, 720, "light", 1, true],
  ["desktop-dark-reduced", 1440, 900, "dark", 1.25, true],
  ["wide-light-100", 1920, 1080, "light", 1, false],
];

export default defineConfig({
  testDir: "./tests/browser",
  outputDir: "artifacts/browser",
  timeout: 45_000,
  expect: { timeout: 7_000 },
  fullyParallel: false,
  workers: process.env.CI ? 2 : 3,
  reporter: [["line"], ["html", { outputFolder: "artifacts/browser-report", open: "never" }]],
  use: {
    baseURL: "http://127.0.0.1:41737",
    screenshot: "only-on-failure",
    trace: "retain-on-failure",
    video: "retain-on-failure",
  },
  webServer: {
    command: "node scripts/serve-demo.mjs",
    url: "http://127.0.0.1:41737/__forgeflow_test_ready__",
    reuseExistingServer: !process.env.CI,
    timeout: 30_000,
  },
  projects: matrices.map(([name, width, height, theme, scale, reduced]) => ({
    name,
    metadata: { theme, scale, reduced },
    use: {
      viewport: { width, height },
      deviceScaleFactor: scale,
      colorScheme: theme,
      reducedMotion: reduced ? "reduce" : "no-preference",
    },
  })),
});