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

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

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

  if (result.status === 'unrecognized') {
    // Уводить некуда: своего входа у сервиса нет, а имя пришедшего ставит
    // обратный прокси. Показываем строкой — той, что прислал сервер, — и
    // отдельной от прочей неудачи: «вас не узнали» и «сервис не отвечает»
    // ведут человека к разному.
    unrecognized.value = result.message
    state.value = 'unrecognized'
    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 === 'unrecognized'">{{ unrecognized }}</p>

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

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