<script setup lang="ts">
const auth = useAuthStore()

const remainingMinutes = computed(() => Math.floor(auth.sessionWarningRemainingSeconds / 60))
const remainingSeconds = computed(() => auth.sessionWarningRemainingSeconds % 60)
const remainingTimeLabel = computed(() => `${remainingMinutes.value}:${String(remainingSeconds.value).padStart(2, "0")}`)

const onRefresh = async () => {
  await auth.refreshSession()
}

const onLogout = async () => {
  auth.sessionWarningVisible = false
  await auth.logout()
}
</script>

<template>
  <UModal v-model:open="auth.sessionWarningVisible" prevent-close>
    <template #content>
      <UCard>
        <template #header>
          <h3 class="text-lg font-semibold">Sitzung läuft bald ab</h3>
        </template>

        <p class="text-sm text-gray-600 dark:text-gray-300">
          Deine Sitzung endet in
          <span class="font-semibold">{{ remainingTimeLabel }}</span>.
          Bitte bestätige, um eingeloggt zu bleiben.
        </p>

        <template #footer>
          <div class="flex justify-end gap-2">
            <UButton variant="outline" color="gray" @click="onLogout">
              Abmelden
            </UButton>
            <UButton color="primary" @click="onRefresh">
              Eingeloggt bleiben
            </UButton>
          </div>
        </template>
      </UCard>
    </template>
  </UModal>
</template>
