<script setup lang="ts">
/**
 * Desktop sidebar navigation.
 *
 * Displayed on medium screens and above (md:). Contains the main
 * navigation links and user menu. Hidden on mobile where NavBottomTabs
 * is used instead.
 */
import { computed } from 'vue'
import { RouterLink, useRouter, useRoute } from 'vue-router'

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

const auth = useAuthStore()
const user = useUserStore()
const router = useRouter()
const route = useRoute()

const displayName = computed(() => user.displayName || 'Player')

interface NavItem {
  path: string
  name: string
  label: string
  icon: string
}

const navItems: NavItem[] = [
  { path: '/', name: 'Dashboard', label: 'Home', icon: '🏠' },
  { path: '/play', name: 'PlayMenu', label: 'Play', icon: '⚔️' },
  { path: '/decks', name: 'DeckList', label: 'Decks', icon: '🃏' },
  { path: '/collection', name: 'Collection', label: 'Collection', icon: '📚' },
  { path: '/campaign', name: 'Campaign', label: 'Campaign', icon: '🏆' },
]

function isActive(item: NavItem): boolean {
  if (item.path === '/') {
    return route.path === '/'
  }
  return route.path.startsWith(item.path)
}

async function handleLogout(): Promise<void> {
  await auth.logout()
  router.push({ name: 'Login' })
}
</script>

<template>
  <aside class="hidden md:flex flex-col w-64 bg-surface-dark border-r border-gray-700 h-screen">
    <!-- Logo -->
    <div class="p-4 border-b border-gray-700">
      <RouterLink
        to="/"
        class="text-xl font-bold text-primary-light hover:text-primary transition-colors"
      >
        Mantimon TCG
      </RouterLink>
    </div>

    <!-- Navigation -->
    <nav class="flex-1 p-4">
      <ul class="space-y-2">
        <li
          v-for="item in navItems"
          :key="item.name"
        >
          <RouterLink
            :to="item.path"
            class="flex items-center gap-3 px-4 py-3 rounded-lg transition-colors"
            :class="[
              isActive(item)
                ? 'bg-primary/20 text-primary-light'
                : 'text-gray-300 hover:bg-surface-light hover:text-white'
            ]"
          >
            <span class="text-lg">{{ item.icon }}</span>
            <span>{{ item.label }}</span>
          </RouterLink>
        </li>
      </ul>
    </nav>

    <!-- User menu -->
    <div class="p-4 border-t border-gray-700">
      <RouterLink
        to="/profile"
        class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-300 hover:bg-surface-light hover:text-white transition-colors"
        :class="{ 'bg-primary/20 text-primary-light': route.path === '/profile' }"
      >
        <span class="text-lg">👤</span>
        <span class="flex-1 truncate">{{ displayName }}</span>
      </RouterLink>

      <button
        class="flex items-center gap-3 w-full px-4 py-3 mt-2 rounded-lg text-gray-400 hover:bg-surface-light hover:text-white transition-colors"
        @click="handleLogout"
      >
        <span class="text-lg">🚪</span>
        <span>Logout</span>
      </button>
    </div>
  </aside>
</template>
