import { readdirSync, readFileSync } from 'node:fs';
import { join } from 'node:path';
import { fileURLToPath } from 'node:url';
import { defineConfig } from 'vite';
import { svelte, vitePreprocess } from '@sveltejs/vite-plugin-svelte';

/**
 * The page isn't SW-controlled on first launch, so the worker chunk and the
 * wasm can bypass fetch interception entirely and never get cached. Instead
 * of relying on runtime fetches, prepend the full list of emitted files
 * (chunks, assets, wasm) to sw.js as a global so install() can precache all
 * of it directly, no separate request needed.
 */
function precacheManifestPlugin(): import('vite').Plugin {
  return {
    name: 'malice-sw-precache-manifest',
    generateBundle(_options, bundle) {
      const urls = Object.keys(bundle)
        .filter(
          (fileName) => fileName !== 'sw.js' && fileName !== '.vite/manifest.json' && !fileName.startsWith('twemoji/')
        )
        .map((fileName) => `/${fileName}`);
      const swChunk = bundle['sw.js'];
      if (swChunk && swChunk.type === 'chunk') {
        swChunk.code = `self.__MALICE_PRECACHE__=${JSON.stringify(urls)};\n${swChunk.code}`;
      }
    }
  };
}

function twemojiPlugin(): import('vite').Plugin {
  const dir = fileURLToPath(new URL('./node_modules/@twemoji/svg', import.meta.url));
  const svgs = () => readdirSync(dir).filter((f) => f.endsWith('.svg'));
  return {
    name: 'malice-twemoji',
    configureServer(server) {
      server.middlewares.use('/twemoji', (req, res, next) => {
        const name = decodeURIComponent((req.url ?? '').split('?')[0]).replace(/^\//, '');
        if (!/^[0-9a-f-]+\.svg$/.test(name)) return next();
        try {
          res.setHeader('Content-Type', 'image/svg+xml');
          res.end(readFileSync(join(dir, name)));
        } catch {
          res.statusCode = 404;
          res.end();
        }
      });
    },
    generateBundle() {
      for (const file of svgs()) {
        this.emitFile({ type: 'asset', fileName: `twemoji/${file}`, source: readFileSync(join(dir, file)) });
      }
    }
  };
}

export default defineConfig(({ mode }) => {
  const device = mode === 'device';
  return {
    plugins: [svelte({ preprocess: vitePreprocess() }), twemojiPlugin(), ...(device ? [precacheManifestPlugin()] : [])],
    assetsInclude: ['**/*.wasm'],
    resolve: {
      alias: {
        'malice:device-transport': device ? '/src/lib/device-transport.ts' : '/src/lib/device-transport.stub.ts'
      }
    },
    server: {
      host: '127.0.0.1',
      port: 5173,
      proxy: {
        '/api': 'http://localhost:3000'
      }
    },
    preview: {
      host: '127.0.0.1',
      port: 4173,
      proxy: {
        '/api': 'http://localhost:3000'
      }
    },
    build: device
      ? {
          outDir: 'dist-device',
          emptyOutDir: true,
          manifest: true,
          rollupOptions: {
            input: {
              main: 'index.html',
              sw: 'src/sw.ts'
            },
            output: {
              entryFileNames: (chunk) => (chunk.name === 'sw' ? 'sw.js' : 'assets/[name]-[hash].js')
            }
          }
        }
      : {
          outDir: 'dist',
          emptyOutDir: true
        }
  };
});