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

// Vite configuration for subdirectory deployment
// This configuration is specifically for deploying Vision Videoke in a subdirectory like /music

export default defineConfig({
  plugins: [react()],
  
  // Base path for subdirectory deployment
  // Change 'music' to your desired subdirectory name
  base: '/music/',
  
  build: {
    outDir: 'dist',
    sourcemap: false,
    minify: 'terser',
    
    // Optimize bundle splitting for subdirectory deployment
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          router: ['react-router-dom'],
          ui: ['framer-motion', '@heroicons/react'],
          utils: ['axios', 'zustand']
        },
        
        // Ensure assets are properly referenced with base path
        assetFileNames: (assetInfo) => {
          const info = assetInfo.name.split('.')
          const ext = info[info.length - 1]
          if (/png|jpe?g|svg|gif|tiff|bmp|ico/i.test(ext)) {
            return `assets/images/[name]-[hash][extname]`
          }
          if (/woff2?|eot|ttf|otf/i.test(ext)) {
            return `assets/fonts/[name]-[hash][extname]`
          }
          return `assets/[name]-[hash][extname]`
        },
        
        chunkFileNames: 'assets/js/[name]-[hash].js',
        entryFileNames: 'assets/js/[name]-[hash].js'
      }
    },
    
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true
      }
    }
  },
  
  server: {
    port: 3000,
    host: '0.0.0.0',
    
    // Proxy API requests to backend during development
    proxy: {
      '/music/api': {
        target: 'http://localhost:3001',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/music\/api/, '/api')
      }
    }
  },
  
  preview: {
    port: 3000,
    host: '0.0.0.0'
  },
  
  // Define environment variables for subdirectory deployment
  define: {
    __APP_BASE_PATH__: JSON.stringify('/music/'),
    __API_BASE_URL__: JSON.stringify('/music/api'),
    __PUBLIC_PATH__: JSON.stringify('/music/')
  },
  
  // Ensure proper asset handling for subdirectory
  publicDir: 'public',
  
  // CSS configuration for subdirectory deployment
  css: {
    postcss: {
      plugins: [
        // Add any PostCSS plugins if needed
      ]
    }
  },
  
  // Resolve configuration
  resolve: {
    alias: {
      '@': '/src',
      '@components': '/src/components',
      '@pages': '/src/pages',
      '@services': '/src/services',
      '@utils': '/src/utils',
      '@store': '/src/store'
    }
  }
})

