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

export default defineConfig({
  plugins: [react(), tailwindcss()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
      // css 는 더 구체적인 별칭이 먼저 와야 한다 — 아래 '@o2o/shared' 접두어 규칙이
      // 먼저 걸리면 shared/src/tokens.css(없는 경로)로 떨어진다.
      // 실제 파일은 styles/ 아래에 있고, package.json exports 도 그쪽을 가리킨다.
      '@o2o/shared/tokens.css': path.resolve(__dirname, '../shared/src/styles/tokens.css'),
      '@o2o/shared/base.css': path.resolve(__dirname, '../shared/src/styles/base.css'),
      // 워크스페이스 심볼릭 링크를 타지 않고 소스를 직접 가리킨다 —
      // shared 를 고치면 빌드 없이 HMR 이 바로 돈다.
      '@o2o/shared': path.resolve(__dirname, '../shared/src'),
    },
  },
  build: {
    // ★ 발행본과 **같은 오리진**을 쓰므로 `/assets/` 를 서로 뺏는다. 빌더 번들만 다른
    //   디렉토리로 뺀다 — 안 그러면 nginx 의 `/assets/` 규칙이 발행본 것만 주고
    //   빌더 JS·CSS 가 404 다(화면은 뜨는데 스타일도 동작도 없다).
    assetsDir: 'builder-assets',
  },
  server: {
    // ★ Vite 6 는 모르는 Host 헤더를 403 "Blocked request" 로 막는다(DNS rebinding 방어).
    //   운영은 앞단 nginx 가 Host 를 그대로 넘기므로 발행 호스트를 여기 넣어야 화면이 뜬다.
    //   빠뜨리면 프록시는 정상인데 앱만 전부 403 이다.
    allowedHosts: [process.env.VITE_PUBLISH_HOST ?? 'w4ai.o2o.kr'],
    // 발행 사이트는 별도 정적 서버(:3001)가 만들고 서빙하지만, 사용자는 admin 과 같은
    // origin(:3000)의 `/s/<slug>` 로 접근한다. 프로세스 포트만 분리하고 공개 URL은 하나로 둔다.
    proxy: {
      // `'/s'`로 두면 Vite의 `/src/app/main.tsx`까지 매칭되어 에디터가 흰 화면이 된다.
      // 발행 사이트 루트(`/s`)와 그 하위 경로(`/s/...`)만 정확히 전달한다.
      '^/s(?:/|$)': {
        target: 'http://127.0.0.1:3001',
        changeOrigin: true,
      },
      /**
       * ★ 발행본의 JS·CSS 번들.
       *
       * 프리렌더는 사이트마다 번들을 복사하지 않고 `out/assets/` 하나를 **모든 사이트가 공유**한다
       * (캐시 엔트리가 사이트 수만큼 늘지 않는다). 그래서 페이지 HTML 은 `/s/<slug>/assets/...` 가
       * 아니라 루트 절대경로 `/assets/...` 를 가리킨다.
       *
       * 이 규칙이 없으면 그 요청이 위의 `^/s` 에 걸리지 않아 **관리자 dev 서버**로 떨어지고,
       * Vite 는 모르는 경로에 SPA fallback(index.html)을 200 으로 돌려준다 —
       * 브라우저는 JS 자리에서 HTML 을 받아 파싱 에러를 내고, CSS 는 MIME 불일치로 무시한다.
       * 화면에는 스타일도 상호작용도 없는 맨 HTML 만 남는다. 404 가 아니라 200 이라
       * 네트워크 탭만 봐서는 원인이 잘 안 보이는 자리다.
       *
       * ★ 운영에서는 nginx·CDN 이 `out/` 을 루트로 서빙하므로 `/assets/...` 가 그대로 맞다 —
       *   이 프록시는 개발에서 두 프로세스를 한 origin 으로 보이게 하는 몫만 한다.
       * ★ `/fonts` 는 넘기지 않는다. 관리자와 발행본이 **같은 경로를 각자** 쓰고 있어
       *   여기서 넘기면 관리자 자기 폰트가 발행본 쪽으로 샌다. 지금 발행본 HTML 은
       *   `/fonts/...` 를 참조하지 않는다(웹폰트는 Google Fonts CDN 에서 받는다).
       */
      '^/assets/': {
        target: 'http://127.0.0.1:3001',
        changeOrigin: true,
      },
    },
    // 도커(Mac) 바인드마운트는 네이티브 inotify 가 컨테이너로 전파되지 않아
    // 파일 감시를 polling 으로 해야 호스트 변경이 감지된다.
    watch: {usePolling: true, interval: 300},
  },
});