<template>
  <nav class="bg-white border border-gray-200 shadow-sm admin-navigation">
    <div class="w-full px-6 py-4">
      <div class="flex items-center justify-between w-full">
        <!-- Left side: Brand and version -->
        <div class="flex items-center flex-shrink-0">
          <div class="flex items-center gap-3">
            <h1 class="text-xl font-bold text-gray-900 m-0">
                Zeno Chatbot
            </h1>
            <span class="bg-primary-600 text-white px-2 py-1 rounded text-xs font-medium">
              v{{ $config.config?.version || '1.1.0' }}
            </span>
          </div>
        </div>

        <!-- Right side: Navigation menu -->
        <div class="flex items-center ml-auto flex-shrink-0">
          <!-- Desktop menu -->
          <div class="hidden md:flex items-center">
            <ul class="flex items-center gap-2 m-0 p-0 list-none">
              <li>
                <router-link
                  to="/dashboard"
                  class="nav-item"
                  active-class="active"
                >
                  <AppIcon name="dashboard-line" size="sm" class="mr-2" />
                  Dashboard
                </router-link>
              </li>
              <li>
                <router-link
                  to="/conversations"
                  class="nav-item"
                  :class="{ active: $route.path.startsWith('/conversations') }"
                >
                  <AppIcon name="message-3-line" size="sm" class="mr-2" />
                  {{ $t('Conversations') }}
                </router-link>
              </li>
              <li>
                <router-link
                  to="/settings"
                  class="nav-item"
                  :class="{ active: $route.path.startsWith('/settings') }"
                >
                  <AppIcon name="settings-3-line" size="sm" class="mr-2" />
                  Settings
                </router-link>
              </li>
              <li>
                <router-link
                  to="/help"
                  class="nav-item"
                  :class="{ active: $route.path.startsWith('/help') }"
                  aria-label="Help"
                  title="Help"
                >
                  <AppIcon name="question-line" size="sm" />
                  <span class="sr-only">Help</span>
                </router-link>
              </li>
              <li>
                <button
                  type="button"
                  class="nav-item"
                  @click="openWhatsNew"
                  aria-label="What's New"
                  title="What's New"
                >
                  <AppIcon name="gift-line" size="sm" />
                  <span class="sr-only">What's New</span>
                </button>
              </li>
            </ul>
          </div>

          <!-- Mobile toggle button -->
          <div class="md:hidden">
            <button
              type="button"
              class="flex items-center justify-center p-2 border border-gray-300 rounded-lg bg-white text-gray-600 transition-colors hover:bg-gray-50 hover:border-gray-400"
              aria-label="Toggle navigation"
              @click="toggleMobileMenu"
            >
              <AppIcon
                :name="mobileMenuOpen ? 'close-line' : 'menu-line'"
                size="md"
              />
            </button>
          </div>
        </div>
      </div>

      <!-- Mobile menu (full-screen overlay) -->
      <Teleport to="body">
        <div
          v-if="mobileMenuOpen"
          class="fixed inset-0 bg-black bg-opacity-50 z-50 md:hidden"
          @click="closeMobileMenu"
        >
          <div class="flex items-center justify-center min-h-screen p-4">
            <div
              class="bg-white rounded-lg p-6 shadow-xl min-w-80"
              @click.stop
            >
              <ul class="flex flex-col gap-2 m-0 p-0 list-none">
                <li>
                  <router-link
                    to="/dashboard"
                    class="mobile-nav-item"
                    active-class="active"
                    @click="closeMobileMenu"
                  >
                    <AppIcon name="dashboard-line" size="md" class="mr-3" />
                    Dashboard
                  </router-link>
                </li>
                <li>
                  <router-link
                    to="/conversations"
                    class="mobile-nav-item"
                    :class="{ active: $route.path.startsWith('/conversations') }"
                    @click="closeMobileMenu"
                  >
                    <AppIcon name="message-3-line" size="md" class="mr-3" />
                    {{ $t('Conversations') }}
                  </router-link>
                </li>
                <li>
                  <router-link
                    to="/settings"
                    class="mobile-nav-item"
                    :class="{ active: $route.path.startsWith('/settings') }"
                    @click="closeMobileMenu"
                  >
                    <AppIcon name="settings-3-line" size="md" class="mr-3" />
                    Settings
                  </router-link>
                </li>
                <li>
                  <router-link
                    to="/help"
                    class="mobile-nav-item"
                    :class="{ active: $route.path.startsWith('/help') }"
                    @click="closeMobileMenu"
                  >
                    <AppIcon name="question-line" size="md" class="mr-3" />
                    Help
                  </router-link>
                </li>
                <li>
                  <button
                    type="button"
                    class="mobile-nav-item"
                    @click="openWhatsNew(); closeMobileMenu()"
                  >
                    <AppIcon name="gift-line" size="md" class="mr-3" />
                    What's New
                  </button>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </Teleport>
    </div>

    <!-- What's New Drawer -->
    <WhatsNewDrawer v-model="whatsNewOpen" />
  </nav>
</template>

<script setup>
import { ref } from 'vue'
import AppIcon from './Icon.vue'
import WhatsNewDrawer from './WhatsNewDrawer.vue'

// Mobile menu state
const mobileMenuOpen = ref(false)

// What's New drawer state
const whatsNewOpen = ref(false)

const toggleMobileMenu = () => {
    mobileMenuOpen.value = !mobileMenuOpen.value
}

const closeMobileMenu = () => {
    mobileMenuOpen.value = false
}

const openWhatsNew = () => {
    whatsNewOpen.value = true
}
</script>

<style lang="scss" scoped>
/* Navigation item styles using Tailwind @apply */
.nav-item {
  @apply flex items-center font-medium px-4 py-2 rounded-lg transition-colors no-underline text-gray-700 whitespace-nowrap border-0 bg-transparent cursor-pointer;

  &:hover {
    @apply bg-gray-100 text-gray-900;
  }

  &.active {
    @apply bg-primary-600 text-white;
  }
}

.mobile-nav-item {
  @apply flex items-center font-medium px-4 py-3 rounded-lg transition-colors no-underline text-gray-700 w-full text-left border-0 bg-transparent cursor-pointer;

  &:hover {
    @apply bg-gray-100 text-gray-900;
  }

  &.active {
    @apply bg-primary-600 text-white;
  }
}

.admin-navigation {
  margin-left: -20px;
  width: calc(100% + 20px);
}
</style>
