<template>
  <div
    v-if="showInstallPrompt"
    class="fixed bottom-4 right-4 z-50 max-w-sm bg-white rounded-lg shadow-lg border border-gray-200 p-4 animate-slide-up"
  >
    <div class="flex items-start space-x-3">
      <div class="flex-shrink-0">
        <div class="w-12 h-12 bg-indigo-100 rounded-lg flex items-center justify-center">
          <svg
            class="w-6 h-6 text-indigo-600"
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 18h.01M8 21h8a2 2 0 002-2V5a2 2 0 00-2-2H8a2 2 0 00-2 2v14a2 2 0 002 2z"
            />
          </svg>
        </div>
      </div>
      <div class="flex-1 min-w-0">
        <h3 class="text-sm font-semibold text-gray-900">
          Installer LeDiscord
        </h3>
        <p class="mt-1 text-sm text-gray-500">
          Installez l'application pour un accès rapide et une meilleure expérience.
        </p>
        <div class="mt-3 flex space-x-2">
          <button
            @click="installApp"
            class="flex-1 bg-indigo-600 text-white text-sm font-medium py-2 px-4 rounded-md hover:bg-indigo-700 transition-colors"
          >
            Installer
          </button>
          <button
            @click="dismissPrompt"
            class="flex-1 bg-gray-100 text-gray-700 text-sm font-medium py-2 px-4 rounded-md hover:bg-gray-200 transition-colors"
          >
            Plus tard
          </button>
        </div>
      </div>
      <button
        @click="dismissPrompt"
        class="flex-shrink-0 text-gray-400 hover:text-gray-500"
      >
        <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from 'vue'

const showInstallPrompt = ref(false)
const deferredPrompt = ref(null)

onMounted(() => {
  // Vérifier si l'app est déjà installée
  if (window.matchMedia('(display-mode: standalone)').matches) {
    return
  }

  // Vérifier si le prompt a été rejeté récemment
  const dismissed = localStorage.getItem('pwa-install-dismissed')
  if (dismissed) {
    const dismissedTime = parseInt(dismissed, 10)
    const daysSinceDismissed = (Date.now() - dismissedTime) / (1000 * 60 * 60 * 24)
    // Réafficher après 7 jours
    if (daysSinceDismissed < 7) {
      return
    }
  }

  // Écouter l'événement beforeinstallprompt
  window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
})

onBeforeUnmount(() => {
  window.removeEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
})

function handleBeforeInstallPrompt(e) {
  // Empêcher le prompt par défaut
  e.preventDefault()
  // Stocker l'événement pour l'utiliser plus tard
  deferredPrompt.value = e
  // Afficher notre prompt personnalisé
  showInstallPrompt.value = true
}

async function installApp() {
  if (!deferredPrompt.value) {
    return
  }

  try {
    // Afficher le prompt d'installation
    deferredPrompt.value.prompt()
    
    // Attendre la réponse de l'utilisateur
    const { outcome } = await deferredPrompt.value.userChoice
    
    if (outcome === 'accepted') {
      console.log('✅ PWA installée avec succès')
    } else {
      console.log('❌ Installation PWA annulée')
    }
    
    // Réinitialiser
    deferredPrompt.value = null
    showInstallPrompt.value = false
  } catch (error) {
    console.error('Erreur lors de l\'installation:', error)
  }
}

function dismissPrompt() {
  showInstallPrompt.value = false
  // Enregistrer le rejet avec timestamp
  localStorage.setItem('pwa-install-dismissed', Date.now().toString())
}
</script>

<style scoped>
@keyframes slide-up {
  from {
    transform: translateY(100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.animate-slide-up {
  animation: slide-up 0.3s ease-out;
}
</style>

