import { createApp } from 'vue'
import { createPinia } from 'pinia'
import router from './router'
import App from './App.vue'
import './assets/styles/main.css'

const app = createApp(App)
const pinia = createPinia()

app.use(pinia)
app.use(router)

// WebSocket 初始化
// 在 Vue 应用挂载后初始化 WebSocket 连接
import { useWebSocketStore } from './stores/websocket'
import { useScreenStore } from './stores/screen'

// 等待 Pinia 初始化完成后初始化 WebSocket
const initWebSocket = () => {
  const wsStore = useWebSocketStore()
  const screenStore = useScreenStore()

  // 设置屏幕 Store 引用
  wsStore.setScreenStore(screenStore)

  // 监听 WebSocket 连接状态变化
  wsStore.$subscribe((mutation, state) => {
    screenStore.setWsConnected(state.isConnected)
  })

  // 初始化 WebSocket 连接
  wsStore.init()
  
  console.log('[App] WebSocket 初始化完成')
}

// 组件挂载后初始化
app.mount('#app')

// 在 nextTick 后初始化 WebSocket，确保 Store 已就绪
import { nextTick } from 'vue'
nextTick(() => {
  initWebSocket()
})
