import { defineConfig } from 'vite'
import { resolve } from 'node:path'

const here = (...p) => resolve(import.meta.dirname, ...p)

// Two build targets from one config:
//
//   vite build              → dist/       the deliverable: tlig.css + fonts,
//                                         no HTML. This is what WordPress
//                                         enqueues.
//   vite build --mode demo  → demo-dist/  a static demo page that loads that
//                                         stylesheet through a real <link>,
//                                         with the site images beside it.
//
// The second exists because in dev Vite injects CSS through JavaScript, so
// anything with a `transition` animates from its unstyled state on first paint.
// That is a dev artifact, but it makes the demo misrepresent the stylesheet.
// The static build paints once, the way a browser will on the real site.
export default defineConfig(({ mode }) => {
  const isDemo = mode === 'demo'

  return {
    root: 'src',

    // Relative asset URLs — a url() in CSS resolves against the stylesheet's
    // own location, so the output can be dropped at any path under wp-content
    // without rebuilding.
    base: './',

    // `site/` mirrors the live asset tree, so the demo can reference
    // /wp-content/includes/images/… exactly as a WordPress template does.
    publicDir: here('site'),

    css: {
      devSourcemap: true,
    },

    build: {
      outDir: isDemo ? here('demo-dist') : here('dist'),
      emptyOutDir: true,

      // The demo needs the wood and scroll images; the deliverable does not —
      // WordPress already hosts them.
      copyPublicDir: isDemo,

      sourcemap: true,
      cssCodeSplit: false,

      rollupOptions: {
        // The demo is built from the page; the deliverable from the entry
        // module, so no demo markup or demo CSS can reach dist/.
        input: isDemo ? here('src/index.html') : here('src/main.js'),

        output: {
          // Predictable names: WordPress enqueues these paths, so they must not
          // change on every build. Fonts keep their own names for the same
          // reason — a preload hint in the theme header has to stay valid.
          entryFileNames: isDemo ? 'assets/[name]-[hash].js' : 'tlig.js',
          assetFileNames: (info) => {
            const name = info.names?.[0] ?? info.name ?? ''
            if (name.endsWith('.css')) return 'tlig.css'
            if (/\.(woff2?|ttf|eot|svg)$/.test(name)) return 'fonts/[name][extname]'
            return 'assets/[name]-[hash][extname]'
          },
        },
      },
    },
  }
})