<script setup lang="ts">
import { computed } from 'vue'
import { RouterLink, useRouter } from 'vue-router'

import { useAuthStore } from '@/stores/auth'

const authStore = useAuthStore()
const router = useRouter()

const isAuthenticated = computed(() => authStore.isAuthenticated)
const username = computed(() => authStore.user?.username)

function handleLogout() {
  authStore.logout()
  router.push({ name: 'home' })
}
</script>

<template>
  <header class="bg-surface-dark border-b border-gray-700">
    <div class="container mx-auto px-4 py-3 flex items-center justify-between">
      <RouterLink
        to="/"
        class="text-xl font-bold text-primary-light"
      >
        Mantimon TCG
      </RouterLink>

      <nav class="flex items-center gap-6">
        <template v-if="isAuthenticated">
          <RouterLink
            to="/campaign"
            class="text-gray-300 hover:text-white transition-colors"
          >
            Campaign
          </RouterLink>
          <RouterLink
            to="/collection"
            class="text-gray-300 hover:text-white transition-colors"
          >
            Collection
          </RouterLink>
          <RouterLink
            to="/deck-builder"
            class="text-gray-300 hover:text-white transition-colors"
          >
            Decks
          </RouterLink>

          <div class="flex items-center gap-3 ml-4 pl-4 border-l border-gray-600">
            <span class="text-gray-400">{{ username }}</span>
            <button
              class="text-gray-400 hover:text-white transition-colors"
              @click="handleLogout"
            >
              Logout
            </button>
          </div>
        </template>

        <template v-else>
          <RouterLink
            to="/login"
            class="text-gray-300 hover:text-white transition-colors"
          >
            Login
          </RouterLink>
          <RouterLink
            to="/register"
            class="btn btn-primary"
          >
            Sign Up
          </RouterLink>
        </template>
      </nav>
    </div>
  </header>
</template>
