import { defineConfig, devices } from '@playwright/test';
import { getEnvironment } from './src/config/environments';
import { getMobileDevices } from './src/utils/devices';

const env = getEnvironment();

export default defineConfig({
  testDir: './src/tests',
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: env.retries,
  workers: process.env.CI ? 4 : '50%',
  globalSetup: require.resolve('./global-setup'),
  reporter: [
    ['html', { open: 'never' }],
    ['json', { outputFile: 'test-results/results.json' }],
    ['junit', { outputFile: 'test-results/junit.xml' }],
    ['line'],
    ['list'],
    ['allure-playwright', {
      outputFolder: 'allure-results',
      detail: true,
      suiteTitle: false,
    }],
  ],
  timeout: 90000,
  expect: {
    timeout: 45000,
  },
  use: {
    baseURL: env.baseURL,
    trace: env.trace,
    screenshot: env.screenshot,
    video: env.video,
    headless: true,
    viewport: { width: 1280, height: 720 },
    actionTimeout: 45000,
    navigationTimeout: 90000,
    launchOptions: {
      slowMo: env.slowMo,
    },
    storageState: '.auth/admin.json',
  },
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'firefox',
      use: { ...devices['Desktop Firefox'] },
    },
    {
      name: 'webkit',
      use: { ...devices['Desktop Safari'] },
    },
    {
      name: 'Mobile Chrome',
      use: { ...devices['Pixel 5'] },
    },
    {
      name: 'Mobile Safari',
      use: { ...devices['iPhone 12'] },
    },
    ...getMobileDevices().map(device => ({
      name: `mobile-${device.name.replace(/\s+/g, '-').toLowerCase()}`,
      use: {
        ...devices['Mobile Chrome'],
        viewport: device.viewport,
        userAgent: device.userAgent,
        deviceScaleFactor: device.deviceScaleFactor,
        isMobile: true,
      },
    })),
    {
      name: 'performance-mobile',
      use: {
        ...devices['Mobile Chrome'],
        viewport: { width: 375, height: 667 },
        isMobile: true,
      },
      testMatch: /.*\.perf\.spec\.ts/,
    },
    {
      name: 'pwa-mobile',
      use: {
        ...devices['Mobile Chrome'],
        viewport: { width: 375, height: 667 },
        isMobile: true,
        serviceWorkers: 'allow',
      },
      testMatch: /.*\.pwa\.spec\.ts/,
    },
  ],
  webServer: env.name === 'development' ? {
    command: 'cd .. && npm run dev',
    url: 'http://localhost:3000',
    timeout: 120000,
    reuseExistingServer: !process.env.CI,
  } : undefined,
});