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

const showcaseDir = path.dirname(fileURLToPath(import.meta.url));
const kitDir = path.resolve(showcaseDir, '..');

/**
 * The showcase is a plain Vite app that imports the kit straight from source.
 *
 * It deliberately does NOT go through `dist/` — you want to see the component
 * you just edited, not the one you last built. The `@` alias is the same one
 * `.storybook/main.ts` and `vitest.config.ts` set, so a file compiles
 * identically in all three places. `~` is the showcase's own root and exists
 * only here and in `showcase/tsconfig.json` + `vitest.config.ts` — Storybook
 * never sees this directory.
 *
 * Tailwind runs through the Vite plugin here and through the CLI in
 * `scripts/build-css.mjs` for the published stylesheet. Both start from
 * `src/styles/globals.css`; the showcase adds its own `@source` on top (see
 * `src/showcase.css`) so its markup is scanned without leaking showcase-only
 * utilities into `dist/styles.css`.
 */
export default defineConfig({
  /**
   * Where the built site will be served from.
   *
   * `SHOWCASE_BASE=/my-kit/ pnpm showcase:build` for a GitHub Pages project
   * site; leave it unset for a domain root (Vercel, Netlify, an S3 bucket).
   *
   * This is the *only* thing a sub-path deployment needs. The app routes on the
   * hash (`#/button?lang=ru`), so every URL is one document to the server and
   * there is nothing to rewrite — no `404.html` copy, no `_redirects`, no
   * `try_files`. A history router would have needed all three. Only asset URLs
   * care about the prefix, and that is what `base` fixes.
   */
  base: process.env.SHOWCASE_BASE ?? '/',
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(kitDir, 'src'),
      /* The showcase's own root. `@` points at the kit, so without this every
         intra-showcase import is relative and a folder level costs a `../` in
         every consumer. Use it for cross-folder reaches (`~/chrome/ui/matrix`,
         `~/registry`); a sibling stays `./`. */
      '~': path.resolve(showcaseDir, 'src'),
    },
  },
  server: {
    port: 5175,
    /* The app root is `showcase/`, but every import reaches up into `../src`.
       Without this Vite refuses to serve those files. */
    fs: { allow: [kitDir] },
  },
  build: {
    outDir: 'dist',
    emptyOutDir: true,
    /* This is a published documentation site, not something anyone debugs from
       a deployed build — and shipping maps would publish the kit's source
       alongside a site whose whole job is to show you the source deliberately,
       one component at a time. */
    sourcemap: false,
  },
});