// tdd-guard:skip — Playwright Component Testing config; not a Vitest test file.
//
// P8.2d (KAR-987 §24 "E2E") — Browser-echte Editor-Tests via Playwright
// Component Testing. STRICTLY SEPARATE from the existing `playwright.config.ts`
// (classical E2E scaffold, untouched by this PR — see its own header comment
// for why it stays fixme/unwired) and from `vitest.config.ts` (this file is
// intentionally NOT in that config's include globs, and `testDir` below never
// overlaps with any vitest test glob).
//
// Why Component Testing instead of the existing E2E scaffold (Kais-Go Option 1,
// TG 9196/9198, see builder report): `e2e/` needs a running app + a seeded DB
// (`POST /api/admin/demo` writes into whatever DB `.env.local` points at —
// forbidden to touch in this workstream). CT mounts the editor DIRECTLY in a
// real Chromium tab via a tiny Vite dev server that serves ONLY the mounted
// component tree — no Next.js server, no middleware, no Supabase network call
// ever leaves the process (see e2e-ct/fixtures/vsm-fixtures.ts's own doc
// comment on why that is safe even though VsmEditor imports
// `@/lib/supabase/client`).
//
import { defineConfig, devices } from '@playwright/experimental-ct-react'
import path from 'node:path'
import { fileURLToPath } from 'node:url'
import tailwindcss from '@tailwindcss/vite'
import react from '@vitejs/plugin-react'

// package.json has "type": "module" — this file has no CJS __dirname.
const __dirname = path.dirname(fileURLToPath(import.meta.url))

export default defineConfig({
  testDir: './e2e-ct',
  // Playwright's default spec glob (**/*.{spec,test}.{ts,tsx}) already
  // excludes e2e-ct/playwright/ and e2e-ct/{fixtures,stubs,helpers}/ (none of
  // those files match *.spec.tsx) — no separate exclude needed.
  timeout: 30_000,
  retries: 0,
  fullyParallel: true,
  forbidOnly: true,
  reporter: [
    ['list'],
    [
      'json',
      {
        outputFile:
          '/tmp/claude-1001/-home-aria/17eab26c-7394-4ec4-8beb-b0d1e36bdf65/scratchpad/p82d-ct-report.json',
      },
    ],
    [
      'html',
      {
        outputFolder:
          '/tmp/claude-1001/-home-aria/17eab26c-7394-4ec4-8beb-b0d1e36bdf65/scratchpad/p82d-ct-html-report',
        open: 'never',
      },
    ],
  ],

  use: {
    trace: 'retain-on-failure',
    screenshot: 'only-on-failure',
    // Own port, away from `playwright.config.ts`'s E2E_BASE_URL convention
    // (that config targets a running `next dev` on :3000 — this one starts
    // its OWN throwaway Vite dev server, never :3000, never a real app).
    ctPort: 3101,
    // Keeps the CT template (index.html/index.tsx, the Vite entry that pulls
    // in Tailwind's globals.css — see that file's own comment) INSIDE e2e-ct/
    // — default would be a top-level ./playwright/ dir, which would sit
    // next to (and read as confusingly similar to) the existing, untouched
    // `playwright.config.ts`/`e2e/` classical-E2E scaffold.
    ctTemplateDir: 'e2e-ct/playwright',
    ctViteConfig: {
      // `plugins` below is non-empty, which turns OFF ct-core's own
      // "auto-inject @vitejs/plugin-react when the user didn't specify any
      // plugins" fallback (@playwright/experimental-ct-core/lib/viteUtils.js)
      // — so the React plugin has to be added explicitly, by us, here.
      // Pinned as an explicit devDependency (package.json) at the same
      // version @playwright/experimental-ct-react itself depends on (its own
      // node_modules would otherwise carry an UNDECLARED transitive copy —
      // fragile "phantom dependency", liable to silently disappear/shift on
      // a future `npm install` if hoisting heuristics change).
      //
      // Why not the repo's existing `@tailwindcss/postcss` (already a
      // devDependency, used by the real app's `postcss.config.mjs`) instead
      // of adding `@tailwindcss/vite`: regardless of which Tailwind plugin
      // is active, Vite's CSS pipeline ALWAYS separately tries to
      // auto-discover a `postcss.config.*` for every CSS file it touches
      // (`postcss-load-config`, walking up from the file's directory — it
      // finds the repo-root `postcss.config.mjs` no matter what `root`/
      // `ctTemplateDir` is set to). That auto-discovery's dynamic `import()`
      // of the `.mjs` config file fails under Playwright's own Node loader
      // ("Expected a string, an ArrayBuffer, or a TypedArray to be returned
      // for the "source" from the "load" hook but got null" — a loader-hook
      // interop clash, not a Tailwind/project config problem; reproduced
      // both via the auto-discovery path AND via a plain top-level `import
      // tailwindcssPostcss from '@tailwindcss/postcss'` in this same config
      // file). `css.postcss: {}` below (an inline, empty-of-extra-plugins
      // config) makes Vite skip that auto-discovery entirely — Tailwind
      // itself is then handled exclusively by `@tailwindcss/vite`'s own
      // transform (a proper Vite plugin, not a postcss config file), which
      // never goes near that code path. Version 4.3.3 (not 4.2.1, matching
      // the core `tailwindcss` package) because 4.2.1's `vite` peer range
      // tops out at `^7` — this repo's resolved `vite` is 8.1.x (hoisted by
      // @playwright/experimental-ct-core's own `vite@^8.0.0` dependency);
      // 4.3.3 is the first version whose peer range includes `^8`.
      css: { postcss: {} },
      plugins: [react(), tailwindcss()],
      resolve: {
        alias: {
          // Component Testing has no Next.js App Router — `next/navigation`/
          // `next/link` are stubbed (see the stub files' own doc comments
          // for exactly why + which surface is covered). `@/*` mirrors
          // tsconfig.json's own `paths` mapping (`"@/*": ["./*"]`) so every
          // existing `@/...` import in the editor tree resolves unchanged.
          'next/navigation': path.resolve(__dirname, 'e2e-ct/stubs/next-navigation.ts'),
          'next/link': path.resolve(__dirname, 'e2e-ct/stubs/next-link.tsx'),
          '@': path.resolve(__dirname, '.'),
        },
      },
    },
  },

  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
  ],
})