<template>
  <div v-if="showPrompt" class="pwa-install-prompt">
    <q-banner class="install-banner" rounded>
      <template v-slot:avatar>
        <q-icon name="get_app" color="primary" size="md" />
      </template>
      
      <div class="banner-content">
        <div class="banner-title">安裝 Drama Ling 應用程式</div>
        <div class="banner-description">
          在桌面安裝應用程式，享受更好的學習體驗：
        </div>
        
        <ul class="features-list">
          <li>離線學習功能</li>
          <li>快速啟動和存取</li>
          <li>推播通知提醒</li>
          <li>全螢幕沉浸體驗</li>
        </ul>
      </div>
      
      <template v-slot:action>
        <div class="banner-actions">
          <q-btn
            color="primary"
            label="立即安裝"
            @click="installApp"
            :loading="isInstalling"
            no-caps
          />
          <q-btn
            flat
            label="稍後提醒"
            @click="postponeInstall"
            no-caps
            class="q-ml-sm"
          />
          <q-btn
            flat
            icon="close"
            @click="dismissPermanently"
            size="sm"
            class="q-ml-sm"
          />
        </div>
      </template>
    </q-banner>
  </div>
</template>

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

const $q = useQuasar()

// 響應式數據
const showPrompt = ref(false)
const isInstalling = ref(false)
const deferredPrompt = ref<any>(null)

// PWA 安裝狀態
const isStandalone = ref(false)
const isInstalled = ref(false)

// 檢查 PWA 安裝狀態
const checkPWAStatus = () => {
  // 檢查是否已在獨立模式下運行 (已安裝)
  isStandalone.value = window.matchMedia('(display-mode: standalone)').matches || 
                      ('standalone' in window.navigator && (window.navigator as any).standalone === true)
  
  // 檢查用戶偏好設定
  const userPreference = localStorage.getItem('pwa-install-preference')
  const lastPromptTime = localStorage.getItem('pwa-last-prompt')
  
  // 如果已安裝或用戶已永久拒絕，不顯示提示
  if (isStandalone.value || userPreference === 'never') {
    isInstalled.value = true
    return false
  }
  
  // 如果用戶選擇稍後提醒，檢查是否已過足夠時間 (7天)
  if (userPreference === 'later' && lastPromptTime) {
    const daysSincePrompt = (Date.now() - parseInt(lastPromptTime)) / (1000 * 60 * 60 * 24)
    if (daysSincePrompt < 7) {
      return false
    }
  }
  
  return true
}

// 處理 beforeinstallprompt 事件
const handleBeforeInstallPrompt = (e: Event) => {
  // 阻止瀏覽器預設的安裝提示
  e.preventDefault()
  
  // 儲存事件以供後續使用
  deferredPrompt.value = e
  
  // 檢查是否應該顯示自訂提示
  if (checkPWAStatus()) {
    showPrompt.value = true
  }
}

// 安裝應用程式
const installApp = async () => {
  if (!deferredPrompt.value) {
    // 如果沒有 beforeinstallprompt 事件，顯示手動安裝指引
    showManualInstallInstructions()
    return
  }
  
  isInstalling.value = true
  
  try {
    // 顯示安裝提示
    const result = await deferredPrompt.value.prompt()
    
    // 等待用戶回應
    const choiceResult = await deferredPrompt.value.userChoice
    
    if (choiceResult.outcome === 'accepted') {
      // 用戶接受安裝
      $q.notify({
        type: 'positive',
        message: '應用程式安裝成功！',
        icon: 'check_circle',
        timeout: 3000
      })
      
      // 記錄安裝成功
      localStorage.setItem('pwa-install-preference', 'installed')
      localStorage.setItem('pwa-install-time', Date.now().toString())
      
      showPrompt.value = false
    } else {
      // 用戶拒絕安裝
      $q.notify({
        type: 'info',
        message: '你可以稍後從瀏覽器選單安裝應用程式',
        icon: 'info',
        timeout: 3000
      })
    }
    
    // 清除 deferredPrompt
    deferredPrompt.value = null
    
  } catch (error) {
    console.error('安裝失敗:', error)
    $q.notify({
      type: 'negative',
      message: '安裝過程發生錯誤',
      icon: 'error',
      timeout: 3000
    })
  } finally {
    isInstalling.value = false
  }
}

// 稍後提醒
const postponeInstall = () => {
  localStorage.setItem('pwa-install-preference', 'later')
  localStorage.setItem('pwa-last-prompt', Date.now().toString())
  showPrompt.value = false
  
  $q.notify({
    type: 'info',
    message: '我們會在 7 天後再次提醒你',
    icon: 'schedule',
    timeout: 3000
  })
}

// 永久拒絕
const dismissPermanently = () => {
  localStorage.setItem('pwa-install-preference', 'never')
  showPrompt.value = false
  
  $q.notify({
    type: 'info',
    message: '你可以隨時從設定中啟用安裝提示',
    icon: 'settings',
    timeout: 3000
  })
}

// 顯示手動安裝指引
const showManualInstallInstructions = () => {
  const isIOS = /iPad|iPhone|iPod/.test(navigator.userAgent)
  const isAndroid = /Android/.test(navigator.userAgent)
  
  let instructions = ''
  
  if (isIOS) {
    instructions = '點擊 Safari 底部的分享按鈕，然後選擇「加入主畫面」'
  } else if (isAndroid) {
    instructions = '點擊瀏覽器選單中的「安裝應用程式」或「加到主畫面」'
  } else {
    instructions = '點擊網址列右側的安裝圖示，或從瀏覽器選單選擇「安裝」'
  }
  
  $q.dialog({
    title: '手動安裝應用程式',
    message: instructions,
    html: true,
    ok: {
      label: '我知道了',
      color: 'primary'
    }
  })
}

// 檢查應用程式是否已成功安裝
const handleAppInstalled = () => {
  console.log('PWA 安裝成功')
  
  $q.notify({
    type: 'positive',
    message: '歡迎使用 Drama Ling 應用程式！',
    icon: 'celebration',
    timeout: 5000,
    actions: [{
      label: '開始學習',
      color: 'white',
      handler: () => {
        // 可以跳轉到學習頁面
      }
    }]
  })
  
  // 記錄安裝狀態
  localStorage.setItem('pwa-install-preference', 'installed')
  localStorage.setItem('pwa-install-time', Date.now().toString())
  
  showPrompt.value = false
  isInstalled.value = true
}

// 重置安裝提示 (用於測試或設定)
const resetInstallPrompt = () => {
  localStorage.removeItem('pwa-install-preference')
  localStorage.removeItem('pwa-last-prompt')
  localStorage.removeItem('pwa-install-time')
  
  if (checkPWAStatus() && deferredPrompt.value) {
    showPrompt.value = true
  }
}

// 生命週期
onMounted(() => {
  // 監聽 PWA 安裝相關事件
  window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
  window.addEventListener('appinstalled', handleAppInstalled)
  
  // 初始化檢查
  setTimeout(() => {
    if (checkPWAStatus()) {
      // 如果沒有 beforeinstallprompt 事件但符合顯示條件，顯示簡化版提示
      if (!deferredPrompt.value) {
        const visitCount = parseInt(localStorage.getItem('visit-count') || '0')
        if (visitCount >= 3) { // 訪問 3 次後顯示提示
          showPrompt.value = true
        }
      }
    }
  }, 3000) // 頁面載入 3 秒後顯示
  
  // 增加訪問計數
  const visitCount = parseInt(localStorage.getItem('visit-count') || '0')
  localStorage.setItem('visit-count', (visitCount + 1).toString())
})

onUnmounted(() => {
  window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
  window.removeEventListener('appinstalled', handleAppInstalled)
})

// 暴露方法供外部使用
defineExpose({
  installApp,
  resetInstallPrompt,
  isInstalled,
  isStandalone
})
</script>

<style lang="scss" scoped>
.pwa-install-prompt {
  position: fixed;
  bottom: $space-4;
  left: $space-4;
  right: $space-4;
  z-index: 1000;
  max-width: 600px;
  margin: 0 auto;
  
  @media (max-width: 768px) {
    bottom: $space-3;
    left: $space-3;
    right: $space-3;
  }
}

.install-banner {
  background: linear-gradient(135deg, $primary-teal 0%, $secondary-purple 100%);
  color: white;
  border-radius: $radius-xl;
  box-shadow: $shadow-xl;
  backdrop-filter: blur(10px);
  
  :deep(.q-banner__content) {
    padding: $space-4;
  }
  
  :deep(.q-banner__avatar) {
    margin-right: $space-4;
    align-self: flex-start;
    margin-top: $space-1;
  }
}

.banner-content {
  flex: 1;
}

.banner-title {
  font-size: $text-lg;
  font-weight: 700;
  margin-bottom: $space-2;
  color: white;
}

.banner-description {
  font-size: $text-base;
  color: rgba(white, 0.9);
  margin-bottom: $space-3;
}

.features-list {
  margin: 0;
  padding-left: $space-5;
  
  li {
    font-size: $text-sm;
    color: rgba(white, 0.8);
    margin-bottom: $space-1;
    
    &:last-child {
      margin-bottom: 0;
    }
  }
}

.banner-actions {
  display: flex;
  flex-direction: column;
  gap: $space-2;
  align-items: stretch;
  margin-top: $space-4;
  
  @media (min-width: 600px) {
    flex-direction: row;
    align-items: center;
    margin-top: 0;
  }
  
  .q-btn {
    min-width: 100px;
    
    @media (max-width: 599px) {
      width: 100%;
    }
  }
}

// 動畫效果
.pwa-install-prompt {
  animation: slideUp 0.5s ease-out;
}

@keyframes slideUp {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

// 響應式調整
@media (max-width: 480px) {
  .banner-content {
    .banner-title {
      font-size: $text-base;
    }
    
    .banner-description {
      font-size: $text-sm;
    }
    
    .features-list {
      padding-left: $space-4;
      
      li {
        font-size: $text-xs;
      }
    }
  }
}
</style>