<template>
  <nav class="navbar">
    <RouterLink class="nav-brand" to="/dashboard">🏠 Homeschool</RouterLink>
    <div class="nav-links">
      <RouterLink to="/dashboard" active-class="active">Dashboard</RouterLink>
<RouterLink to="/logs" active-class="active">Logs</RouterLink>
      <RouterLink to="/admin" active-class="active">Admin</RouterLink>
    </div>
    <div class="nav-user" v-if="auth.user">
      <span class="nav-name">{{ auth.user.full_name }}</span>
      <button class="btn-logout" @click="logout">Sign out</button>
    </div>
  </nav>
</template>

<script setup>
import { useRouter } from 'vue-router'
import { useAuthStore } from '@/stores/auth'

const auth = useAuthStore()
const router = useRouter()

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

<style scoped>
.navbar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.875rem 2rem;
  background: #1e293b;
  border-bottom: 1px solid #334155;
}

.nav-brand {
  font-size: 1.1rem;
  font-weight: 700;
  color: #818cf8;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 0.25rem;
  flex: 1;
}

.nav-links a {
  padding: 0.4rem 0.9rem;
  border-radius: 0.5rem;
  color: #94a3b8;
  font-size: 0.9rem;
  transition: all 0.2s;
  text-decoration: none;
}

.nav-links a:hover,
.nav-links a.active {
  background: #334155;
  color: #f1f5f9;
}

.nav-user {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: auto;
}

.nav-name { font-size: 0.875rem; color: #64748b; }

.btn-logout {
  padding: 0.35rem 0.75rem;
  border: 1px solid #334155;
  background: transparent;
  color: #94a3b8;
  border-radius: 0.5rem;
  cursor: pointer;
  font-size: 0.8rem;
  transition: all 0.2s;
}
.btn-logout:hover { background: #334155; color: #f1f5f9; }
</style>
