import { ref, onMounted, onUnmounted } from 'vue'

/**
 * 设备类型枚举
 */
export enum DeviceType {
    MOBILE = 'mobile',  // h5移动端
    DESKTOP = 'desktop' // web桌面端
}

/**
 * 屏幕尺寸断点
 */
export const BREAKPOINTS = {
    mobile: 768,   // 小于768px为移动端(h5)
    desktop: 768   // 大于等于768px为桌面端(web)
}

/**
 * 检测当前设备类型
 */
export function getDeviceType(): DeviceType {
    const width = window.innerWidth
    
    if (width < BREAKPOINTS.mobile) {
        return DeviceType.MOBILE  // h5移动端
    } else {
        return DeviceType.DESKTOP // web桌面端
    }
}

/**
 * 检测是否为移动端
 */
export function isMobile(): boolean {
    return getDeviceType() === DeviceType.MOBILE
}

/**
 * 检测是否为桌面端
 */
export function isDesktop(): boolean {
    return getDeviceType() === DeviceType.DESKTOP
}

/**
 * 响应式设备类型 Hook
 */
export function useDevice() {
    const deviceType = ref<DeviceType>(getDeviceType())
    const isMobileDevice = ref(isMobile())
    const isDesktopDevice = ref(isDesktop())

    const updateDeviceType = () => {
        deviceType.value = getDeviceType()
        isMobileDevice.value = isMobile()
        isDesktopDevice.value = isDesktop()
    }

    onMounted(() => {
        window.addEventListener('resize', updateDeviceType)
    })

    onUnmounted(() => {
        window.removeEventListener('resize', updateDeviceType)
    })

    return {
        deviceType,
        isMobileDevice,
        isDesktopDevice
    }
}

/**
 * 根据设备类型获取对应的组件路径
 */
export function getComponentPath(basePath: string, deviceType?: DeviceType): string {
    const currentDeviceType = deviceType || getDeviceType()
    
    // 如果是移动端(h5)，尝试加载移动端版本
    if (currentDeviceType === DeviceType.MOBILE) {
        const mobilePath = basePath.replace('.vue', '.mobile.vue')
        return mobilePath
    }
    
    // 默认返回桌面版本(web)
    return basePath
}

/**
 * 动态导入组件，支持回退机制
 */
export async function importResponsiveComponent(basePath: string) {
    const deviceType = getDeviceType()
    
    // 尝试加载设备特定的组件
    if (deviceType === DeviceType.MOBILE) {
        try {
            const mobilePath = basePath.replace('.vue', '.mobile.vue')
            return await import(/* @vite-ignore */ mobilePath)
        } catch {
            // 移动端组件不存在，回退到默认组件
        }
    }
    
    // 加载默认组件(桌面端/web)
    return await import(/* @vite-ignore */ basePath)
}
