import { defineStore } from 'pinia'
import { getDeviceMode, setDeviceMode } from '@/utils/device'

/**
 * 全局设备端 store：
 * - pc   ：PC 端展示
 * - mobile：移动端展示（窄屏自适应）
 */
export const useDeviceStore = defineStore('device', {
  state: () => ({
    mode: getDeviceMode(),
    isMobile: getDeviceMode() === 'mobile',
  }),
  actions: {
    switchTo(mode) {
      setDeviceMode(mode)
      this.mode = mode
      this.isMobile = mode === 'mobile'
    },
  },
})

// 监听 utils/device.js 派发的全局事件，确保 store 与工具层手动覆盖值始终一致
if (typeof window !== 'undefined') {
  window.addEventListener('mf-device-change', (e) => {
    const store = useDeviceStore()
    const mode = e.detail
    if (mode === 'pc' || mode === 'mobile') {
      store.mode = mode
      store.isMobile = mode === 'mobile'
    }
  })
}