import vue from "@vitejs/plugin-vue";
import { defineConfig, loadEnv, type Plugin } from "vite";

const monorepoRoot = new URL("../..", import.meta.url).pathname;

type AppVariant = "dev" | "pro";

function appIdentityPlugin(mode: string): Plugin {
  const env = loadEnv(mode, monorepoRoot, "");
  const defaultVariant: AppVariant = mode === "development" ? "dev" : "pro";
  const variant: AppVariant = env.APP_VARIANT === "dev" || env.APP_VARIANT === "pro" ? env.APP_VARIANT : defaultVariant;
  const appName = env.VITE_APP_NAME || (variant === "dev" ? "Cents Dev" : "Cents");
  const shortName = env.VITE_APP_SHORT_NAME || appName;
  const appId = env.VITE_APP_ID || (variant === "dev" ? "/?app=cents-dev" : "/?app=cents");

  const manifest = JSON.stringify(
    {
      name: appName,
      short_name: shortName,
      id: appId,
      description: "家庭共享账本",
      start_url: "/",
      display: "standalone",
      background_color: "#f7f4ee",
      theme_color: "#f7f4ee",
      icons: [
        {
          src: "/icon.svg",
          sizes: "any",
          type: "image/svg+xml",
          purpose: "any maskable",
        },
      ],
    },
    null,
    2,
  );

  return {
    name: "cents-app-identity",
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        if (req.url?.split("?")[0] !== "/manifest.webmanifest") {
          next();
          return;
        }

        res.setHeader("Content-Type", "application/manifest+json; charset=utf-8");
        res.end(manifest);
      });
    },
    transformIndexHtml(html) {
      return html.replace(/<title>.*<\/title>/, `<title>${appName}</title>`);
    },
    generateBundle() {
      this.emitFile({
        type: "asset",
        fileName: "manifest.webmanifest",
        source: manifest,
      });
    },
  };
}

export default defineConfig(({ mode }) => ({
  envDir: monorepoRoot,
  plugins: [vue(), appIdentityPlugin(mode)],
  server: {
    allowedHosts: ["dev.cents.homemade.net.cn"],
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000",
        changeOrigin: false,
      },
    },
  },
}));