import { jsxLocPlugin } from "@builder.io/vite-plugin-jsx-loc";
import react from "@vitejs/plugin-react";
import path from "node:path";
import { createRequire } from "node:module";
import { defineConfig, type Plugin } from "vite";

const require = createRequire(import.meta.url);
const tailwindcss3 = require("tailwindcss3");
const autoprefixer = require("autoprefixer");

function legacyIndexRewritePlugin(): Plugin {
  // Vite dev server always serves /index.html for "/".
  // For legacy dev, we must serve i.legacy.html instead, otherwise it loads
  // modern main.tsx + index.css (Tailwind v4) and breaks the Tailwind v3 pipeline.
  return {
    name: "legacy-index-rewrite",
    apply: "serve",
    configureServer(server) {
      server.middlewares.use((req, _res, next) => {
        const url = req.url ?? "";
        if (url === "/" || url === "/index.html") {
          req.url = "/i.legacy.html";
        }
        next();
      });
    },
  };
}

export default defineConfig({
  // Legacy build targets Chrome 91 WebView-class browsers.
  // Uses Tailwind v3 via css.postcss (see postcss.legacy.config.cjs).
  plugins: [legacyIndexRewritePlugin(), react(), jsxLocPlugin()],
  base: process.env.NODE_ENV === "production" ? "/x8/v2/legacy/" : "/",
  resolve: {
    alias: {
      "@": path.resolve(import.meta.dirname, "client", "src"),
      "@shared": path.resolve(import.meta.dirname, "shared"),
      "@assets": path.resolve(import.meta.dirname, "attached_assets"),
    },
    dedupe: ["react", "react-dom"],
  },
  envDir: path.resolve(import.meta.dirname),
  root: path.resolve(import.meta.dirname, "client"),
  publicDir: path.resolve(import.meta.dirname, "client/public"),
  css: {
    // Force PostCSS for Tailwind v3 (Chrome 91 legacy).
    transformer: "postcss",
    postcss: {
      plugins: [tailwindcss3({ config: "./tailwind.legacy.config.cjs" }), autoprefixer()],
    },
  },
  build: {
    target: ["chrome91", "edge91"],
    cssTarget: "chrome91",
    outDir: path.resolve(import.meta.dirname, "dist/legacy"),
    emptyOutDir: true,
    minify: "terser",
    rollupOptions: {
      input: {
        i: path.resolve(import.meta.dirname, "client", "i.legacy.html"),
      },
    },
  },
  server: {
    port: 5173,
    strictPort: false,
    host: true,
    proxy: {
      "/luxsin-audio-api": {
        target: "https://api.luxsin.com.cn",
        changeOrigin: true,
        rewrite: (p) => p.replace(/^\/luxsin-audio-api/, "/audio"),
      },
    },
  },
});