<template>
  <div v-show="showNotice" class="lofty-update-notice lofty-reset-style">
    <span v-if="showBuy" @click="buy">
      We’re now officially on the WordPress Marketplace! Enjoy seamless Lofty CRM integration, easy page migration, and a plug-and-play experience. Whitelist users can access Search Page functions only
      <span class="link">upgrade now to unlock all features!</span>
    </span>
    <span v-if="showBuyAgain" @click="buy">
      Your subscription has expired, and we would love to continue supporting your real estate career.
      <span class="link"> Renew your subscription now!</span>
    </span>
    <span v-if="showUpdate" @click="downLoad">
        A new version of the plugin is now available! Upgrade to the latest version for improved features, enhanced performance, and a better experience.
        <span class="link">Update now to stay ahead! </span><i class="lofty_iconfont lofty-icon-close" @click.stop="close"></i>
    </span>
  </div>
</template>

<script setup>
import http from '@/api'
import { getStorage, setStorage } from "@/util/index.js";
import { userState } from "@/common/sign-log/user.js";

const showNotice = computed(()=> showUpdate.value || showBuy.value || showBuyAgain.value)
const [showUpdate, showBuy, showBuyAgain] = [ref(false), ref(false), ref(false)]
const newVersion = ref('')
const currentVersion = ref('')
const versionMap = getStorage('lofty-version-map') || {}
getNewestVersion()
async function getNewestVersion() {
  const { data } = await http.get('/version/admin/new');
  if(data) {
    if(!data.purchase && data.hasEverPurchase) {
      showBuyAgain.value = true
    } else if(data.white && !data.hasEverPurchase) {
      showBuy.value = true
    }
    newVersion.value = data.pluginVersion.version
    console.log('newVersion.value', newVersion.value)
    if(data.purchase) {
      userState.permission = true
      getCurrentVersion();
    }
  }
}

async function getCurrentVersion() {
  const resp = await http.get('/get-current-version');
  if(resp.status?.code !== 200){
    throw Error(resp.status?.message || 'fetch current version failed')
  }
  currentVersion.value = resp?.data || ''
  console.log('currentVersion.value', currentVersion.value)
  if(currentVersion.value !== newVersion.value && !versionMap[newVersion.value]) {
      showUpdate.value = true
  }
}
function downLoad() {
  window.open('https://wordpress.org/plugins/lofty-idx')
}

function buy() {
  window.open('https://crm.lofty.com/admin/home/buyWordpressPlugin')
}
function close() {
  versionMap[newVersion.value] = true
  setStorage('lofty-version-map', versionMap)
  showUpdate.value = false
}

</script>

<style scoped lang="scss">
.lofty-update-notice {
  display: flex;
  line-height: 1.4;
  padding: 11px 15px;
  font-size: 14px;
  margin: 16px 20px 0 2px;
  width: fit-content;
  background: #fff;
  border: 1px solid #c3c4c7;
  border-left: 4px solid #dba617;
  box-shadow: 0 1px 1px rgba(0, 0, 0, .04);
  cursor: pointer;
  .lofty-icon-close {
    margin-left: 10px;
    font-size: 14px;
  }
  .link {
    color: #0d6efd;
    text-decoration: underline;
  }
}
</style>