import { fileURLToPath, URL } from 'node:url';
import { defineConfig, loadEnv } from 'vite';
import vue from '@vitejs/plugin-vue';
import { appVersion } from '../../scripts/app-version.mjs';
import { brand } from '../../brand';

// Ported from legacy henza_admin/vue.config.js.
// The legacy build switched publicPath/outputDir on NODE_ENV=='branch'; in Vite the
// equivalent switch is the --mode flag (`pnpm dev:branch` / `pnpm build:branch`),
// which src/utils/index.ts reads via import.meta.env.MODE.
export default defineConfig(({ mode }) => {
  const isBranch = mode === 'branch';
  // Ports are defined once in the repo-root .env (ADMIN_PANEL_PORT / API_PORT)
  // — see that file's comment block. envDir points here so `vite` picks it up
  // even though this app's own directory has no .env of its own.
  const rootEnv = loadEnv(mode, fileURLToPath(new URL('../..', import.meta.url)), '');
  const port = Number(rootEnv.ADMIN_PANEL_PORT ?? 5180);
  const apiPort = Number(rootEnv.API_PORT ?? 3000);

  return {
    envDir: fileURLToPath(new URL('../..', import.meta.url)),
    // Shared-host deploy (Dokploy Path `/admin` on the same domain as user-app):
    // assets and the Vue router must be rooted under `/admin/`. A bare `/` base
    // makes index.html request `/assets/…`, which hits user-app and 404s while
    // the real files live at `/admin/assets/…`.
    // Override with ADMIN_PANEL_BASE=/ when admin has its own subdomain.
    // Branch mode still mounts under `/branch/`.
    base: isBranch
      ? '/branch/'
      : (() => {
          const raw = rootEnv.ADMIN_PANEL_BASE || '/admin/';
          return raw.endsWith('/') ? raw : `${raw}/`;
        })(),
    // Build number + «what changed» notes → version.json (scripts/app-version.mjs).
    plugins: [
      vue(),
      appVersion('admin-panel'),
      // <title> comes from the repo-root brand.ts, like every other brand text.
      { name: 'brand-title', transformIndexHtml: (html: string) => html.replace('%BRAND_TITLE%', brand.adminTitle) },
    ],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url)),
      },
    },
    css: {
      preprocessorOptions: {
        less: {
          // ant-design-vue 4 dropped LESS theming (modifyVars) for CSS-in-JS design
          // tokens; the equivalent primary/link/radius tokens now live in
          // App.vue's <a-config-provider :theme>. This block only compiles the
          // app's own farsi.less/utilities.less, which have no LESS variables.
          javascriptEnabled: true,
        },
      },
    },
    build: {
      // Legacy's vue.config.js used outputDir 'dist/export' / 'branchDist/export',
      // but this app's Dockerfile does `COPY dist /usr/share/nginx/html` and nginx
      // serves that folder's ROOT. With the build landing in dist/export/, the
      // root kept whatever index.html was committed there before — a stale
      // pre-port build — so the deployed panel served that instead of this app.
      // Build straight into the folder the image actually serves (which is also
      // what apps/user-app does).
      outDir: isBranch ? 'branchDist' : 'dist',
      emptyOutDir: true,
      sourcemap: false, // legacy: productionSourceMap: false
    },
    server: {
      host: '0.0.0.0',
      port,
      // Never silently fall back to another port — fail loudly instead so a
      // stuck dev server is obvious rather than moving to a random port.
      strictPort: true,
      proxy: {
        // 127.0.0.1, not localhost: on Windows localhost often prefers ::1, and
        // another process can bind only IPv6 :3000 while our API is on IPv4 —
        // the proxy then hits the wrong app and every /api call 404s.
        '/api': `http://127.0.0.1:${apiPort}`,
        // Uploaded files (ProductImage.url etc.) are served by the API's own
        // static handler, not this dev server — without this they 404 in dev
        // even though production nginx (nginx.conf) already proxies them.
        '/uploads': `http://127.0.0.1:${apiPort}`,
      },
    },
  };
});