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

export default defineConfig(({ mode }) => {
  // Enable debug mode for development builds
  const isDevelopment = mode === 'development';

  return {
    plugins: [
      react(),
      // PWA plugin temporarily disabled to avoid service worker conflicts
      // VitePWA can be re-enabled later for production PWA features
    ],
    resolve: {
      alias: {
        '@': path.resolve(__dirname, './src'),
        '@components': path.resolve(__dirname, './src/components'),
        '@pages': path.resolve(__dirname, './src/pages'),
        '@hooks': path.resolve(__dirname, './src/hooks'),
        '@stores': path.resolve(__dirname, './src/stores'),
        '@services': path.resolve(__dirname, './src/services'),
        '@utils': path.resolve(__dirname, './src/utils'),
        '@types': path.resolve(__dirname, './src/types'),
      },
    },
    server: {
      host: '0.0.0.0', // Important for Docker
      port: 3000,
      watch: {
        // Use polling for Docker/Kubernetes compatibility
        usePolling: true,
        ignored: [
          '**/node_modules/**',
          '**/dist/**',
          '**/.git/**',
        ],
      },
      proxy: {
        '/api': {
          target: process.env.VITE_API_URL !== undefined
                  ? (process.env.VITE_API_URL || '')  // Use value or empty string
                  : (process.env.NODE_ENV === 'development' && process.env.KUBERNETES_SERVICE_HOST
                      ? 'http://gateway-service:8000'  // Kubernetes internal service
                      : 'http://localhost:8000'),      // Local development
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, ''),
        },
      },
    },
    build: {
      outDir: 'dist',
      // For production builds: ensure assets have correct paths
      // Base path should be '/' for root deployment
      // In development mode: inline source maps for better debugging
      // In production mode: external source maps
      sourcemap: isDevelopment ? 'inline' : true,
      // In development mode: disable minification for readable errors
      // In production mode: use esbuild minification
      minify: isDevelopment ? false : 'esbuild',
      rollupOptions: {
        output: {
          // In development mode: don't split chunks (easier debugging)
          // In production mode: split chunks for better caching
          manualChunks: isDevelopment ? undefined : {
            vendor: ['react', 'react-dom', 'react-router-dom'],
            ui: ['@radix-ui/react-dialog', '@radix-ui/react-dropdown-menu'],
            charts: ['recharts'],
            forms: ['react-hook-form', 'zod'],
          },
          // Ensure assets are placed in assets directory with proper names
          assetFileNames: (assetInfo) => {
            if (assetInfo.name.endsWith('.css')) {
              return 'assets/[name].[hash].[ext]';
            }
            return 'assets/[name].[hash].[ext]';
          },
          chunkFileNames: 'assets/[name].[hash].js',
          entryFileNames: 'assets/[name].[hash].js',
        },
      },
    },
  };
});