<template>
  <Transition
    enter-active-class="transition ease-out duration-300"
    enter-from-class="opacity-0 -translate-y-2"
    enter-to-class="opacity-100 translate-y-0"
    leave-active-class="transition ease-in duration-200"
    leave-from-class="opacity-100 translate-y-0"
    leave-to-class="opacity-0 -translate-y-2"
  >
    <div
      v-if="!isOnline"
      class="fixed top-0 left-0 right-0 z-50 bg-amber-500 text-white px-4 py-2 text-center shadow-lg"
    >
      <div class="flex items-center justify-center gap-2">
        <UIcon name="i-heroicons-wifi-slash" class="w-5 h-5" />
        <span class="font-medium">
          You're currently offline. Changes will sync when connection is restored.
        </span>
      </div>
    </div>
  </Transition>
  
  <Transition
    enter-active-class="transition ease-out duration-300"
    enter-from-class="opacity-0 -translate-y-2"
    enter-to-class="opacity-100 translate-y-0"
    leave-active-class="transition ease-in duration-200"
    leave-from-class="opacity-100 translate-y-0"
    leave-to-class="opacity-0 -translate-y-2"
  >
    <div
      v-if="isOnline && wasOffline && showReconnected"
      class="fixed top-0 left-0 right-0 z-50 bg-emerald-500 text-white px-4 py-2 text-center shadow-lg"
    >
      <div class="flex items-center justify-center gap-2">
        <UIcon name="i-heroicons-wifi" class="w-5 h-5" />
        <span class="font-medium">
          Back online! Syncing your changes...
        </span>
      </div>
    </div>
  </Transition>
</template>

<script setup lang="ts">
const { isOnline, wasOffline } = useOnlineStatus()
const showReconnected = ref(false)

// Show "back online" message for 3 seconds
watch(isOnline, (online) => {
  if (online && wasOffline.value) {
    showReconnected.value = true
    setTimeout(() => {
      showReconnected.value = false
    }, 3000)
  }
})
</script>
