import { defineConfig } from 'vite'
import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    federation({
      name: 'order-app',
      filename: 'remoteEntry.js',  // 入口文件名
      exposes: {
        // key 是对外暴露的模块名，value 是本地路径
        './OrderList': './src/components/OrderList.vue',
        './OrderDetail': './src/pages/OrderDetail.vue',
        './useOrder': './src/composables/useOrder.ts',
      },
      shared: ['vue', 'vue-router', 'pinia'],
    }),
  ],
  build: {
    target: 'esnext',
  },
})

import federation from '@originjs/vite-plugin-federation'

export default defineConfig({
  plugins: [
    federation({
      name: 'shell-app',
      remotes: {
        // key 是引用时的别名，value 是远端入口的 URL
        'order-app': 'https://order.example.com/assets/remoteEntry.js',
      },
      shared: ['vue', 'vue-router', 'pinia'],
    }),
  ],
})

const routes = [
  {
    path: '/orders',
    // 像普通模块一样导入，但实际从远端 URL 加载
    component: () => import('order-app/OrderList'),
  },
  {
    path: '/orders/:id',
    component: () => import('order-app/OrderDetail'),
  },
]

// 主应用和子应用共享这个包（通过 shared 配置共用同一实例）
import { defineStore } from 'pinia'

export const useGlobalStore = defineStore('global', {
  state: () => ({
    user: null as User | null,
    locale: 'zh-CN',
  }),
})

// 简单事件总线，用于不需要状态的一次性通知
type EventMap = {
  'order:created': { orderId: string }
  'user:logout': void
}

class EventBus {
  private handlers = new Map<string, Set<Function>>()

  on<K extends keyof EventMap>(event: K, handler: (data: EventMap[K]) => void) {
    if (!this.handlers.has(event)) this.handlers.set(event, new Set())
    this.handlers.get(event)!.add(handler)
    return () => this.handlers.get(event)?.delete(handler)  // 返回取消订阅函数
  }

  emit<K extends keyof EventMap>(event: K, data: EventMap[K]) {
    this.handlers.get(event)?.forEach(h => h(data))
  }
}

export const eventBus = new EventBus()

import { registerMicroApps, start } from 'qiankun'

registerMicroApps([
  {
    name: 'order-app',
    entry: '//localhost:8001',   // 子应用的访问地址
    container: '#micro-container',  // 挂载到主应用的哪个 DOM 节点
    activeRule: '/order',       // URL 匹配规则，命中时激活子应用
    props: {                    // 传给子应用的初始化数据
      token: () => store.getters.token,
      onNavigate: (path: string) => router.push(path),
    },
  },
  {
    name: 'user-app',
    entry: '//localhost:8002',
    container: '#micro-container',
    activeRule: '/user',
  },
])

start({
  prefetch: 'all',      // 预加载所有子应用资源
  sandbox: {
    strictStyleIsolation: true,  // 开启严格样式隔离（Shadow DOM）
  },
})

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

let app: ReturnType<typeof createApp> | null = null

// 判断是否在 qiankun 环境中运行
const inQiankun = window.__POWERED_BY_QIANKUN__

if (inQiankun) {
  // 注入 webpack publicPath，确保子应用的静态资源路径正确
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  ;(window as any).__webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__
}

// 独立运行时直接挂载
if (!inQiankun) {
  mount({})
}

// qiankun 生命周期
export async function bootstrap() {
  // 子应用初始化（只执行一次）
}

export async function mount(props: Record<string, unknown>) {
  app = createApp(App)
  app.use(router)
  // 接收主应用传来的 props
  app.provide('microProps', props)
  app.mount(props.container ? `${props.container} #app` : '#app')
}

export async function unmount() {
  app?.unmount()
  app = null
}

const { name } = require('./package.json')

module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*',  // 允许主应用跨域加载
    },
  },
  configureWebpack: {
    output: {
      library: name,
      libraryTarget: 'umd',  // qiankun 要求 UMD 格式
      jsonpFunction: `webpackJsonp_${name}`,
    },
  },
}

import WujieVue from 'wujie-vue3'
import { setupApp } from 'wujie'

app.use(WujieVue)

// 预加载子应用（可选，提升首次激活速度）
setupApp({
  name: 'order-app',
  url: '//localhost:8001',
  exec: true,  // 预执行 JS，激活时直接切换，无需重新加载
})

<!-- 像使用普通组件一样嵌入子应用 -->
<WujieVue
  name="order-app"
  url="//localhost:8001"
  :props="{ token, onNavigate }"
  @lifecycle="onLifecycle"
/>

export default {
  server: {
    headers: {
      'Access-Control-Allow-Origin': '*',
    },
  },
}

import { createApp, defineComponent, h } from 'vue'
import App from './App.vue'
import router from './router'

class OrderAppElement extends HTMLElement {
  private app: ReturnType<typeof createApp> | null = null
  private mountRoot: ShadowRoot

  constructor() {
    super()
    // 创建 Shadow DOM，open 模式允许外部通过 JS 访问 shadowRoot
    this.mountRoot = this.attachShadow({ mode: 'open' })
  }

  // 元素挂载到 DOM 时触发
  connectedCallback() {
    const container = document.createElement('div')
    this.mountRoot.appendChild(container)

    this.app = createApp(App)
    this.app.use(router)
    this.app.mount(container)
  }

  // 元素从 DOM 移除时触发
  disconnectedCallback() {
    this.app?.unmount()
    this.app = null
  }

  // 监听哪些 attribute 变化
  static get observedAttributes() {
    return ['token', 'locale']
  }

  // attribute 变化时触发
  attributeChangedCallback(name: string, _old: string, newVal: string) {
    if (name === 'token') {
      // 将 token 传入 Vue 应用
      this.app?.provide('token', newVal)
    }
  }
}

// 注册自定义元素
customElements.define('order-app', OrderAppElement)

const router = createRouter({
  history: createWebHistory(
    // 独立运行时用 '/'，在 qiankun 中用主应用分配的 base
    window.__POWERED_BY_QIANKUN__ ? '/order' : '/'
  ),
  routes,
})

// 通过主应用传入的 onNavigate 通知主应用同步 URL
const { onNavigate } = inject('microProps') as MicroProps
onNavigate('/order/detail/123')