import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

const ReactCompilerConfig = {
  compilationMode: 'infer'
};

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ['babel-plugin-react-compiler', ReactCompilerConfig],
        ],
      },
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
    },
  },
  server: {
    port: 3000,
    host: '0.0.0.0', // Allow external connections for container
    allowedHosts: [
      'localhost',
      'motovaultpro.com',
      '.motovaultpro.com'
    ],
  },
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          // React ecosystem
          'react-vendor': ['react', 'react-dom'],
          'react-router': ['react-router-dom'],
          
          // UI library
          'mui-core': ['@mui/material', '@mui/system'],
          'mui-icons': ['@mui/icons-material'],
          'emotion': ['@emotion/react', '@emotion/styled'],
          
          // Authentication
          'auth': ['@auth0/auth0-react'],
          
          // Data fetching and state management
          'data': ['@tanstack/react-query', 'zustand', 'axios'],
          
          // Form handling
          'forms': ['react-hook-form', '@hookform/resolvers', 'zod'],
          
          // Utilities
          'utils': ['date-fns', 'clsx'],
          
          // Animation and UI
          'animation': ['framer-motion', 'react-hot-toast']
        },
      },
    },
    chunkSizeWarningLimit: 600, // Increase slightly from 500kb
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true, // Remove console logs in production
        drop_debugger: true,
        pure_funcs: ['console.log', 'console.info', 'console.debug'],
      },
      mangle: {
        safari10: true, // Ensure Safari 10 compatibility
      },
    },
    sourcemap: false, // Disable sourcemaps in production for smaller bundles
    cssMinify: true,
    cssCodeSplit: true, // Split CSS into separate chunks
  },
  // Production optimizations
  esbuild: {
    drop: ['console', 'debugger'], // Additional cleanup
  },
});