<template>
  <div class="flex flex-col items-center justify-center min-h-screen p-8 text-center">
    <UIcon name="i-heroicons-wifi-slash" class="w-24 h-24 text-gray-400 mb-6" />
    
    <h1 class="text-3xl font-bold text-gray-900 mb-4">
      You're Offline
    </h1>
    
    <p class="text-gray-600 mb-8 max-w-md">
      No internet connection detected. Some features may be limited, but you can still:
    </p>
    
    <div class="space-y-3 mb-8 text-left max-w-md">
      <div class="flex items-start gap-3">
        <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
        <span class="text-gray-700">View cached inventory items</span>
      </div>
      <div class="flex items-start gap-3">
        <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
        <span class="text-gray-700">Scan barcodes (will sync when online)</span>
      </div>
      <div class="flex items-start gap-3">
        <UIcon name="i-heroicons-check-circle" class="w-6 h-6 text-emerald-500 mt-0.5" />
        <span class="text-gray-700">Browse previously loaded data</span>
      </div>
    </div>
    
    <UButton
      color="emerald"
      size="lg"
      @click="retry"
      :loading="retrying"
    >
      <template #leading>
        <UIcon name="i-heroicons-arrow-path" />
      </template>
      Try Again
    </UButton>
  </div>
</template>

<script setup lang="ts">
const retrying = ref(false)

async function retry() {
  retrying.value = true
  
  try {
    // Test if we're back online
    const response = await fetch('/api/health', { method: 'HEAD' })
    if (response.ok) {
      // We're online! Go back
      window.location.reload()
    }
  } catch (error) {
    // Still offline
    setTimeout(() => {
      retrying.value = false
    }, 1000)
  }
}

// Auto-retry when online event fires
if (typeof window !== 'undefined') {
  window.addEventListener('online', () => {
    window.location.reload()
  })
}
</script>
