import tailwindcss from '@tailwindcss/vite';
import react from '@vitejs/plugin-react';
import laravel from 'laravel-vite-plugin';
import { resolve } from 'node:path';
import { defineConfig } from 'vite';
import { visualizer } from "rollup-plugin-visualizer";

export default defineConfig({
    plugins: [
        laravel({
            input: ['resources/css/app.css', 'resources/js/app.tsx'],
            ssr: 'resources/js/ssr.tsx',
            refresh: true,
        }),
        react(),
        tailwindcss(),
        // visualizer({
        //     filename: 'dist/stats.html',
        //     open: true,           // Automatically open in browser
        //     gzipSize: true,       // Show gzipped sizes
        //     brotliSize: true,     // Show brotli compressed sizes
        //     template: 'treemap',  // Can be 'treemap', 'sunburst', 'network'
        // })
    ],
    esbuild: {
        jsx: 'automatic',
        // Uncomment for production to remove console logs
        // drop: ["console", "debugger"],
    },
    resolve: {
        alias: {
            'ziggy-js': resolve(__dirname, 'vendor/tightenco/ziggy'),
            '@': resolve(__dirname, 'resources/js'),
        },
    },
    optimizeDeps: {
        exclude: ['@ffmpeg/ffmpeg', '@ffmpeg/util']
    },
    build: {
        rollupOptions: {
            output: {
                manualChunks: {
                    // React MUST be first and separate to avoid dependency issues
                    'react-vendor': ['react', 'react-dom'],

                    // Heavy libraries that can be safely separated
                    'ffmpeg': ['@ffmpeg/ffmpeg', '@ffmpeg/util'],
                    'motion': ['motion'],
                    'canvas': ['konva', 'react-konva', 'react-konva-utils'],
                    'charts': ['recharts'],

                    // UI libraries that depend on React
                    'radix-ui': [
                        '@radix-ui/react-accordion',
                        '@radix-ui/react-alert-dialog',
                        '@radix-ui/react-aspect-ratio',
                        '@radix-ui/react-avatar',
                        '@radix-ui/react-checkbox',
                        '@radix-ui/react-collapsible',
                        '@radix-ui/react-context-menu',
                        '@radix-ui/react-dialog',
                        '@radix-ui/react-dropdown-menu',
                        '@radix-ui/react-hover-card',
                        '@radix-ui/react-label',
                        '@radix-ui/react-menubar',
                        '@radix-ui/react-navigation-menu',
                        '@radix-ui/react-popover',
                        '@radix-ui/react-progress',
                        '@radix-ui/react-radio-group',
                        '@radix-ui/react-scroll-area',
                        '@radix-ui/react-select',
                        '@radix-ui/react-separator',
                        '@radix-ui/react-slider',
                        '@radix-ui/react-slot',
                        '@radix-ui/react-switch',
                        '@radix-ui/react-tabs',
                        '@radix-ui/react-toggle',
                        '@radix-ui/react-toggle-group',
                        '@radix-ui/react-tooltip'
                    ],

                    // Form libraries
                    'forms': ['react-hook-form', '@hookform/resolvers', 'zod'],

                    // UI utilities
                    'ui-utils': [
                        'tailwind-merge',
                        'class-variance-authority',
                        'clsx',
                        'lucide-react',
                        'sonner',
                        'cmdk',
                        'next-themes'
                    ],

                    // Other React components
                    'react-components': [
                        'react-day-picker',
                        'react-error-boundary',
                        'embla-carousel-react',
                        'react-resizable-panels'
                    ],

                    // Non-React utilities
                    'utils': [
                        'date-fns',
                        'axios',
                        'mitt',
                        'zustand',
                        'embla-carousel-autoplay'
                    ],

                    // Inertia
                    'inertia': ['@inertiajs/react']
                }
            }
        },
        // Temporarily increase limit while optimizing
        chunkSizeWarningLimit: 1000,

        // Additional optimizations
        minify: 'esbuild',
        target: 'es2020',

        // Enable source maps for better debugging (optional)
        sourcemap: false,
    },
    server: {
        headers: {
            'Cross-Origin-Opener-Policy': 'same-origin',
            'Cross-Origin-Embedder-Policy': 'require-corp'
        }
    }
});