<script setup lang="ts">
import { computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { useI18n } from "vue-i18n";
import { GnButton, GnNavigationShell, GnAvatar } 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>
  <GnNavigationShell
    brand="Live Testing Tool"
    logo-src=""
    :items="items"
    current=""
    @select="onSelect"
  >
    <template #current>
      <span class="shell-current">{{ route.meta.title ?? "" }}</span>
    </template>
    <template #content>
      <div class="shell-body">
        <slot />
      </div>
    </template>
    <template #footer>
      <div class="shell-footer">
        <GnAvatar v-if="auth.user.value" :name="auth.user.value.nickname" size="sm" />
        <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>
</template>

<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;
}
.shell-current {
  font-size: 12px;
  opacity: 0.7;
}
</style>