<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { GnButton, GnNavigationShell } from "gnexus-ui-kit/vue";
import { useAuth } from "../stores/auth";

const auth = useAuth();
const router = useRouter();
const route = useRoute();
const { t } = useI18n();

const items = computed(() => [
  { id: "projects", label: t("nav.projects"), icon: "ph-folders", to: "/" },
  { id: "settings", label: t("nav.settings"), icon: "ph-gear", to: "/settings" },
]);

async function onSelect(item: { to?: string }) {
  if (item.to) router.push(item.to);
}

async function logout() {
  await auth.logout();
  router.push("/login");
}
</script>

<template>
  <!-- public pages (project/report links) reuse this shell without a session:
       show the plain centered body when nobody is logged in -->
  <GnNavigationShell v-if="auth.user.value" brand="BugTrail" logo-src="/bugtrail.svg" :items="items" @select="onSelect">
    <template #content>
      <div class="shell-body">
        <slot />
      </div>
    </template>
    <template #footer>
      <div class="shell-footer">
        <span class="shell-footer-user">{{ auth.user.value.nickname }}</span>
        <GnButton variant="secondary" size="sm" icon="ph-sign-out" @click="logout">
          {{ t("nav.logout") }}
        </GnButton>
      </div>
    </template>
  </GnNavigationShell>
  <div v-else class="shell-body">
    <slot />
  </div>
</template>

<style>
/* kit .nav-topbar-brand img caps the logo at 22px — BugTrail's mark is
   designed as a 48px tile; the shell renders the topbar outside the scoped
   content slot, so the override must be global */
.nav-topbar-brand img {
  width: 48px;
  height: 48px;
}
</style>
<style scoped>
.shell-body {
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 24px 60px;
  width: 100%;
}
.shell-footer {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shell-footer-user {
  font-size: 12px;
  opacity: 0.8;
  margin-right: auto;
}
</style>