<script setup lang="ts">
import { ref, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { Menu, X, Sun, Moon, Zap, MessageSquareText, LogIn } from 'lucide-vue-next'
import { Button } from '@/components/ui/button'
import { useTheme } from '@/components/theme-provider'
import { useRouter } from 'vue-router'
import LogoutDialog from '@/components/ui/logout-dialog/LogoutDialog.vue'
import Login from '@/components/Login.vue'
import { Dialog, DialogContent } from '@/components/ui/dialog'
import ConnectionStatus from '@/components/ConnectionStatus.vue'

const { t, locale } = useI18n()
const { theme, setTheme } = useTheme()
// const nostrStore = useNostrStore()
const router = useRouter()
const isOpen = ref(false)
const showLoginDialog = ref(false)

const navigation = computed(() => [
  { name: t('nav.home'), href: '/' },
  { name: t('nav.support'), href: '/support', icon: MessageSquareText },
])

const toggleMenu = () => {
  isOpen.value = !isOpen.value
}

const toggleTheme = () => {
  setTheme(theme.value === 'dark' ? 'light' : 'dark')
}

const toggleLocale = () => {
  // Toggle between 'en' and 'es'
  const newLocale = locale.value === 'en' ? 'es' : 'en'
  locale.value = newLocale
  // Store the preference
  localStorage.setItem('locale', newLocale)
}

const handleLogout = async () => {
  // await nostrStore.logout()
  router.push('/')
}

const openLogin = () => {
  showLoginDialog.value = true
}
</script>

<template>
  <nav class="w-full">
    <div class="flex items-center justify-between px-4 md:px-0">
      <!-- Logo and Desktop Navigation -->
      <div class="flex items-center gap-6">
        <router-link to="/" class="flex items-center gap-2">
          <Zap class="h-6 w-6" :class="theme === 'dark' ? 'text-orange-400' : 'text-fuchsia-600'" />
          <span class="font-semibold">{{ t('nav.title') }}</span>
        </router-link>

        <!-- Desktop Navigation -->
        <div class="hidden md:flex gap-4">
          <router-link v-for="item in navigation" :key="item.name" :to="item.href"
            class="text-muted-foreground hover:text-foreground transition-colors flex items-center gap-2" :class="{
              'text-foreground': $route.path === item.href
            }">
            <component v-if="item.icon" :is="item.icon" class="h-4 w-4" />
            {{ item.name }}
          </router-link>
        </div>
      </div>

      <!-- Theme Toggle, Language, and Auth -->
      <div class="flex items-center gap-2">
        <!-- Hide theme toggle on mobile -->
        <Button variant="ghost" size="icon" @click="toggleTheme" class="hidden sm:inline-flex">
          <Sun v-if="theme === 'dark'" class="h-5 w-5" />
          <Moon v-else class="h-5 w-5" />
        </Button>

        <!-- Hide language toggle on mobile -->
        <Button variant="ghost"
          class="text-muted-foreground hover:text-foreground transition-colors hidden sm:inline-flex"
          @click="toggleLocale">
          {{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
        </Button>

        <!-- <ConnectionStatus v-if="nostrStore.isLoggedIn" /> -->
        <ConnectionStatus v-if="true" />

        <!-- <template v-if="nostrStore.isLoggedIn"> -->
        <template v-if="true">
          <LogoutDialog :onLogout="handleLogout" />
        </template>
        <Button v-else variant="ghost" size="icon" @click="openLogin"
          class="text-muted-foreground hover:text-foreground">
          <LogIn class="h-5 w-5" />
        </Button>

        <!-- Mobile menu button -->
        <Button variant="ghost" size="icon" class="md:hidden" @click="toggleMenu">
          <span class="sr-only">Open main menu</span>
          <Menu v-if="!isOpen" class="h-5 w-5" />
          <X v-else class="h-5 w-5" />
        </Button>
      </div>
    </div>

    <!-- Mobile menu -->
    <div v-show="isOpen"
      class="absolute left-0 right-0 top-14 z-[100] border-b bg-background md:hidden
        [@supports(backdrop-filter:blur(24px))]:bg-background/95 [@supports(backdrop-filter:blur(24px))]:backdrop-blur-sm">
      <div class="space-y-1 p-4">
        <!-- Add theme and language toggles to mobile menu -->
        <div class="flex items-center justify-between mb-4 px-2">
          <Button variant="ghost" size="icon" @click="toggleTheme">
            <Sun v-if="theme === 'dark'" class="h-5 w-5" />
            <Moon v-else class="h-5 w-5" />
          </Button>
          <Button variant="ghost" class="text-muted-foreground hover:text-foreground transition-colors"
            @click="toggleLocale">
            {{ locale === 'en' ? '🇪🇸 ES' : '🇺🇸 EN' }}
          </Button>
        </div>

        <router-link v-for="item in navigation" :key="item.name" :to="item.href"
          class="flex items-center gap-2 px-3 py-2 text-base font-medium text-muted-foreground hover:text-foreground transition-colors"
          :class="{
            'text-foreground': $route.path === item.href
          }" @click="isOpen = false">
          <component v-if="item.icon" :is="item.icon" class="h-4 w-4" />
          {{ item.name }}
        </router-link>
      </div>
    </div>
  </nav>

  <!-- Login Dialog -->
  <Dialog v-model:open="showLoginDialog">
    <DialogContent class="sm:max-w-md">
      <Login @success="showLoginDialog = false" />
    </DialogContent>
  </Dialog>
</template>
