<script setup lang="ts">
import { onMounted, ref } from "vue";

import { useSessionStore } from "../shared/stores/session";
import AppShell from "./shell/AppShell.vue";
import AuthView from "./views/AuthView.vue";

const session = useSessionStore();
const restoreFailure = ref("");

async function restore(): Promise<void> {
  restoreFailure.value = "";
  try {
    await session.restore();
  } catch (error) {
    restoreFailure.value = error instanceof Error ? error.message : "服务连接失败";
  }
}

onMounted(restore);
</script>

<template>
  <main v-if="!session.initialized || restoreFailure" class="app-loading" aria-live="polite">
    <div class="loading-stack">
      <p>{{ restoreFailure || "正在载入复盘工作台" }}</p>
      <button v-if="restoreFailure" class="btn" type="button" @click="restore">重试</button>
    </div>
  </main>
  <AppShell v-else-if="session.account" />
  <AuthView v-else />
</template>
