import { resolve } from 'path';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import vueJsx from '@vitejs/plugin-vue-jsx';
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import tailwindcss from '@tailwindcss/vite';
import dts from 'vite-plugin-dts';
import autoImport from 'unplugin-auto-import/vite';
import components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';
import { viteMockServe } from 'vite-plugin-mock';

const projectPath = resolve(__dirname)

export default defineConfig({
  base: '/',
  resolve: {
    alias: {
      '@': `${projectPath}/src`
    }
  },
  server: {
    host: true, // 等价于 0.0.0.0，允许所有网卡访问
    port: 8888,
    open: false,
    cors: true,
    strictPort: true,
    allowedHosts: [
      'monitor.kernelstudio.com',
      '127.0.0.1',
    ],
    // 修复 HMR 配置：简化 WS 连接逻辑，让 Vite 自动适配
    hmr: {
      host: 'monitor.kernelstudio.com',
      port: 8888, // Nginx 监听的端口
      protocol: 'ws', // 显式指定 WS 协议
      path: '/ws', // Vite HMR 的 WS 路径（关键）
    },
    // 修复响应头：跨域头匹配实际访问域名
    headers: {
      // 'X-Frame-Options': 'sameorigin',
      // 开发环境放行所有跨域（更通用），替代原有的 127.0.0.1:8888
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'GET,POST,PUT,DELETE,OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type,Authorization',
    },
    // 移除无效的 /api 代理配置（原 target: /api 无意义）
    // 如需代理 /api 到 3000 端口，正确配置如下（可选）：
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:1777', // Prometheus 地址
        changeOrigin: true,
        ws: true,
      },
      '/login': {
        target: 'http://127.0.0.1:1777',
        changeOrigin: true,  //是否跨域
      },
      '/getInfo': {
        target: 'http://127.0.0.1:1777',
        changeOrigin: true,
        ws: true,
      },
      '/api/live/ws': {
        target: 'http://127.0.0.1:3000',
        changeOrigin: true,
        ws: true,
      },
    },
    watch: {
      ignored: [],
    }
  },
  css: {
    preprocessorOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
  build: {
    rollupOptions: {
      output: {
        entryFileNames: 'assets/js/[name].[hash].js',
        chunkFileNames: 'assets/js/[name].[hash].js',
        assetFileNames: (assetInfo) => {
          if (/\.(css|less|scss|sass)$/.test(assetInfo.name || '')) {
            return 'assets/css/[name].[hash].[ext]';
          }
          if (/\.(woff|woff2|ttf|eot|otf)$/.test(assetInfo.name || '')) {
            return 'assets/fonts/[name].[hash].[ext]';
          }
          if (/\.(jpg|jpeg|png|icon|gif|svg)$/.test(assetInfo.name || '')) {
            return 'assets/images/[name].[hash].[ext]';
          }
          return 'assets/bundled/[name].[hash].[ext]';
        }
      }
    }
  },
  plugins: [
    vue(),
    viteCommonjs(),
    tailwindcss(),
    vueJsx({
      transformOn: true,
      optimize: true,
    }),
    viteMockServe({
      mockPath: `${projectPath}/mock`,
      enable: true,
    }),
    dts({
      tsconfigPath: `${projectPath}/tsconfig.json`,
      outDir: `${projectPath}/types`,
    }),
    autoImport({
      dts: `${projectPath}/types/auto-imports.d.ts`,
      eslintrc: {enabled: true},
      vueTemplate: true,
      ignore: ['h'],
      include: [
        /\.[tj]sx?$/,
        /\.vue$/,
      ],
      resolvers: [
        AntDesignVueResolver({importStyle: false}),
      ],
      imports: [
        'vue',
        'vue-router',
        'pinia',
        {
          '@vueuse/core': ['useLocalStorage', 'useClipboard', 'useDebounceFn'],
        },
      ],
    }),
    components({
      directives: true,
      extensions: ['vue'],
      resolvers: [
        AntDesignVueResolver({
          importStyle: false,
        }),
      ],
      dts: `${projectPath}/types/components.d.ts`
    })
  ],
})