import generouted from "@generouted/react-router/plugin";
import react from "@vitejs/plugin-react";
import tailwindcss from "@tailwindcss/vite";
import path from "node:path";
import { defineConfig, loadEnv, transformWithEsbuild } from "vite";
import { defaultRouterFile, fixGeneroutedRouterPaths } from "./scripts/fix-router-paths.ts";

export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), "");

  return {
    plugins: [
      {
        name: "load-js-files-as-jsx",
        async transform(code, id) {
          if (!/\/src\/.*\.js$/.test(id)) {
            return null;
          }

          return transformWithEsbuild(code, id, {
            loader: "jsx",
            jsx: "automatic",
          });
        },
      },
      react(),
      tailwindcss(),
      generouted({
        source: {
          routes: "./src/app/**/[\\w[-]*.{jsx,tsx}",
          modals: "./src/app/**/[+]*.{jsx,tsx}",
        },
        output: "./src/router.ts",
      }),
      {
        name: "generouted-app-paths",
        enforce: "post",
        buildEnd() {
          fixGeneroutedRouterPaths(defaultRouterFile);
        },
        configureServer(server) {
          const scheduleFix = () => {
            setTimeout(() => fixGeneroutedRouterPaths(defaultRouterFile), 50);
          };
          server.watcher.on("add", scheduleFix);
          server.watcher.on("change", scheduleFix);
          server.watcher.on("unlink", scheduleFix);
        },
      },
    ],
    optimizeDeps: {
      esbuildOptions: {
        loader: {
          ".js": "jsx",
        },
      },
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      },
    },
    server: {
      port: 3000,
      proxy: {
        "/api": {
          target: env.VITE_API_TARGET ?? "http://localhost:5141",
          changeOrigin: true,
          secure: false,
        },
      },
    },
    build: {
      outDir: "dist",
    },
  };
});