<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { fetchMe, loginPath } from '../api'

// Состояние экрана живёт в экране: общего между экранами пока нет.
const state = ref<'loading' | 'signed-in' | 'failed'>('loading')
const name = ref('')
const failure = ref('')

async function load() {
  const result = await fetchMe()

  if (result.status === 'unauthorized') {
    // Единственная ветка, уводящая ко входу. Прочие отказы ведут сюда же
    // только через круг «приложение → вход → приложение», поэтому их здесь нет.
    window.location.assign(loginPath)
    return
  }

  if (result.status === 'failed') {
    failure.value = result.message
    state.value = 'failed'
    return
  }

  name.value = result.value.name
  state.value = 'signed-in'
}

onMounted(load)
</script>

<template>
  <main>
    <h1>Расшифровка записей</h1>

    <p v-if="state === 'loading'">Загружается…</p>

    <p v-else-if="state === 'failed'">{{ failure }}</p>

    <!-- Имени у учётной записи может не быть вовсе: тогда говорим, что вход
         выполнен, и не подставляем вместо имени адрес почты — его в ответе нет. -->
    <p v-else-if="name">Вы вошли как {{ name }}</p>
    <p v-else>Вы вошли</p>
  </main>
</template>
