<template>
  <div v-if="showInstallPrompt" class="install-prompt glass-panel unselectable">
    <div class="prompt-content">
      <span class="prompt-text">Install app for faster access</span>
      <div class="prompt-actions">
        <button @click="installPWA" class="install-btn" v-ripple>Install</button>
        <button @click="dismissPrompt" class="dismiss-btn" v-ripple>✕</button>
      </div>
    </div>
  </div>
</template>

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

const showInstallPrompt = ref(false)
let deferredPrompt = null

const handleBeforeInstallPrompt = (e) => {
  // Prevent Chrome 67 and earlier from automatically showing the prompt
  e.preventDefault()

  // Only show install prompt if we are on the specific domain
  if (window.location.hostname !== 'tools.7u.pl') {
    return
  }

  // Stash the event so it can be triggered later.
  deferredPrompt = e
  // Update UI to notify the user they can add to home screen
  showInstallPrompt.value = true
}

const installPWA = async () => {
  if (!deferredPrompt) return

  // Show the install prompt
  deferredPrompt.prompt()

  // Wait for the user to respond to the prompt
  const { outcome } = await deferredPrompt.userChoice
  console.log(`User response to the install prompt: ${outcome}`)

  // We've used the prompt, and can't use it again, throw it away
  deferredPrompt = null
  showInstallPrompt.value = false
}

const dismissPrompt = () => {
  showInstallPrompt.value = false
  deferredPrompt = null
}

const handleKeydown = (e) => {
  if (e.key === 'Escape' && showInstallPrompt.value) {
    dismissPrompt()
  }
}

onMounted(() => {
  window.addEventListener('beforeinstallprompt', handleBeforeInstallPrompt)
  window.addEventListener('keydown', handleKeydown)
})

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

<style scoped>
.install-prompt {
  position: fixed;
  bottom: calc(5rem + env(safe-area-inset-bottom)); /* Above footer with extra space */
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  max-width: 400px;
  padding: 1rem;
  z-index: 9999;
  animation: slideUp 0.3s ease-out;
  border-radius: 12px;
}

.prompt-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.prompt-text {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--text-strong);
}

.prompt-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.install-btn {
  background-color: var(--primary-accent);
  color: #000; /* Dark text on bright cyan accent for dark mode */
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.dismiss-btn {
  background: transparent;
  border: none;
  color: var(--text-secondary);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 0.5rem;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translate(-50%, 20px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

@media (min-width: 768px) {
  .install-prompt {
    bottom: 2rem;
    right: 2rem;
    left: auto;
    transform: none;
  }

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

/* Light theme overrides for better contrast */
:global(:root[data-theme="light"]) .install-btn {
  background-color: var(--accent-purple);
  color: #fff;
}
</style>
