<template>
  <nav class="bg-white shadow border-b border-neutral-light">
    <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
      <div class="flex justify-between h-16">
        <div class="flex">
          <div class="flex-shrink-0 flex items-center">
            <router-link to="/" class="text-primary font-bold text-xl">
              {{ $t('app.title') }}
            </router-link>
          </div>
          <div class="hidden sm:ml-6 sm:flex sm:space-x-8">
            <!-- Current: "border-primary text-neutral-dark", Default: "border-transparent text-neutral hover:border-neutral hover:text-neutral-dark" -->
            <router-link 
              to="/" 
              class="border-transparent text-neutral hover:border-neutral hover:text-neutral-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200"
              :class="{ 'border-primary text-neutral-dark': $route.name === 'dashboard' }"
            >
              {{ $t('nav.dashboard') }}
            </router-link>
            <router-link 
              to="/calendar" 
              class="border-transparent text-neutral hover:border-neutral hover:text-neutral-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200"
              :class="{ 'border-primary text-neutral-dark': $route.name === 'calendar' }"
            >
              {{ $t('nav.calendar') }}
            </router-link>
            <router-link 
              to="/uploads" 
              class="border-transparent text-neutral hover:border-neutral hover:text-neutral-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200"
              :class="{ 'border-primary text-neutral-dark': $route.name === 'uploads' }"
            >
              Uploads
            </router-link>
            <router-link 
              to="/comments" 
              class="border-transparent text-neutral hover:border-neutral hover:text-neutral-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200"
              :class="{ 'border-primary text-neutral-dark': $route.name === 'comments' }"
            >
              {{ $t('nav.comments') }}
            </router-link>
            <router-link 
              to="/analytics" 
              class="border-transparent text-neutral hover:border-neutral hover:text-neutral-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200"
              :class="{ 'border-primary text-neutral-dark': $route.name === 'analytics' }"
            >
              {{ $t('nav.analytics') }}
            </router-link>
            <router-link 
              to="/earnings" 
              class="border-transparent text-neutral hover:border-neutral hover:text-neutral-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200"
              :class="{ 'border-primary text-neutral-dark': $route.name === 'earnings' }"
            >
              {{ $t('nav.earnings') }}
            </router-link>
            <router-link 
              to="/linktree" 
              class="border-transparent text-neutral hover:border-neutral hover:text-neutral-dark inline-flex items-center px-1 pt-1 border-b-2 text-sm font-medium transition-colors duration-200"
              :class="{ 'border-primary text-neutral-dark': $route.name === 'linktree' || $route.name === 'linktree-public' }"
            >
              {{ $t('nav.linktree') }}
            </router-link>
          </div>
        </div>
        <div class="hidden sm:ml-6 sm:flex sm:items-center">
          <!-- Language Selector -->
          <div class="mr-4">
            <LanguageSelector />
          </div>
          
          <!-- Profile dropdown -->
          <div class="ml-3 relative">
            <div>
              <button 
                @click="toggleDropdown" 
                type="button" 
                class="bg-white rounded-full flex text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" 
                id="user-menu-button" 
                aria-expanded="false" 
                aria-haspopup="true"
              >
                <span class="sr-only">{{ $t('nav.openUserMenu') }}</span>
                <div class="h-8 w-8 rounded-full bg-secondary-lavender-light flex items-center justify-center text-secondary-lavender-dark">
                  {{ userInitials }}
                </div>
              </button>
            </div>

            <div 
              v-if="showDropdown" 
              class="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" 
              role="menu" 
              aria-orientation="vertical" 
              aria-labelledby="user-menu-button" 
              tabindex="-1"
            >
              <router-link to="/settings" class="block px-4 py-2 text-sm text-neutral-dark hover:bg-neutral-light transition-colors duration-200" role="menuitem">
                {{ $t('nav.settings') }}
              </router-link>
              <a href="#" @click.prevent="logout" class="block px-4 py-2 text-sm text-neutral-dark hover:bg-neutral-light transition-colors duration-200" role="menuitem">
                {{ $t('nav.signOut') }}
              </a>
            </div>
          </div>
        </div>
        <div class="-mr-2 flex items-center sm:hidden">
          <!-- Mobile menu button -->
          <button 
            @click="toggleMobileMenu" 
            type="button" 
            class="inline-flex items-center justify-center p-2 rounded-md text-neutral hover:text-neutral-dark hover:bg-neutral-light focus:outline-none focus:ring-2 focus:ring-inset focus:ring-primary transition-colors duration-200" 
            aria-controls="mobile-menu" 
            :aria-expanded="showMobileMenu"
          >
            <span class="sr-only">{{ $t('nav.openMenu') }}</span>
            <!-- Icon when menu is closed -->
            <svg 
              v-if="!showMobileMenu" 
              class="block h-6 w-6" 
              xmlns="http://www.w3.org/2000/svg" 
              fill="none" 
              viewBox="0 0 24 24" 
              stroke="currentColor" 
              aria-hidden="true"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
            </svg>
            <!-- Icon when menu is open -->
            <svg 
              v-else 
              class="block h-6 w-6" 
              xmlns="http://www.w3.org/2000/svg" 
              fill="none" 
              viewBox="0 0 24 24" 
              stroke="currentColor" 
              aria-hidden="true"
            >
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
            </svg>
          </button>
        </div>
      </div>
    </div>

    <!-- Mobile menu, show/hide based on menu state. -->
    <div v-if="showMobileMenu" class="sm:hidden" id="mobile-menu">
      <div class="pt-2 pb-3 space-y-1">
        <router-link 
          to="/" 
          class="bg-white border-transparent text-neutral hover:bg-neutral-light hover:border-neutral hover:text-neutral-dark block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200"
          :class="{ 'bg-primary-50 border-primary text-primary-700': $route.name === 'dashboard' }"
        >
          {{ $t('nav.dashboard') }}
        </router-link>
        <router-link 
          to="/calendar" 
          class="bg-white border-transparent text-neutral hover:bg-neutral-light hover:border-neutral hover:text-neutral-dark block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200"
          :class="{ 'bg-primary-50 border-primary text-primary-700': $route.name === 'calendar' }"
        >
          {{ $t('nav.calendar') }}
        </router-link>
        <router-link 
          to="/uploads" 
          class="bg-white border-transparent text-neutral hover:bg-neutral-light hover:border-neutral hover:text-neutral-dark block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200"
          :class="{ 'bg-primary-50 border-primary text-primary-700': $route.name === 'uploads' }"
        >
          Uploads
        </router-link>
        <router-link 
          to="/comments" 
          class="bg-white border-transparent text-neutral hover:bg-neutral-light hover:border-neutral hover:text-neutral-dark block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200"
          :class="{ 'bg-primary-50 border-primary text-primary-700': $route.name === 'comments' }"
        >
          {{ $t('nav.comments') }}
        </router-link>
        <router-link 
          to="/analytics" 
          class="bg-white border-transparent text-neutral hover:bg-neutral-light hover:border-neutral hover:text-neutral-dark block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200"
          :class="{ 'bg-primary-50 border-primary text-primary-700': $route.name === 'analytics' }"
        >
          {{ $t('nav.analytics') }}
        </router-link>
        <router-link 
          to="/earnings" 
          class="bg-white border-transparent text-neutral hover:bg-neutral-light hover:border-neutral hover:text-neutral-dark block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200"
          :class="{ 'bg-primary-50 border-primary text-primary-700': $route.name === 'earnings' }"
        >
          {{ $t('nav.earnings') }}
        </router-link>
        <router-link 
          to="/linktree" 
          class="bg-white border-transparent text-neutral hover:bg-neutral-light hover:border-neutral hover:text-neutral-dark block pl-3 pr-4 py-2 border-l-4 text-base font-medium transition-colors duration-200"
          :class="{ 'bg-primary-50 border-primary text-primary-700': $route.name === 'linktree' || $route.name === 'linktree-public' }"
        >
          {{ $t('nav.linktree') }}
        </router-link>
      </div>
      
      <!-- Language Selector in Mobile Menu -->
      <div class="pt-2 pb-3 border-t border-neutral-light">
        <div class="px-4 py-2">
          <LanguageSelector />
        </div>
      </div>
      
      <div class="pt-4 pb-3 border-t border-neutral-light">
        <div class="flex items-center px-4">
          <div class="flex-shrink-0">
            <div class="h-10 w-10 rounded-full bg-secondary-lavender-light flex items-center justify-center text-secondary-lavender-dark">
              {{ userInitials }}
            </div>
          </div>
          <div class="ml-3">
            <div class="text-base font-medium text-neutral-dark">{{ user.name }}</div>
            <div class="text-sm font-medium text-neutral">{{ user.email }}</div>
          </div>
        </div>
        <div class="mt-3 space-y-1">
          <router-link 
            to="/settings" 
            class="block px-4 py-2 text-base font-medium text-neutral hover:text-neutral-dark hover:bg-neutral-light transition-colors duration-200"
          >
            {{ $t('nav.settings') }}
          </router-link>
          <a 
            href="#" 
            @click.prevent="logout" 
            class="block px-4 py-2 text-base font-medium text-neutral hover:text-neutral-dark hover:bg-neutral-light transition-colors duration-200"
          >
            {{ $t('nav.signOut') }}
          </a>
        </div>
      </div>
    </div>
  </nav>
</template>

<script>
import { ref, computed } from 'vue';
import { useRouter } from 'vue-router';
import { useAuthStore } from '../stores/auth';
import LanguageSelector from './LanguageSelector.vue';

export default {
  name: 'Navbar',
  components: {
    LanguageSelector
  },
  setup() {
    const router = useRouter();
    const authStore = useAuthStore();
    
    const showDropdown = ref(false);
    const showMobileMenu = ref(false);
    
    const user = computed(() => authStore.getUser);
    
    const userInitials = computed(() => {
      if (!user.value || !user.value.name) return '';
      
      const nameParts = user.value.name.split(' ');
      if (nameParts.length === 1) {
        return nameParts[0].charAt(0).toUpperCase();
      }
      
      return (nameParts[0].charAt(0) + nameParts[nameParts.length - 1].charAt(0)).toUpperCase();
    });
    
    const toggleDropdown = () => {
      showDropdown.value = !showDropdown.value;
    };
    
    const toggleMobileMenu = () => {
      showMobileMenu.value = !showMobileMenu.value;
    };
    
    const logout = () => {
      authStore.logout();
      router.push('/login');
    };
    
    // Close dropdown when clicking outside
    window.addEventListener('click', (e) => {
      if (!e.target.closest('#user-menu-button')) {
        showDropdown.value = false;
      }
    });
    
    return {
      user,
      userInitials,
      showDropdown,
      showMobileMenu,
      toggleDropdown,
      toggleMobileMenu,
      logout
    };
  }
};
</script> 