<script setup>
import { useAuthStore } from "~/stores/auth-store.js";

const authStore = useAuthStore();
const isDark = ref(false);
const router = useRouter();

function toggleDark() {
  isDark.value = !isDark.value;
  if (isDark.value) {
    document.documentElement.classList.add('dark');
    localStorage.theme = 'dark';
  } else {
    document.documentElement.classList.remove('dark');
    localStorage.theme = 'light';
  }
}

function logout() {
  authStore.logout()
  router.push("/auth/login");
}

onMounted(() => {
  if (localStorage.theme === 'dark' || (!('theme' in localStorage) && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
    isDark.value = true;
    document.documentElement.classList.add('dark');
  }
});
</script>
<template>
  <nav
    class="sticky top-0 z-50 flex items-center justify-between px-6 py-4 bg-white/80 backdrop-blur-md shadow-sm border-b border-gray-100">

    <div class="flex items-center gap-6">
      <nuxt-link to="/" class="text-sm font-medium text-gray-600 hover:text-blue-600 transition-colors duration-200"
        active-class="text-blue-600 font-bold">
        Home
      </nuxt-link>
    </div>

    <div class="flex items-center gap-4">
      <button class="p-2 rounded-lg bg-gray-200 dark:bg-gray-700" @click="toggleDark">
        <span v-if="isDark">☀️</span>
        <span v-else>🌙</span>
      </button>

      <template v-if="authStore?.token">
        <label class="py-2 text-sm font-semibold">{{ authStore?.user.name }}</label>
        <button
          class="px-4 py-2 text-sm font-semibold text-red-800 bg-red-100 hover:bg-red-200 rounded-lg transition-all duration-200"
          @click.prevent="logout">
          Logout
        </button>
      </template>

      <template v-else>
        <nuxt-link to="/auth/login"
          class="px-5 py-2 text-sm font-semibold text-white! bg-blue-600 hover:bg-blue-700 rounded-lg shadow-sm transition-all">
          Login
        </nuxt-link>
      </template>
    </div>
  </nav>

  <main class="max-w-7xl mx-auto">
    <slot />
  </main>
</template>
