import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import path from 'path';

/**
 * Per-slice demo build. Slice name comes from `--mode <name>` and selects
 * the app folder, base path, and output directory.
 *
 * Dev:    vite -c vite.demo.config.ts --mode arrangement
 * Build:  vite build -c vite.demo.config.ts --mode arrangement
 *         → dist-demo/arrangement/
 */
export default defineConfig(({ mode, command }) => {
  const slice = mode;
  const appRoot = path.resolve(__dirname, `src/demo/apps/${slice}`);

  return {
    root: appRoot,
    // Load `.env` / `.env.local` from the repo root. Vite's default is to
    // read env files from `root`, which here points into `src/demo/apps/...`
    // where no env files live — so without this VITE_GOOGLE_MAPS_API_KEY
    // never reaches the built bundle and ProviderMap silently falls back
    // to its "no API key" empty state in production.
    envDir: __dirname,
    // Dev server uses absolute base so HMR/asset URLs work at the root;
    // production build prefixes assets with /<slice>/ so the bundle is
    // portable to any nginx location matching that path.
    base: command === 'build' ? `/${slice}/` : '/',
    // Mirror Storybook's staticDirs so /brandlogo/, /images/, etc. resolve.
    publicDir: path.resolve(__dirname, 'brandassets'),
    plugins: [react()],
    resolve: {
      alias: {
        '@atoms': path.resolve(__dirname, 'src/components/atoms'),
        '@molecules': path.resolve(__dirname, 'src/components/molecules'),
        '@organisms': path.resolve(__dirname, 'src/components/organisms'),
        '@theme': path.resolve(__dirname, 'src/theme'),
      },
    },
    build: {
      outDir: path.resolve(__dirname, `dist-demo/${slice}`),
      emptyOutDir: true,
      sourcemap: true,
    },
    server: {
      port: 5180,
      open: false,
    },
  };
});