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';
import { VitePWA } from 'vite-plugin-pwa';
import { $themeLessVars } from './themeConfig/themeConfig';
import { lessAlphaPlugin, lightHex, palettePlugin } from './themeConfig/appearance';

// Ports are defined once in the repo-root .env (USER_APP_V2_PORT / API_PORT)
// — see that file's comment block.
const rootDir = fileURLToPath(new URL('../..', import.meta.url));
const rootEnv = loadEnv('development', rootDir, '');
const port = Number(rootEnv.USER_APP_V2_PORT ?? 5182);
const apiPort = Number(rootEnv.API_PORT ?? 3000);

export default defineConfig({
  envDir: rootDir,
  plugins: [
    // Build number + «what changed» notes → version.json (scripts/app-version.mjs).
    appVersion('user-app-v2'),
    // <title> comes from the repo-root brand.ts, like every other brand text.
    { name: 'brand-title', transformIndexHtml: (html: string) => html.replace('%BRAND_TITLE%', brand.appTitle) },
    vue(),
    // virtual:palette.css — the light/dark values behind the theme tokens.
    palettePlugin(),
    // Ported from legacy vite.config.ts:18-52. Same injectManifest strategy,
    // same src/sw.ts entry, same manifest values (name/colors/icons/display).
    VitePWA({
      base: '/',
      srcDir: 'src',
      filename: 'sw.ts',
      strategies: 'injectManifest',
      includeAssets: ['favicon.ico'],
      // legacy ran the SW in dev too (mode: "development")
      devOptions: { enabled: true, type: 'module' },
      manifest: {
        name: brand.appTitle,
        short_name: brand.nameEn,
        description: brand.appTitle,
        theme_color: lightHex.canvas,
        background_color: lightHex.canvas,
        start_url: '/',
        display: 'standalone',
        icons: [
          { src: 'icon-192.png', sizes: '192x192', type: 'image/png' },
          { src: '/icon-512.png', sizes: '512x512', type: 'image/png' },
          { src: 'icon-512.png', sizes: '512x512', type: 'image/png', purpose: 'any maskable' },
        ],
      },
    }),
  ],
  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: {
      '/api': `http://localhost:${apiPort}`,
      '/uploads': `http://localhost:${apiPort}`,
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: $themeLessVars,
        javascriptEnabled: true,
        // alpha(@token, N%) — fade() for theme tokens; see appearance.ts.
        plugins: [lessAlphaPlugin],
      },
    },
  },
});