import { defineConfig, loadEnv } from "vite";
// Import the React plugin
// @ts-ignore - Ignore TypeScript errors for this import
import react from "@vitejs/plugin-react";
import { ConfigEnv, UserConfig } from "vite";
// Import our custom app-config plugin
// @ts-ignore - Ignore TypeScript errors for this import
import appConfigPlugin from "./scripts/vite-plugin-app-config.js";

// https://vitejs.dev/config/
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
  // Load env file based on `mode` in the current directory.
  // By default, only variables prefixed with CLIENT_ are loaded
  const env = loadEnv(mode, process.cwd());

  // Get the base path from environment variables
  // Use CLIENT_BASE_PATH for consistency with other env vars
  const basePath = env.CLIENT_BASE_PATH || "/";

  // Ensure the base path is properly formatted for Vite
  // Vite requires the base to have a trailing slash
  const formattedBasePath = basePath.endsWith('/') ? basePath : `${basePath}/`;

  console.log(`Using base path: ${basePath}`);

  return {
    plugins: [
      // @ts-ignore - Ignore TypeScript errors for this plugin usage
      react({
        // This is needed to force JSX to be processed correctly
        jsxRuntime: "automatic",
        babel: {
          // Add any babel plugins or presets here
          presets: [],
          plugins: [],
          // This is important for proper JSX handling
          babelrc: false,
          configFile: false,
        },
      }),
      // Add our custom app-config plugin
      appConfigPlugin(),
    ],
    base: basePath, // Uses CLIENT_BASE_PATH from .env files
    build: {
      modulePreload: {
        polyfill: true,
      },
    },
    server: {
      // Server configuration options
    },
    resolve: {
      extensions: [".js", ".jsx", ".ts", ".tsx"],
      alias: {
        "@": "/src",
        "@app": "/src/app",
        "@domains": "/src/domains",
        "@shared": "/src/shared",
        "@shared/ui": "/src/shared/ui",
        "@shared/lib": "/src/shared/lib",
        "@assets": "/src/assets",
        "@styles": "/src/styles",
        "@types": "/src/types",
        "@lib": "/src/lib",
        "@services": "/src/services",
        "@api": "/src/lib/api",
        "@merchant-api": "/src/lib/api/merchant",
      },
    },
    optimizeDeps: {
      include: [
        "react",
        "react-dom",
        "react-router-dom",
        "react-oidc-context",
        "oidc-client-ts",
      ],
    },
  };
});