<script setup>
import { ref, onMounted, watchEffect } from 'vue'
import { useRouter, useRoute } from 'vue-router'

const router = useRouter()
const route = useRoute()
const isLoggedIn = ref(false)
const isAdmin = ref(false)

// Figyeljük a bejelentkezési állapotot
watchEffect(() => {
  isLoggedIn.value = !!localStorage.getItem('token')
  isAdmin.value = localStorage.getItem('is_admin') === 'true'
})

const handleLogout = () => {
  localStorage.removeItem('token')
  localStorage.removeItem('is_admin')
  isLoggedIn.value = false
  router.push('/login')
}
</script>

<template>
  <div class="min-h-screen flex flex-col bg-gray-50 text-gray-900 font-sans">
    <nav class="bg-blue-700 text-white p-4 shadow-lg flex justify-between items-center z-50">
      <div class="flex items-center gap-2 cursor-pointer" @click="router.push('/')">
        <span class="text-2xl">🚗</span>
        <span class="font-bold text-xl tracking-tight">Service Finder</span>
      </div>
      
      <div class="space-x-6 hidden md:flex items-center">
        <template v-if="isLoggedIn">
          <router-link to="/" class="nav-link">Dashboard</router-link>
          <router-link to="/expenses" class="nav-link">Költségek</router-link>
          <router-link v-if="isAdmin" to="/admin" class="text-amber-400 font-bold hover:text-amber-300">⚙️ Admin</router-link>
          <button @click="handleLogout" class="bg-blue-800 px-4 py-2 rounded-lg text-sm hover:bg-blue-900 transition">Kijelentkezés</button>
        </template>
        <router-link v-else to="/login" class="bg-white text-blue-700 px-4 py-2 rounded-lg font-bold shadow-md hover:bg-blue-50 transition">
          Belépés
        </router-link>
      </div>
    </nav>

    <main class="flex-grow container mx-auto p-4 md:p-8 pb-24 md:pb-8">
      <router-view></router-view>
    </main>

    <footer v-if="isLoggedIn" class="md:hidden bg-white border-t flex justify-around p-3 sticky bottom-0 z-50 shadow-[0_-4px_10px_rgba(0,0,0,0.05)]">
      <router-link to="/" class="mobile-nav-link">
        <span class="text-2xl">📊</span><span class="text-[10px] font-medium uppercase">Jelentés</span>
      </router-link>
      <router-link to="/expenses" class="mobile-nav-link">
        <span class="text-2xl">💸</span><span class="text-[10px] font-medium uppercase">Költség</span>
      </router-link>
      <router-link v-if="isAdmin" to="/admin" class="mobile-nav-link">
        <span class="text-2xl">⚙️</span><span class="text-[10px] font-medium uppercase text-amber-600">Admin</span>
      </router-link>
      <button @click="handleLogout" class="mobile-nav-link text-red-500">
        <span class="text-2xl">🚪</span><span class="text-[10px] font-medium uppercase">Ki</span>
      </button>
    </footer>
  </div>
</template>

<style scoped>
.nav-link {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.2s;
  padding-bottom: 2px;
}

.nav-link:hover {
  color: white;
}

.router-link-active.nav-link {
  color: white;
  font-weight: 700;
  border-bottom: 2px solid white;
}

.mobile-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  color: #4b5563;
  text-decoration: none;
}

.router-link-active.mobile-nav-link {
  color: #1d4ed8;
}

.router-link-active.mobile-nav-link span:last-child {
  font-weight: 700;
}
</style>