<template>
  <transition
    enter-active-class="transition ease-out duration-300"
    enter-from-class="opacity-0"
    enter-to-class="opacity-100"
    leave-active-class="transition ease-in duration-200"
    leave-from-class="opacity-100"
    leave-to-class="opacity-0"
  >
    <div
      v-if="show"
      class="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-60 p-4"
      @click.self="close"
    >
      <div
        class="bg-white rounded-2xl shadow-2xl max-w-md w-full max-h-[90vh] overflow-y-auto"
        @click.stop
      >
        <!-- Header -->
        <div class="sticky top-0 bg-white border-b border-gray-200 px-6 py-4 flex items-center justify-between rounded-t-2xl">
          <h3 class="text-xl font-bold text-gray-900">Installer l'application</h3>
          <button
            @click="close"
            class="text-gray-400 hover:text-gray-600 transition-colors"
          >
            <X class="w-6 h-6" />
          </button>
        </div>

        <!-- Content -->
        <div class="px-6 py-6">
          <div v-if="isIOS" class="space-y-6">
            <!-- Step 1 -->
            <div class="flex items-start space-x-4">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg shadow-lg">
                  1
                </div>
              </div>
              <div class="flex-1 pt-1">
                <h4 class="font-semibold text-gray-900 mb-2">Appuyez sur le bouton de partage</h4>
                <p class="text-sm text-gray-600 mb-3">
                  En bas de l'écran, dans la barre d'outils Safari
                </p>
                <div class="bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-200">
                  <div class="flex items-center justify-center space-x-2">
                    <div class="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center">
                      <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8.684 13.342C8.886 12.938 9 12.482 9 12c0-.482-.114-.938-.316-1.342m0 2.684a3 3 0 110-2.684m0 2.684l6.632 3.316m-6.632-6l6.632-3.316m0 0a3 3 0 105.367-2.684 3 3 0 00-5.367 2.684zm0 9.316a3 3 0 105.368 2.684 3 3 0 00-5.368-2.684z" />
                      </svg>
                    </div>
                    <ArrowDown class="w-5 h-5 text-gray-400" />
                    <p class="text-xs text-gray-500">Bouton de partage</p>
                  </div>
                </div>
              </div>
            </div>

            <!-- Step 2 -->
            <div class="flex items-start space-x-4">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg shadow-lg">
                  2
                </div>
              </div>
              <div class="flex-1 pt-1">
                <h4 class="font-semibold text-gray-900 mb-2">Sélectionnez "Sur l'écran d'accueil"</h4>
                <p class="text-sm text-gray-600 mb-3">
                  Faites défiler le menu de partage vers le haut
                </p>
                <div class="bg-gradient-to-br from-primary-50 to-purple-50 rounded-lg p-4 border-2 border-primary-200">
                  <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                      <svg class="w-6 h-6 text-primary-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 class="flex-1">
                      <p class="font-semibold text-primary-700 text-sm">Sur l'écran d'accueil</p>
                      <p class="text-xs text-primary-600">Ajouter à l'écran d'accueil</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Step 3 -->
            <div class="flex items-start space-x-4">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg shadow-lg">
                  3
                </div>
              </div>
              <div class="flex-1 pt-1">
                <h4 class="font-semibold text-gray-900 mb-2">Confirmez l'installation</h4>
                <p class="text-sm text-gray-600 mb-3">
                  Appuyez sur "Ajouter" dans la popup de confirmation
                </p>
                <div class="bg-green-50 rounded-lg p-4 border-2 border-green-200">
                  <div class="flex items-center space-x-3">
                    <CheckCircle class="w-6 h-6 text-green-600" />
                    <p class="text-sm text-green-700 font-medium">L'application apparaîtra sur votre écran d'accueil !</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Android -->
          <div v-else class="space-y-6">
            <!-- Step 1 -->
            <div class="flex items-start space-x-4">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg shadow-lg">
                  1
                </div>
              </div>
              <div class="flex-1 pt-1">
                <h4 class="font-semibold text-gray-900 mb-2">Appuyez sur le menu</h4>
                <p class="text-sm text-gray-600 mb-3">
                  En haut à droite de votre navigateur (⋮)
                </p>
                <div class="bg-gray-50 rounded-lg p-4 border-2 border-dashed border-gray-200">
                  <div class="flex items-center justify-center">
                    <div class="w-12 h-12 bg-gray-200 rounded-lg flex items-center justify-center">
                      <svg class="w-6 h-6 text-gray-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 5v.01M12 12v.01M12 19v.01M12 6a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2zm0 7a1 1 0 110-2 1 1 0 010 2z" />
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Step 2 -->
            <div class="flex items-start space-x-4">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg shadow-lg">
                  2
                </div>
              </div>
              <div class="flex-1 pt-1">
                <h4 class="font-semibold text-gray-900 mb-2">Sélectionnez "Ajouter à l'écran d'accueil"</h4>
                <p class="text-sm text-gray-600 mb-3">
                  Ou "Installer l'application" selon votre navigateur
                </p>
                <div class="bg-gradient-to-br from-primary-50 to-purple-50 rounded-lg p-4 border-2 border-primary-200">
                  <div class="flex items-center space-x-3">
                    <div class="w-10 h-10 bg-primary-100 rounded-lg flex items-center justify-center">
                      <svg class="w-6 h-6 text-primary-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 class="flex-1">
                      <p class="font-semibold text-primary-700 text-sm">Ajouter à l'écran d'accueil</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <!-- Step 3 -->
            <div class="flex items-start space-x-4">
              <div class="flex-shrink-0">
                <div class="w-10 h-10 rounded-full bg-gradient-to-br from-primary-500 to-purple-600 flex items-center justify-center text-white font-bold text-lg shadow-lg">
                  3
                </div>
              </div>
              <div class="flex-1 pt-1">
                <h4 class="font-semibold text-gray-900 mb-2">Confirmez l'installation</h4>
                <p class="text-sm text-gray-600 mb-3">
                  Appuyez sur "Ajouter" ou "Installer" dans la popup
                </p>
                <div class="bg-green-50 rounded-lg p-4 border-2 border-green-200">
                  <div class="flex items-center space-x-3">
                    <CheckCircle class="w-6 h-6 text-green-600" />
                    <p class="text-sm text-green-700 font-medium">L'application sera installée !</p>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <!-- Benefits -->
          <div class="mt-6 pt-6 border-t border-gray-200">
            <p class="text-sm font-semibold text-gray-900 mb-3">Une fois installée, vous pourrez :</p>
            <div class="space-y-2">
              <div class="flex items-center space-x-2 text-sm text-gray-600">
                <CheckCircle class="w-5 h-5 text-green-500 flex-shrink-0" />
                <span>Accéder rapidement à l'app depuis l'écran d'accueil</span>
              </div>
              <div class="flex items-center space-x-2 text-sm text-gray-600">
                <CheckCircle class="w-5 h-5 text-green-500 flex-shrink-0" />
                <span>Recevoir des notifications push</span>
              </div>
              <div class="flex items-center space-x-2 text-sm text-gray-600">
                <CheckCircle class="w-5 h-5 text-green-500 flex-shrink-0" />
                <span>Utiliser l'app hors ligne (contenu mis en cache)</span>
              </div>
              <div class="flex items-center space-x-2 text-sm text-gray-600">
                <CheckCircle class="w-5 h-5 text-green-500 flex-shrink-0" />
                <span>Rester connecté automatiquement</span>
              </div>
            </div>
          </div>
        </div>

        <!-- Footer -->
        <div class="sticky bottom-0 bg-gray-50 border-t border-gray-200 px-6 py-4 rounded-b-2xl">
          <button
            @click="close"
            class="w-full bg-primary-600 hover:bg-primary-700 text-white font-medium py-3 px-4 rounded-lg transition-colors shadow-lg hover:shadow-xl"
          >
            J'ai compris
          </button>
        </div>
      </div>
    </div>
  </transition>
</template>

<script setup>
import { computed } from 'vue'
import { X, ArrowDown, CheckCircle } from 'lucide-vue-next'

const props = defineProps({
  show: {
    type: Boolean,
    default: false
  },
  isIOS: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['close'])

function close() {
  emit('close')
}
</script>


