<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'

const showAndroidInstall = ref(false)
const showIOSHint = ref(false)
const dismissed = ref(false)
let deferredPrompt: BeforeInstallPromptEvent | null = null

interface BeforeInstallPromptEvent extends Event {
  prompt: () => Promise<void>
  userChoice: Promise<{ outcome: 'accepted' | 'dismissed' }>
}

const visible = computed(
  () => !dismissed.value && (showAndroidInstall.value || showIOSHint.value),
)

onMounted(() => {
  const isStandalone =
    window.matchMedia('(display-mode: standalone)').matches ||
    (window.navigator as Navigator & { standalone?: boolean }).standalone

  if (isStandalone) return

  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
  if (isIOS) {
    showIOSHint.value = true
    return
  }

  window.addEventListener('beforeinstallprompt', (event) => {
    event.preventDefault()
    deferredPrompt = event as BeforeInstallPromptEvent
    showAndroidInstall.value = true
  })
})

async function installApp() {
  if (!deferredPrompt) return
  await deferredPrompt.prompt()
  await deferredPrompt.userChoice
  deferredPrompt = null
  showAndroidInstall.value = false
}

function dismiss() {
  dismissed.value = true
}
</script>

<template>
  <div v-if="visible" class="install-app">
    <div class="install-app__content">
      <p v-if="showAndroidInstall" class="install-app__text">
        可将「道德经」安装到桌面，像 App 一样使用。
      </p>
      <p v-else class="install-app__text">
        iPhone：点击 Safari 底部分享按钮，选择「添加到主屏幕」。
      </p>
      <div class="install-app__actions">
        <button
          v-if="showAndroidInstall"
          type="button"
          class="install-app__primary"
          @click="installApp"
        >
          安装应用
        </button>
        <button type="button" class="install-app__ghost" @click="dismiss">知道了</button>
      </div>
    </div>
  </div>
</template>

<style scoped>
.install-app {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 100;
  max-width: min(92vw, 360px);
}

.install-app__content {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid var(--vp-c-divider);
  background: var(--vp-c-bg-soft);
  box-shadow: var(--vp-shadow-3);
}

.install-app__text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--vp-c-text-1);
}

.install-app__actions {
  display: flex;
  gap: 8px;
}

.install-app__primary,
.install-app__ghost {
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  cursor: pointer;
}

.install-app__primary {
  border: none;
  background: var(--vp-c-brand-1);
  color: var(--vp-c-bg);
}

.install-app__ghost {
  border: 1px solid var(--vp-c-divider);
  background: transparent;
  color: var(--vp-c-text-2);
}
</style>
