<script setup lang="ts">
import { ref } from 'vue'
import { RouterLink } from 'vue-router'
import PixelGlove from './PixelGlove.vue'
import { useNostr } from '../composables/useNostr'

const { bot, isLoggedIn } = useNostr()
const isMenuOpen = ref(false)

const links = [
  { to: '/join', label: 'FIGHT!' },
  { to: '/arena', label: 'WATCH' },
  { to: '/leaderboard', label: 'RANKINGS' },
  { to: '/docs', label: 'DOCS' },
]
</script>

<template>
  <nav class="border-b border-border bg-surface/90 backdrop-blur-md sticky top-0 z-50">
    <div class="px-6 h-16 flex items-center justify-between">
      <RouterLink to="/" class="flex items-center gap-2 group">
        <span class="flex items-center gap-0.5" style="transform: rotate(-10deg)">
          <PixelGlove :size="18" />
          <PixelGlove :size="18" flip />
        </span>
        <span class="font-display font-black text-neon-pink text-lg tracking-widest glow-pink">
          BOTFIGHTS
        </span>
      </RouterLink>

      <div class="hidden md:flex items-center gap-6">
        <RouterLink
          v-for="link in links"
          :key="link.to"
          :to="link.to"
          class="text-xs font-display font-bold text-text-secondary tracking-wider
                 hover:text-neon-cyan transition-colors duration-200"
        >
          {{ link.label }}
        </RouterLink>
        <RouterLink
          v-if="isLoggedIn && bot"
          :to="`/bot/${bot.name}`"
          class="text-xs font-display font-bold text-neon-cyan tracking-wider
                 hover:text-neon-pink transition-colors duration-200"
        >
          {{ bot.name.toUpperCase() }}
        </RouterLink>
      </div>

      <button
        class="md:hidden text-text-secondary hover:text-neon-cyan transition-colors"
        @click="isMenuOpen = !isMenuOpen"
      >
        <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path
            v-if="!isMenuOpen"
            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M4 6h16M4 12h16M4 18h16"
          />
          <path
            v-else
            stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
            d="M6 18L18 6M6 6l12 12"
          />
        </svg>
      </button>
    </div>

    <div v-if="isMenuOpen" class="md:hidden border-t border-border px-6 py-4 space-y-4 bg-surface">
      <RouterLink
        v-for="link in links"
        :key="link.to"
        :to="link.to"
        class="block text-sm font-display font-bold text-text-secondary tracking-wider
               hover:text-neon-cyan transition-colors"
        @click="isMenuOpen = false"
      >
        {{ link.label }}
      </RouterLink>
      <RouterLink
        v-if="isLoggedIn && bot"
        :to="`/bot/${bot.name}`"
        class="block text-sm font-display font-bold text-neon-cyan tracking-wider"
        @click="isMenuOpen = false"
      >
        {{ bot.name.toUpperCase() }}
      </RouterLink>
    </div>
  </nav>
</template>
