<template>
  <button
    v-if="canInstall"
    type="button"
    class="pwa-install-button"
    aria-label="安装 RunForge 应用"
    @click="installApp"
  >
    <icon-download class="install-icon" />
    <span>安装应用</span>
  </button>
</template>

<script setup>
import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
import { Message, Modal } from '@arco-design/web-vue'
import { isElectron } from '@/utils/electron'

const installPrompt = ref(null)
const isInstalled = ref(false)
const isIos = /iphone|ipad|ipod/i.test(navigator.userAgent)

const canInstall = computed(() => {
  return !isElectron() && !isInstalled.value && (Boolean(installPrompt.value) || isIos)
})

function handleBeforeInstallPrompt(event) {
  event.preventDefault()
  installPrompt.value = event
}

function handleAppInstalled() {
  installPrompt.value = null
  isInstalled.value = true
  Message.success('RunForge 已安装')
}

async function installApp() {
  if (isIos && !installPrompt.value) {
    Modal.info({
      title: '安装 RunForge',
      content: '请点击浏览器底部的“分享”按钮，然后选择“添加到主屏幕”。'
    })
    return
  }

  const promptEvent = installPrompt.value
  if (!promptEvent) return

  await promptEvent.prompt()
  const { outcome } = await promptEvent.userChoice
  installPrompt.value = null

  if (outcome === 'accepted') {
    Message.success('正在安装 RunForge')
  }
}

onMounted(() => {
  isInstalled.value = window.matchMedia('(display-mode: standalone)').matches
    || window.navigator.standalone === true
  window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
  window.addEventListener('appinstalled', handleAppInstalled)
})

onBeforeUnmount(() => {
  window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
  window.removeEventListener('appinstalled', handleAppInstalled)
})
</script>

<style scoped>
.pwa-install-button {
  position: fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  background: rgb(var(--primary-6, 22, 93, 255));
  box-shadow: 0 8px 24px rgba(22, 93, 255, 0.28);
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.pwa-install-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(22, 93, 255, 0.36);
}

.pwa-install-button:focus-visible {
  outline: 3px solid rgba(22, 93, 255, 0.3);
  outline-offset: 3px;
}

.install-icon {
  font-size: 17px;
}

@media (max-width: 768px) {
  .pwa-install-button {
    right: max(14px, env(safe-area-inset-right));
    bottom: max(14px, env(safe-area-inset-bottom));
    padding: 9px 14px;
  }
}
</style>
