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

interface UserInfo {
  user_id: string
  email: string
  avatar_url: string | null
}

const user = ref<UserInfo | null>(null)

onMounted(async () => {
  const res = await fetch('/auth/me')
  if (res.ok) {
    const data = await res.json()
    user.value = data.user
  }
})
</script>

<template>
  <main class="app-shell">
    <nav class="app-nav">
      <RouterLink to="/stack">Стек</RouterLink>
      <RouterLink to="/tree">Дерево</RouterLink>
      <span class="spacer" />
      <a v-if="!user" href="/auth/login">Войти</a>
      <span v-else>
        {{ user.email }}
        <a href="/auth/logout">Выйти</a>
      </span>
    </nav>
    <RouterView />
  </main>
</template>

<style>
/* Стили gnexus-ui-kit подключаются через его CSS (kit.css) — см. docs кита.
   Здесь — только каркас раскладки до полноценной интеграции кита. */
.app-shell {
  max-width: 960px;
  margin: 0 auto;
  padding: 1rem;
}
.app-nav {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  align-items: center;
}
.app-nav .spacer {
  flex: 1;
}
</style>