import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import { VitePWA } from 'vite-plugin-pwa';
import { $themeLessVars } from './themeConfig/themeConfig';

export default defineConfig({
  plugins: [
    vue(),
    // 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: 'Montzar',
        short_name: 'Montzar',
        description: 'Montzar',
        theme_color: $themeLessVars.primary,
        background_color: $themeLessVars.primary,
        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: 5179,
    proxy: {
      '/api': 'http://localhost:3000',
      '/uploads': 'http://localhost:3000',
    },
  },
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: $themeLessVars,
        javascriptEnabled: true,
      },
    },
  },
});