<template>
  <div class="min-h-screen bg-neutral-light">
    <Navbar v-if="showNavbar" />
    
    <main>
      <div v-if="isAuthenticated && showNavbar" class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
        <router-view></router-view>
      </div>
      <div v-else>
        <router-view></router-view>
      </div>
    </main>
  </div>
</template>

<script>
import { computed, onMounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useAuthStore } from './stores/auth';
import Navbar from './components/Navbar.vue';

export default {
  name: 'App',
  components: {
    Navbar
  },
  setup() {
    const router = useRouter();
    const route = useRoute();
    const authStore = useAuthStore();
    
    const isAuthenticated = computed(() => {
      return authStore.isAuthenticated;
    });
    
    const showNavbar = computed(() => {
      // Hide navbar on public linktree page
      return !route.name || route.name !== 'linktree-public';
    });
    
    onMounted(() => {
      // Check if user is authenticated
      const token = localStorage.getItem('token');
      if (token) {
        authStore.setToken(token);
        
        // For demo purposes, set a mock user
        authStore.setUser({
          id: 1,
          name: 'ASMR Creator',
          email: 'creator@asmrplanner.com'
        });
      } else {
        // Redirect to login if not on auth pages or public linktree
        const publicRoutes = ['/login', '/register'];
        const isPublicLinktree = route.name === 'linktree-public';
        
        if (!publicRoutes.includes(router.currentRoute.value.path) && !isPublicLinktree) {
          router.push('/login');
        }
      }
    });
    
    return {
      isAuthenticated,
      showNavbar
    };
  }
};
</script> 