<script setup>
import { RouterLink, useRoute } from 'vue-router'
import { onMounted, ref } from 'vue'
import MobileMenuIcon from "@/components/icons/MobileMenuIcon.vue";
import SearchIcon from "@/components/icons/SearchIcon.vue";
import UserIcon from "@/components/icons/UserIcon.vue";

const showMobileMenu = ref(false);
const authenticated = ref(!!localStorage.getItem('token'));

function toggleMobileMenu() {
  showMobileMenu.value = !showMobileMenu.value;
}

</script>

<template>
  <header class="sticky items-center z-10 top-0 h-16 p-3 text-zinc-600 bg-white/80 backdrop-blur-sm bottom-shadow">
    <div class="flex justify-between items-center px-3 gap-12 max-w-screen-xl mx-auto">
      <RouterLink to="/">
        <img class="h-10" src="@/assets/logo.svg" alt="Travel Accomplice logo">
      </RouterLink>
      <nav class="hidden sm:flex items-center justify-between w-full">
        <ul class="flex items-center gap-6">
          <li class="hover:text-pink-400 transition-colors"><RouterLink to="/destinations">Destinations</RouterLink></li>
          <li v-if="authenticated" class="hover:text-pink-400 transition-colors"><RouterLink to="/my-destinations">My Destinations</RouterLink></li>
          <li class="hover:text-pink-400 transition-colors"><RouterLink to="/faq">FAQ</RouterLink></li>
        </ul>
        <div class="flex items-center gap-6">
          <RouterLink v-if="!useRoute().fullPath.includes('search')" to="/search"><button class="flex items-center justify-between bg-zinc-100 text-zinc-400 px-2 py-1 rounded-md"><span class="sm:hidden md:inline">Search destination...</span><SearchIcon class="flex items-center justify-center sm:h-7 md:h-5" /></button></RouterLink>
          <RouterLink to="/profile"><UserIcon v-if="authenticated" class="h-7 fill-zinc-600" /></RouterLink>
          <p v-if="!authenticated"><RouterLink to="/login">Sign in</RouterLink></p>
          <RouterLink to="/register"><BaseButton v-if="!authenticated">Sign up</BaseButton></RouterLink>
        </div>
      </nav>
      <button class="sm:hidden">
        <MobileMenuIcon class="h-8 text-zinc-600" @click="toggleMobileMenu"/>
      </button>
    </div>
    <div v-if="showMobileMenu" class="absolute -z-10 top-0 left-0 w-screen h-screen bg-white sm:hidden"></div>
    <nav v-if="showMobileMenu" class="sm:hidden flex flex-col justify-center items-center py-2 pb-6">
      <button class="flex items-center justify-between bg-zinc-100 text-zinc-400 px-2 py-1 my-4 rounded-md w-5/6"><span class="sm:hidden md:inline">Search destination...</span><SearchIcon class="flex items-center justify-center sm:h-7 md:h-5" /></button>
      <ul class="flex flex-col items-center space-y-4">
        <li class="hover:text-pink-400 transition-colors"><RouterLink @click="toggleMobileMenu" to="/destinations">Destinations</RouterLink></li>
        <li class="hover:text-pink-400 transition-colors"><RouterLink @click="toggleMobileMenu" to="/friends">Friends</RouterLink></li>
        <li class="hover:text-pink-400 transition-colors"><RouterLink @click="toggleMobileMenu" to="/faq">FAQ</RouterLink></li>
        <li v-if="authenticated" class="hover:text-pink-400 transition-colors"><RouterLink @click="toggleMobileMenu" to="/profile">User</RouterLink></li>
        <li v-if="!authenticated" class="hover:text-pink-400 transition-colors"><RouterLink @click="toggleMobileMenu" to="/login">Sign in</RouterLink></li>
        <li v-if="!authenticated" class="hover:text-pink-400 transition-colors"><RouterLink @click="toggleMobileMenu" to="/register">Sign up</RouterLink></li>
      </ul>
    </nav>
  </header>
</template>