<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRoute } from 'vue-router'
import type { UserInfo } from './types'

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

const navItems = [
  { id: 'stack', label: 'Стек входящих', icon: 'ph-inbox', to: '/stack' },
  { id: 'tree', label: 'Дерево задач', icon: 'ph-tree-structure', to: '/tree' },
  { id: 'list', label: 'Список задач', icon: 'ph-list-bullets', to: '/list' },
  { id: 'projects', label: 'Проекты', icon: 'ph-folders', to: '/projects' },
  { id: 'options', label: '3 варианта', icon: 'ph-shuffle', to: '/options' },
]

const currentLabel = computed(() => {
  const item = navItems.find((i) => i.to === route.path)
  return item?.label ?? 'gntodo'
})

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

<template>
  <GnToastProvider>
    <GnNavigationShell
      brand="gntodo"
      :items="navItems"
      :current="currentLabel"
      title="Разделы"
      subtitle="gntodo — личные задачи"
    >
      <template #current>
        <a v-if="!user" href="/auth/login">Войти</a>
        <span v-else class="user-chip">
          {{ user.email }}
          <a href="/auth/logout">Выйти</a>
        </span>
      </template>
      <template #content>
        <div class="app-content">
          <RouterView />
        </div>
      </template>
    </GnNavigationShell>
  </GnToastProvider>
</template>

<style>
.app-content {
  max-width: 760px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
}
.user-chip a {
  margin-left: 0.5rem;
  color: var(--muted);
}
</style>