import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
import { fileURLToPath, URL } from 'node:url';

export default defineConfig({
  plugins: [react()],
  resolve: {
    alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) },
  },
  server: {
    port: 5173,
    // Proxy in development so the browser sees one origin, matching how
    // production serves the API and the app together. Auth sessions are
    // per-origin, so a split origin in dev but not prod hides real bugs.
    /*
     * `/media` is proxied as well as `/api`, because Learn videos PIG hosts
     * itself are served from the API on a non-/api path. Without this entry
     * Vite answers the <video> request with index.html and the player shows a
     * black box with working controls and no error — the same silent
     * 200-text/html failure the API guards against for its own routes.
     */
    proxy: {
      '/api': { target: 'http://localhost:8920', changeOrigin: true },
      '/media': { target: 'http://localhost:8920', changeOrigin: true },
    },
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
    rollupOptions: {
      output: {
        /*
         * Split the vendor code that changes rarely from the app code that
         * changes constantly, so a deploy invalidates only the small chunk.
         * This matters on mobile: the auth client alone is a large download,
         * and re-fetching it on every deploy over a cellular connection is
         * exactly the cost worth avoiding.
         */
        manualChunks: {
          react: ['react', 'react-dom', 'react-router-dom'],
          supabase: ['@supabase/supabase-js'],
          query: ['@tanstack/react-query'],
        },
      },
    },
  },
});