export const usePageLoaded = () => useState<boolean>('isPageloaded', () => false)
export const useOpenSharesPopCate = () => useState<boolean>('isOpenSharesPopCate', () => false)
export const useMobileDevice = () => useState<boolean>('mobileDevice', () => false)
export const useUserAgentInfo = () => useState<string>('userAgentInfo', () => '')
export const useTopBarActive = () => useState<boolean>('topBarActive', () => false)
export const useFooter = () => useState<object>('footerData', () => ({}))
export const useSiteInfoData = () => useState<object>('siteInfoData', () => ({}))
export const useIBMBToken = () => useState<string>('IBMBToken', () => '')
export const useIsRedirecting = () => useState<boolean>('isRedirecting', () => false)

// 公司資料
export const useGetCompany = () => useState<Array<any>>('getcompanyData', () => [])

// 標籤們
export const useProductTags = () => useState<Array<string>>('productTags', () => [])
export const usePostMarketTags = () => useState<Array<string>>('postMarketTags', () => [])
export const usePostResourceTags = () => useState<Array<string>>('postResourceTags', () => [])

// export const useGetCompany = () => {
//     return useAsyncData('companyData', async () => {
//       const response = await fetch('/api/get_company', {
//         method: 'GET',
//         headers: { 'Content-Type': 'application/json' }
//       })
//       if (!response.ok) throw new Error('網路請求失敗')
//       return response.json()
//     }, {
//       server: false, // 確保只在 Client 端執行
//       lazy: true,    // 只在需要時執行，避免 SSR 時觸發
//     })
//   }

export const useBack = () => {
    const router = useRouter()
    
    // 檢查是否可以返回上一頁的響應式變數
    const canGoBack = computed(() => {
        if (process.client) {
            return window.history.state.back !== null
        }
        return false
    })
    
    const goBack = () => {
        // 檢查是否有歷史記錄可以返回
        if (process.client && window.history.state.back !== null) {
            // 使用瀏覽器的歷史記錄返回
            window.history.back()
        }
    }
    
    return {
        goBack,
        canGoBack
    }
}

export const useGetMenuData = () => {
    const menuData = useState('menuData', () => null)
    const error = useState('menuError', () => null)

    if (menuData.value === null) {
        const { data, error: fetchError } = useAsyncData(
            'menuData',
            () => $fetch('/api/get_single_type?id=main_menu', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
        )
        menuData.value = data.value
        error.value = fetchError.value
    }

    return { menuData, error }
}

export const useGetSeoData = async () => {
    const seoData = useState('seoData', () => null)
    const error = useState('seoError', () => null)

    if (seoData.value === null) {
        const { data, error: fetchError } = await useAsyncData(
            'seoData',
            () => $fetch('/api/get_single_type?id=seo', {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json'
                }
            })
        )
        seoData.value = data.value
        error.value = fetchError.value
    }

    return { seoData, error }
}

export const useViewport = () => useState<object>('viewport', () => ({
    width: process.client ? window.innerWidth : 0,
    height: process.client ? window.innerHeight : 0,
    isMobile: process.client ? window.innerWidth < 1025 : false,
    isDesktop: process.client ? window.innerWidth >= 1025 : false,
}))

export const useUpdateViewport = () => {
    useViewport().value = {
        width: process.client ? window.innerWidth : 0,
        height: process.client ? window.innerHeight : 0,
        isMobile: process.client ? window.innerWidth < 1025 : false,
        isDesktop: process.client ? window.innerWidth >= 1025 : false,
    }

    if (process.client) {
        window.addEventListener('resize', useUpdateViewport)
    }
}
