import { createApp } from 'vue'
import App from './App.vue'
import { router } from './router'
import { loadSite } from './site'
import { installCustomCss } from './customCss'
import { installCustomJs } from './customJs'
import './styles.css'
// vivid（余白）是第二套 UI，全部规则都以 html[data-ui="vivid"] 前缀收敛；
// 必须排在 styles.css 之后，才能在同特指度时按源码顺序取胜。
// 顺序即层叠顺序：令牌 → 骨架 → 各视图 → 手机收口。不要把 tokens/mobile 挪位置。
import './ui/yohaku/tokens.css'
import './ui/yohaku/chrome.css'
import './ui/yohaku/home.css'
import './ui/yohaku/article.css'
import './ui/yohaku/pages.css'
// 评论区的 vivid 差异。插在 pages 之后、mobile 之前 —— 它要盖住 styles.css 里
// 同特指度的 .cm-* 基础版，又必须让 mobile.css 保持最后。它自己的窄屏规则写在文件内。
import './ui/yohaku/comments.css'
// mobile.css 必须排最后：它修正的是上面几个文件里同特指度的基准尺寸，
// 媒体查询不加特指度，「后导入者赢」是它唯一的凭仗。
import './ui/yohaku/mobile.css'

loadSite().then(async () => {
  installCustomCss(router)
  // 站主自定义 JS（统计脚本）：公开页注入一次，后台不注入
  installCustomJs(router)
  // 评论区的 dev mock：只有 dev 且带 ?mock 时才会被下载。
  // import.meta.env.DEV 在 build 时被替换成 false，整个分支连同这个动态 chunk
  // 一起被 rollup 丢掉（产物里 grep __COMMENT_MOCK__ 应为空）。
  // 必须等它装完再挂载 —— 否则组件首屏那几次请求会先打到真接口上。
  if (import.meta.env.DEV && new URLSearchParams(location.search).has('mock')) {
    await import('./mocks/comments').then((m) => m.install())
  }
  createApp(App).use(router).mount('#app')
})