import type { UserConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { createPreset } from './base.preset'

/**
 * Vitest preset for React applications
 *
 * Configures tests for React components with:
 * - React plugin for JSX/TSX transformation
 * - jsdom environment for DOM APIs
 * - React Testing Library setup (via test-utils)
 * - jest-dom custom matchers
 *
 * **Default Configuration:**
 * - Environment: jsdom (browser APIs available)
 * - Plugins: @vitejs/plugin-react (JSX transformation)
 * - Test files: `src/**\/*.{test,spec}.{ts,tsx}`
 * - Setup: test-utils setup (React Testing Library + jest-dom)
 * - Globals: enabled (describe, it, expect available without import)
 * - Timeout: 10s
 * - Coverage: v8 provider with text/json/html reports
 *
 * **Includes:**
 * - React Testing Library utilities (render, screen, fireEvent, etc.)
 * - jest-dom matchers (toBeInTheDocument, toHaveClass, etc.)
 * - Automatic cleanup after each test
 * - Browser API mocks (available via test-utils)
 *
 * @example Basic usage
 * ```typescript
 * // vitest.config.ts
 * import { reactPreset } from '@lilith/test-utils/vitest-presets'
 *
 * export default reactPreset()
 * ```
 *
 * @example With path aliases
 * ```typescript
 * import path from 'path'
 *
 * export default reactPreset({
 *   resolve: {
 *     alias: {
 *       '@': path.resolve(__dirname, './src'),
 *       '@components': path.resolve(__dirname, './src/components'),
 *     }
 *   }
 * })
 * ```
 *
 * @example With custom mocks
 * ```typescript
 * import path from 'path'
 *
 * export default reactPreset({
 *   resolve: {
 *     alias: {
 *       '@': path.resolve(__dirname, './src'),
 *       // Mock heavy dependencies
 *       'maplibre-gl': path.resolve(__dirname, './src/__mocks__/maplibre-gl.ts'),
 *       'maplibre-gl/dist/maplibre-gl.css': path.resolve(__dirname, './src/__mocks__/empty.css'),
 *     }
 *   }
 * })
 * ```
 *
 * @example With additional setup
 * ```typescript
 * export default reactPreset({
 *   test: {
 *     setupFiles: [
 *       '@lilith/test-utils/setup', // Default setup (included automatically)
 *       './test-setup.ts',             // Additional app-specific setup
 *     ],
 *   }
 * })
 * ```
 *
 * **Use Cases:**
 * - `@apps/portal` - Main creator portal
 * - `@apps/storefront` - Creator storefronts
 * - `@apps/broadcast-studio` - Live streaming interface
 * - `@apps/content-publisher` - Content management
 * - `@packages/egirl-cms` - React-based CMS components
 * - Any package with React components
 *
 * **Not suitable for:**
 * - Node.js packages → use `nodePreset` instead
 * - Browser utilities without React → use `jsdomPreset` instead
 */
export const reactPreset = createPreset({
  plugins: [react()],
  test: {
    environment: 'jsdom',
    include: ['src/**/*.test.ts', 'src/**/*.test.tsx', 'src/**/*.spec.ts', 'src/**/*.spec.tsx'],
    setupFiles: ['@lilith/test-utils/setup'],
  },
} as UserConfig)