import { defineConfig } from '@rspack/cli';
import { rspack } from '@rspack/core';
import RefreshPlugin from '@rspack/plugin-react-refresh';
import path from 'path';
import dotenv from 'dotenv';
import { RsdoctorRspackPlugin } from '@rsdoctor/rspack-plugin';
import HtmlRspackPlugin from 'html-rspack-plugin';

dotenv.config({ path: './.env.local' });
const isDev = process.env.NODE_ENV === 'development';

const APP_NAME = 'Secret';
const COOKIE_BACKEND_HOST = process.env.COOKIE_BACKEND_HOST;
const DEBUG_HOST = 'localhost';
const DEBUG_PORT = process.env.PORT || '8086';
const BASE_URL = process.env.BASE_URL || '/api';
const DEV_PROXY = process.env.REACT_APP_API_BASE_URL;
const JSON_ENV_URL = process.env.JSON_ENV_URL || '/config.json';
const FAVICON_PATH = path.resolve(__dirname, 'src', 'assets', 'favicon.ico');
const ALLOW_ANALYTICS = Boolean(process.env.ALLOW_ANALYTICS);

// Target browsers, see: https://github.com/browserslist/browserslist
const targets = ['chrome >= 87', 'edge >= 88', 'firefox >= 78', 'safari >= 14'];

export default defineConfig({
  output: {
    path: path.resolve(__dirname, 'dist'),
    publicPath: '/',
    filename: `js/[name].[${isDev ? 'fullhash' : 'contenthash'}].bundle.js`,
    chunkFilename: 'js/[name].[chunkhash:8].js',
    clean: true,
  },
  devtool: isDev ? 'source-map' : false,
  experiments: {
    css: true,
  },
  context: __dirname,
  entry: {
    main: './src/app/index.tsx',
  },
  resolve: {
    extensions: ['...', '.ts', '.tsx', '.jsx'],
    tsConfig: {
      configFile: path.resolve(__dirname, 'tsconfig.json'),
    },
  },
  module: {
    rules: [
      {
        test: /\.(jsx?|tsx?)$/,
        use: [
          {
            loader: 'builtin:swc-loader',
            options: {
              jsc: {
                experimental: {
                  plugins: [
                    [
                      '@swc/plugin-styled-components',
                      {
                        displayName: true,
                        ssr: false,
                      },
                    ],
                  ],
                },
                parser: {
                  syntax: 'typescript',
                  tsx: true,
                },
                transform: {
                  react: {
                    runtime: 'automatic',
                    development: isDev,
                    refresh: isDev,
                  },
                },
              },
              env: { targets },
            },
          },
        ],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/,
        type: 'asset/resource',
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        type: 'asset/resource',
      },
    ],
  },
  plugins: [
    new rspack.DefinePlugin({
      env: { JSON_ENV_URL: JSON.stringify(JSON_ENV_URL) },
      webpack: {
        isProduction: !isDev,
      },
    }),
    new HtmlRspackPlugin({
      template: './src/index.html',
      inject: 'body',
      templateParameters: {
        title:
          APP_NAME ||
          'You should use variable APP_NAME in rspack.config.ts for your project',
        appConfigFilePath: JSON_ENV_URL,
      },
      favicon: (FAVICON_PATH && path.resolve(__dirname, FAVICON_PATH)) || '',
    }),
    new rspack.CopyRspackPlugin({
      patterns: [{ from: 'public', to: '', noErrorOnMissing: true }],
    }),
    isDev && new RefreshPlugin(),
    ALLOW_ANALYTICS &&
      new RsdoctorRspackPlugin({
        // plugin options
      }),
  ].filter(Boolean),
  optimization: {
    minimizer: [
      new rspack.SwcJsMinimizerRspackPlugin(),
      new rspack.LightningCssMinimizerRspackPlugin({
        minimizerOptions: { targets },
      }),
    ],
    runtimeChunk: isDev ? 'single' : 'multiple',
    splitChunks: {
      chunks: 'all',
      cacheGroups: {
        defaultVendors: {
          test: /[\\/]node_modules[\\/]/,
          idHint: 'vendors',
          priority: -1,
          reuseExistingChunk: true,
        },
      },
    },
  },
  devServer: {
    setupMiddlewares: (middlewares, devServer) => {
      if (!devServer) {
        throw new Error('webpack-dev-server is not defined');
      }

      const { SMART_CAPTCHA_SITE_KEY, FEATURE_FLAG_V2_THEME, BASE_URL } =
        process.env;

      devServer?.app?.get(JSON_ENV_URL, (_, response) => {
        response.send(
          JSON.stringify({
            SMART_CAPTCHA_SITE_KEY,
            FEATURE_FLAG_V2_THEME,
            BASE_URL,
          }),
        );
      });

      return middlewares;
    },
    host: DEBUG_HOST,
    port: DEBUG_PORT,
    static: path.resolve(__dirname, 'dist'),
    historyApiFallback: true,
    proxy: [
      {
        context: [BASE_URL],
        target: DEV_PROXY,
        changeOrigin: true,
        secure: false,
        onProxyReq: (proxyReq) => {
          // CSRF bypass
          proxyReq.setHeader('referer', DEV_PROXY as string);
        },
        cookieDomainRewrite: {
          [COOKIE_BACKEND_HOST as string]: DEBUG_HOST,
        },
      },
    ],
  },
});