import type { VersionInfo } from '@/apis/domains/version-info';
import { useQuery } from '@tanstack/vue-query';
import axios from 'axios';
import { useThemeVars } from 'naive-ui';
import { h, ref, watch } from 'vue';

export function useVersionCheckQuery() {
  const localVersionInfo = ref<VersionInfo>();
  const dialogShow = ref<boolean>(false);
  const themeVars = useThemeVars();

  const { data: remoteVersionInfo, dataUpdatedAt } = useQuery({
    queryKey: ['version-check'],
    queryFn: async () => {
      const { data } = await axios.get<VersionInfo>(`/manifest.json?t=${Date.now()}`);
      return data;
    },
    refetchInterval: 10 * 1000,
  });

  watch(dataUpdatedAt, () => {
    const newVersionInfo = remoteVersionInfo.value;
    if (!newVersionInfo) return;

    if (!localVersionInfo.value) {
      localVersionInfo.value = newVersionInfo;
      return;
    }

    const { version: localVersion, buildTime: localBuildTime } = localVersionInfo.value;
    const { version: remoteVersion, buildTime: remoteBuildTime } = newVersionInfo;

    if ((localVersion !== remoteVersion || localBuildTime !== remoteBuildTime) && !dialogShow.value) {
      dialogShow.value = true;
      window.$dialog.info({
        title: '发现新版本',
        content: () =>
          h('div', {}, [
            h('div', {}, { default: () => `当前版本：${localVersionInfo.value?.version}` }),
            h('div', {}, { default: () => `最新版本：${newVersionInfo.version}` }),
            h('div', {}, { default: () => '请点击刷新页面以更新' }),
            h('div', { style: { marginTop: '8px', fontWeight: '700', color: themeVars.value.warningColor } }, { default: () => '⚠️ 注意，更新后可能需要重新登录！' }),
          ]),
        positiveText: '刷新页面',
        maskClosable: false,
        onPositiveClick: () => {
          window.location.reload();
        },
        negativeText: '稍后检查',
        onNegativeClick: () => {
          dialogShow.value = false;
        },
        onClose: () => {
          dialogShow.value = false;
        },
      });
    }
  });
}