import { defineConfig, loadEnv } from 'vite'
import react from '@vitejs/plugin-react'

// In dev, the frontend runs on Vite's port and proxies the API
// (and /auth/*, /api/webhooks/*) to the FastAPI process.
//
// VITE_APP_NAME is the user-visible name of this deployment — used in
// the browser tab title, the header brand, and the landing page H1.
// The framework intentionally ships no default: every deployment must
// supply its own name via `frontend/.env` so a fresh build never ships
// the wrong brand. See `frontend/.env.example`.
export default defineConfig(({ mode }) => {
  const env = loadEnv(mode, process.cwd(), '')
  const appName = env.VITE_APP_NAME

  if (!appName || !appName.trim()) {
    throw new Error(
      'VITE_APP_NAME is required but not set. Copy frontend/.env.example to ' +
      'frontend/.env and set VITE_APP_NAME=... before building. The framework ' +
      'ships no default on purpose — each deployment names itself.'
    )
  }

  return {
    plugins: [
      react(),
      // Build-time HTML token substitution: `%VITE_APP_NAME%` inside
      // `index.html` becomes the configured name. Vite already does this
      // for env vars referenced as `%VITE_*%` in HTML, but we wire it
      // explicitly so the failure mode (token left in title) is loud.
      {
        name: 'inject-app-name',
        transformIndexHtml(html) {
          return html.replace(/%VITE_APP_NAME%/g, appName)
        },
      },
    ],
    server: {
      port: 5173,
      proxy: {
        '/api': 'http://localhost:8000',
        '/auth': 'http://localhost:8000',
      },
    },
  }
})