<script setup lang="ts">
import { ref } from 'vue'
import { useAuthStore } from '@/stores/auth'
import OrgSwitcher from './OrgSwitcher.vue'
import SearchBar from './SearchBar.vue'
import ThemeToggle from './ThemeToggle.vue'
import MobileMenu from './MobileMenu.vue'

const auth = useAuthStore()
const mobileMenuOpen = ref(false)
</script>

<template>
  <nav class="bg-surface-light-alt/80 dark:bg-[#111827]/80 backdrop-blur border-b border-border-light dark:border-slate-800">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-14 items-center">
        <div class="flex items-center gap-5">
          <router-link to="/" class="text-lg font-bold font-display bg-gradient-to-r from-accent-400 to-cyan-400 bg-clip-text text-transparent">
            Specwright
          </router-link>
          <span class="text-xs font-mono text-slate-400 dark:text-slate-500 uppercase tracking-wider hidden sm:inline">Explorer</span>
        </div>

        <!-- Desktop nav -->
        <div class="hidden sm:flex items-center gap-4">
          <router-link
            :to="`/app/${auth.org}/tasks`"
            class="text-sm text-slate-600 dark:text-slate-400 hover:text-accent-400 transition-colors"
          >
            Tasks
          </router-link>
          <router-link
            :to="`/app/${auth.org}/editor`"
            class="text-sm text-slate-600 dark:text-slate-400 hover:text-accent-400 transition-colors"
          >
            Editor
          </router-link>
          <OrgSwitcher v-if="auth.orgs.length > 1" />
          <SearchBar />
          <template v-if="auth.user">
            <router-link
              :to="`/app/${auth.org}/profile`"
              class="text-sm text-slate-600 dark:text-slate-400 hover:text-accent-400 transition-colors"
            >
              {{ auth.user.email }}
            </router-link>
            <a v-if="!auth.hasGitHub" href="/auth/github/login" class="text-sm text-accent-400 hover:text-accent-300 transition-colors">Connect GitHub</a>
            <a href="/auth/logout" class="text-sm text-slate-500 hover:text-accent-400 transition-colors">Logout</a>
          </template>
          <ThemeToggle />
        </div>

        <!-- Hamburger (mobile) -->
        <button
          type="button"
          class="sm:hidden p-1.5 rounded-md text-slate-500 hover:text-slate-700 dark:hover:text-slate-300 hover:bg-surface-light-elevated dark:hover:bg-slate-700 transition-colors"
          @click="mobileMenuOpen = !mobileMenuOpen"
        >
          <svg class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" />
          </svg>
        </button>
      </div>
    </div>

    <MobileMenu v-if="mobileMenuOpen" @close="mobileMenuOpen = false" />
  </nav>
</template>
