<template>
  <div>
    <!-- Navigation -->
    <nav class="bg-black border-b-4 border-black">
      <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
        <div class="flex justify-between h-16">
          <div class="flex items-center">
            <NuxtLink to="/" class="text-xl font-bold text-white font-mono">
              FABER FINANCES
            </NuxtLink>
          </div>
          <div class="flex items-center">
            <button
              v-if="authenticated"
              @click="logout"
              class="text-white hover:text-gray-300 px-3 py-2 text-sm font-medium"
            >
              Logout
            </button>
          </div>
        </div>
      </div>
    </nav>
    <!-- Main Content -->
    <NuxtPage />
  </div>
</template>

<script setup>
// Global SEO
useSeoMeta({
  titleTemplate: "%s - Faber Finances",
  description: "Personal finance and cash flow management system",
});

const authenticated = ref(false)

// Check authentication status
onMounted(async () => {
  try {
    const { authenticated: isAuth } = await $fetch('/api/auth/check')
    authenticated.value = isAuth
  } catch (err) {
    authenticated.value = false
  }
})

// Logout function
const logout = async () => {
  try {
    await $fetch('/api/auth/logout', { method: 'POST' })
    authenticated.value = false
    await navigateTo('/login')
  } catch (err) {
    console.error('Logout error:', err)
  }
}
</script>
