import { resolve } from "path";
import { defineConfig } from 'vite'
import replace from '@rollup/plugin-replace';
import react from '@vitejs/plugin-react';
import { viteExternalsPlugin } from 'vite-plugin-externals';
import cssInjectedByJsPlugin from 'vite-plugin-css-injected-by-js';
import manifest from './src/manifest';

const isDev = ['development', 'develop'].includes(process.env.NODE_ENV);

console.warn('Vite building in ', isDev ? 'DEVELOPER MODE' : 'PRODUCTION MODE');

const optimizeDepsInclude = [
  '**/*.scss',
];
// В dev: подготавливаем react/react-dom/react-redux как ESM-шимы
if (isDev) {
  optimizeDepsInclude.push('react-redux')
}

export default defineConfig({
  plugins: [
    ...(isDev ? [
      viteExternalsPlugin({
        react: 'React',
        'react-dom': 'ReactDOM',
        redux: 'Redux',
        'react-redux': 'ReactRedux',
        'prop-types': 'PropTypes',
        'react-bootstrap': 'ReactBootstrap',
        'react-router-dom': 'ReactRouterDom',
      }),
    ] : [
    ]),

    // 2) В dev включаем плагин React (он генерит preamble + jsx runtime + fast refresh)
    ...(isDev ? [react()] : []),

    cssInjectedByJsPlugin(),
    replace({
      // Переопределяем NODE_ENV внутри бандла
      'process.env.NODE_ENV': JSON.stringify(isDev ? 'development' : 'production'),
      preventAssignment: true,
    }),
  ],

  // Трансформация JSX через esbuild
  esbuild: {
    jsx: 'transform',
    jsxFactory: 'React.createElement',
    jsxFragment: 'React.Fragment',
  },

  // В dev: подготавливаем react/react-dom/react-redux как ESM-шимы
  optimizeDeps: {
    include: optimizeDepsInclude,
  },

  css: {
    preprocessorOptions: {
      scss: {
        modules: true,
      },
    },
    modules: {
      localsConvention: 'camelCaseOnly',
    },
  },

  build: {
    lib: {
      entry: resolve(__dirname, 'src/index.tsx'),
      formats: ['umd'],
      name: manifest.id,
      cssFileName: manifest.id,
      fileName: () => 'main.js',
    },
    rollupOptions: {
      // В проде всё это выносится в глобальные переменные Mattermost
      external: [
        'react',
        'react-dom',
        'redux',
        'react-redux',
        'prop-types',
        'react-bootstrap',
        'react-router-dom',
        'core-js',
        'react-intl',
      ],
      output: {
        inlineDynamicImports: true,
        manualChunks: undefined,
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
          redux: 'Redux',
          'react-redux': 'ReactRedux',
          'prop-types': 'PropTypes',
          'react-bootstrap': 'ReactBootstrap',
          'react-router-dom': 'ReactRouterDom',
          'react-intl': 'ReactIntl',
        },
      },
    },
  },

  server: {
    port: 3001,
    cors: true,
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
    // ----------------------------------------------------
    // HMR-настройка для плагина, загружаемого в Loop
    hmr: {
      protocol: 'ws',               // WebSocket
      host: 'localhost',            // где запущен vite dev
      port: 3001,                   // тот же порт
      clientPort: 3001,             // куда клиент будет подключаться
    },
    // ----------------------------------------------------
  },

  define: {
    __PLUGIN_DEV__: isDev,
    __PLUGIN_COMPONENTS_HOST__: isDev
      ? JSON.stringify('http://localhost:3001')
      : JSON.stringify(null),
  },
});