<template>
  <div class="flex h-full">
    <div class="w-80 m-auto">
      <p class="text-center text-muted-color mb-4">
        Updating...
      </p>

      <PrimeProgressBar mode="indeterminate" style="height: 8px;" />

      <div class="flex items-center justify-center gap-2 mt-8">
        <PrimeBadge :value="lastUpdate.currentVersion" size="small" severity="secondary" />
        <i class="pi pi-arrow-right" style="font-size: 0.75rem;" />
        <PrimeBadge :value="lastUpdate.version" size="small" severity="contrast" />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
definePageMeta({
  name: 'Updater',
  layout: 'blank',
  auth: false,
  middleware: () => {
    const { lastUpdate } = useUpdater()
    if (!lastUpdate.value)
      return navigateTo('/')
  },
})

const lastUpdate = useUpdater().lastUpdate.value!

;(async () => {
  try {
    await lastUpdate.downloadAndInstall()
  }
  catch {
    await navigateTo('/')
  }
})()
</script>
