<template>
  <div class="min-h-screen flex flex-col bg-gray-50">
    <!-- Header -->
    <header class="bg-primary text-white shadow-lg">
      <div class="container mx-auto px-4 py-4">
        <div class="flex items-center justify-between">
          <!-- Logo and Title -->
          <NuxtLink to="/" class="flex items-center space-x-3 hover:opacity-90 transition">
            <div class="text-2xl font-bold">SBA</div>
            <div class="hidden sm:block text-sm font-light">
              Stratomatic Baseball Association
            </div>
          </NuxtLink>

          <!-- Navigation -->
          <nav class="flex items-center space-x-6">
            <template v-if="authStore.isAuthenticated">
              <!-- Authenticated Navigation -->
              <NuxtLink
                to="/"
                class="hover:text-gray-200 transition text-sm font-medium"
              >
                Games
              </NuxtLink>

              <!-- User Menu -->
              <div class="flex items-center space-x-3">
                <div class="hidden md:block text-sm">
                  {{ authStore.currentUser?.username }}
                </div>
                <button
                  class="px-4 py-2 bg-white/10 hover:bg-white/20 rounded-lg transition text-sm font-medium"
                  @click="handleLogout"
                >
                  Logout
                </button>
              </div>
            </template>

            <template v-else>
              <!-- Guest Navigation -->
              <NuxtLink
                to="/auth/login"
                class="px-4 py-2 bg-white text-primary hover:bg-gray-100 rounded-lg transition text-sm font-medium"
              >
                Login
              </NuxtLink>
            </template>
          </nav>
        </div>
      </div>
    </header>

    <!-- Main Content -->
    <main class="flex-1 container mx-auto px-4 py-8">
      <slot />
    </main>

    <!-- Footer -->
    <footer class="bg-gray-800 text-gray-300 py-6 mt-auto">
      <div class="container mx-auto px-4">
        <div class="text-center text-sm">
          <p>&copy; {{ currentYear }} Stratomatic Baseball Association</p>
          <p class="mt-2 text-gray-400">
            Real-time multiplayer baseball simulation
          </p>
        </div>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { useAuthStore } from '~/store/auth'

const authStore = useAuthStore()
const config = useRuntimeConfig()
const currentYear = new Date().getFullYear()

const handleLogout = async () => {
  try {
    await $fetch(`${config.public.apiUrl}/api/auth/logout`, {
      method: 'POST',
      credentials: 'include',
    })
  } catch (err) {
    console.error('[Layout] Logout API call failed:', err)
  }
  // Always clear local state and redirect
  authStore.logout()
  navigateTo('/')
}

// Auth is initialized by the auth plugin automatically
</script>

<style scoped>
/* Additional component styles if needed */
</style>
