const path = require("path")

module.exports = {
  webpack: function (config) {
    // 1. Find and replace babel-loader with swc-loader
    const jsRule = config.module.rules.find(
      (rule) =>
        rule.oneOf &&
        rule.oneOf.some((r) => r.loader && r.loader.includes("babel-loader"))
    )

    if (jsRule) {
      const babelLoaderIndex = jsRule.oneOf.findIndex(
        (r) => r.loader && r.loader.includes("babel-loader")
      )

      jsRule.oneOf[babelLoaderIndex] = {
        test: /\.(js|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "swc-loader",
          options: {
            jsc: {
              parser: {
                syntax: "ecmascript",
                jsx: true,
                tsx: true, // Add support for TypeScript JSX
                decorators: false,
                dynamicImport: true
              },
              transform: {
                react: {
                  runtime: "automatic",
                  refresh: process.env.NODE_ENV === 'development',
                },
              },
              target: "es2015",
            },
          },
        },
      }
    }

    // 2. Add path aliases
    config.resolve.alias = {
      ...config.resolve.alias,
      "@src": path.resolve(__dirname, "src"),
      "@assets": path.resolve(__dirname, "src/assets"),
      "@components": path.resolve(__dirname, "src/components"),
      "@layouts": path.resolve(__dirname, "src/layouts"),
      "@store": path.resolve(__dirname, "src/redux"),
      "@styles": path.resolve(__dirname, "src/styles"),
      "@configs": path.resolve(__dirname, "src/configs"),
      "@hooks": path.resolve(__dirname, "src/hooks"),
    }

    // Important: Return the modified config
    return config
  },
}