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

export const VersionChecker = defineComponent({
  name: 'VersionChecker',
  props: {
    metaFileName: { type: String, default: 'meta.json' },
    storageKey: { type: String, default: 'app-version' },
    interval: { type: Number, default: 60000 },
  },
  setup(props) {
    const show = ref(false)
    let timer: ReturnType<typeof setInterval>

    const check = async () => {
      try {
        const url = `/${props.metaFileName}?t=${Date.now()}`
        const res = await fetch(url)
        const { buildTime: latest } = await res.json()
        const local = localStorage.getItem(props.storageKey)
        if (local && local !== latest) show.value = true
        localStorage.setItem(props.storageKey, latest)
      } catch {}
    }

    onMounted(() => {
      check()
      timer = setInterval(check, props.interval)
    })
    onUnmounted(() => clearInterval(timer))

    return { show, refresh: () => location.reload(true), dismiss: () => show.value = false }
  },
  render() {
    if (!this.show) return null
    return h('div', { class: 'version-update-notification' }, [
      h('span', { class: 'message' }, '📄 内容已更新，请刷新页面'),
      h('div', { class: 'actions' }, [
        h('button', { class: 'refresh', onClick: this.refresh }, '刷新'),
        h('button', { class: 'dismiss', onClick: this.dismiss }, '忽略')
      ])
    ])
  }
})