<script setup>
import { useRouter, useRoute } from 'vue-router'
import { useAuthStore } from '@/stores/authStore'
import { useThemeStore } from '@/stores/themeStore'
import DailyQuizModal from '@/components/DailyQuizModal.vue'
import QuickActionsFAB from '@/components/actions/QuickActionsFAB.vue'
import { ref } from 'vue'

const router = useRouter()
const route = useRoute()
const authStore = useAuthStore()
const themeStore = useThemeStore()

const handleLogout = () => {
  authStore.logout()
}

const toggleTheme = () => {
  themeStore.toggleTheme()
}

// Legal modal state
const showLegalModal = ref(false)
const legalModalTitle = ref('')
const legalModalContent = ref('')

const openLegalModal = (type) => {
  if (type === 'aszf') {
    legalModalTitle.value = 'Általános Szerződési Feltételek (ÁSZF)'
    legalModalContent.value = 'A jogi dokumentáció feltöltés alatt... A Service Finder szolgáltatás használatával Ön elfogadja az Általános Szerződési Feltételeket, amelyek meghatározzák a szolgáltatás használatának feltételeit, a felelősség korlátozását és a felhasználói jogokat.'
  } else if (type === 'adatkezeles') {
    legalModalTitle.value = 'Adatkezelési Tájékoztató (GDPR)'
    legalModalContent.value = 'A jogi dokumentáció feltöltés alatt... A Service Finder tiszteletben tartja az Ön adatvédelmét. E tájékoztató részletezi, hogyan gyűjtjük, tároljuk és kezeljük személyes adatait az Európai Unió Általános Adatvédelmi Rendelete (GDPR) és a vonatkozó magyar jogszabályok értelmében.'
  } else if (type === 'cookies') {
    legalModalTitle.value = 'Sütik (Cookies) Használata'
    legalModalContent.value = 'A jogi dokumentáció feltöltés alatt... Weboldalunk sütiket (cookies) használ a felhasználói élmény javítása, a funkciók működésének biztosítása és a forgalom elemzése érdekében. A sütik használatával kapcsolatos részletes információkat itt találja.'
  }
  showLegalModal.value = true
}

const closeLegalModal = () => {
  showLegalModal.value = false
}
</script>

<template>
  <div :class="['min-h-screen flex flex-col font-sans transition-all duration-500', themeStore.themeClasses.background, themeStore.themeClasses.text]">
    <!-- Premium Navigation -->
    <nav class="bg-gradient-to-r from-slate-800 to-slate-900 text-white p-4 shadow-xl flex justify-between items-center z-50 border-b border-slate-700/50 backdrop-blur-md">
      <div class="flex items-center gap-3 cursor-pointer group" @click="router.push('/')">
        <div class="p-2 rounded-xl bg-gradient-to-br from-blue-500 to-cyan-500 group-hover:from-blue-600 group-hover:to-cyan-600 transition-all duration-200">
          <span class="text-2xl">🚗</span>
        </div>
        <div class="flex flex-col">
          <span class="font-bold text-xl tracking-tight">Service Finder</span>
          <span class="text-xs text-slate-300">Premium Vehicle Management</span>
        </div>
      </div>
      
      <div class="space-x-6 hidden md:flex items-center">
        <template v-if="authStore.isLoggedIn">
          <router-link to="/" class="nav-link text-slate-200 hover:text-white font-medium transition-colors duration-200 hover:scale-105">Dashboard</router-link>
          <router-link to="/expenses" class="nav-link text-slate-200 hover:text-white font-medium transition-colors duration-200 hover:scale-105">Költségek</router-link>
          <router-link v-if="authStore.isAdmin" to="/admin" class="text-amber-300 font-bold hover:text-amber-200 transition-colors duration-200 hover:scale-105">⚙️ Admin</router-link>
          
          <!-- User Role Badge -->
          <div v-if="authStore.isTester" class="px-3 py-1.5 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg text-xs font-bold text-white border border-purple-500/50 shadow-md animate-pulse">
            🧪 {{ authStore.displayName }}
          </div>
          <div v-else-if="authStore.isAdmin" class="px-3 py-1.5 bg-gradient-to-r from-amber-600 to-orange-600 rounded-lg text-xs font-bold text-white border border-amber-500/50 shadow-md">
            ⚡ {{ authStore.displayName }}
          </div>
          
          <button @click="toggleTheme" :class="['px-4 py-2.5 rounded-xl text-sm transition-all duration-200 active:scale-95 border shadow-md hover:shadow-lg', themeStore.isLuxury ? 'bg-gradient-to-r from-amber-700 to-amber-800 border-amber-600/50 text-white hover:from-amber-800 hover:to-amber-900' : 'bg-gradient-to-r from-orange-700 to-orange-800 border-orange-600/50 text-white hover:from-orange-800 hover:to-orange-900']">
            {{ themeStore.isLuxury ? '🏛️ Luxury' : '🔧 Workshop' }}
          </button>
          <button @click="handleLogout" class="bg-gradient-to-r from-slate-700 to-slate-800 px-5 py-2.5 rounded-xl text-sm hover:from-slate-800 hover:to-slate-900 transition-all duration-200 active:scale-95 border border-slate-600/50 shadow-md hover:shadow-lg">
            Kijelentkezés
          </button>
        </template>
        <template v-else>
          <router-link to="/login" class="text-slate-200 hover:text-white font-medium transition-colors duration-200">Bejelentkezés</router-link>
          <router-link to="/register" class="bg-gradient-to-r from-blue-600 to-cyan-600 px-5 py-2.5 rounded-xl text-sm hover:from-blue-700 hover:to-cyan-700 transition-all duration-200 active:scale-95 shadow-md hover:shadow-lg">
            Regisztráció
          </router-link>
        </template>
      </div>

      <!-- Mobile menu button -->
      <button class="md:hidden p-2 rounded-lg bg-slate-700/50 hover:bg-slate-700 transition-colors">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
        </svg>
      </button>
    </nav>

    <!-- Main Content -->
    <main class="flex-1 p-4 md:p-6 max-w-7xl mx-auto w-full">
      <router-view />
    </main>

    <!-- Daily Quiz Modal -->
    <DailyQuizModal v-if="authStore.isLoggedIn && route.path !== '/login' && route.path !== '/register' && route.path !== '/debug'" />

    <!-- Quick Actions FAB -->
    <QuickActionsFAB v-if="authStore.isLoggedIn && route.path !== '/login' && route.path !== '/register' && route.path !== '/debug'" />

    <!-- Legal Modal -->
    <div v-if="showLegalModal" class="fixed inset-0 z-[100] flex items-center justify-center bg-black/70 backdrop-blur-sm transition-all duration-300">
      <div class="bg-gradient-to-br from-slate-800 to-slate-900 rounded-2xl shadow-2xl border border-slate-700/50 w-full max-w-2xl mx-4 overflow-hidden transform transition-all duration-300 scale-100">
        <div class="p-6 border-b border-slate-700/50">
          <div class="flex justify-between items-center">
            <h3 class="text-xl font-bold text-white">{{ legalModalTitle }}</h3>
            <button @click="closeLegalModal" class="text-slate-400 hover:text-white transition-colors duration-200 p-2 rounded-lg hover:bg-slate-700/50">
              <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
              </svg>
            </button>
          </div>
        </div>
        <div class="p-6 max-h-[60vh] overflow-y-auto">
          <div class="prose prose-invert max-w-none">
            <p class="text-slate-300 mb-4">{{ legalModalContent }}</p>
            <div class="bg-slate-800/50 rounded-xl p-4 border border-slate-700/50 mt-6">
              <div class="flex items-center space-x-3">
                <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-500 to-cyan-500 flex items-center justify-center">
                  <span class="text-white font-bold">ℹ️</span>
                </div>
                <div>
                  <p class="text-sm text-slate-400">Ez egy helykitöltő szöveg. A végleges jogi dokumentáció a termék bevezetésével együtt kerül feltöltésre.</p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="p-6 border-t border-slate-700/50 bg-slate-900/50">
          <div class="flex justify-end">
            <button @click="closeLegalModal" class="px-6 py-3 bg-gradient-to-r from-blue-600 to-cyan-600 hover:from-blue-700 hover:to-cyan-700 text-white font-medium rounded-xl transition-all duration-200 active:scale-95 shadow-md hover:shadow-lg">
              Bezárás
            </button>
          </div>
        </div>
      </div>
    </div>

    <!-- Premium Footer -->
    <footer class="mt-auto bg-gradient-to-r from-slate-800 to-slate-900 text-slate-300 p-6 border-t border-slate-700/50">
      <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center">
        <div class="mb-4 md:mb-0">
          <div class="flex items-center gap-2 mb-2">
            <span class="text-2xl">🚗</span>
            <span class="font-bold text-white">Service Finder</span>
          </div>
          <p class="text-sm text-slate-400">Premium vehicle management for individuals and businesses</p>
        </div>
        <div class="flex gap-6">
          <button @click="openLegalModal('aszf')" class="text-slate-400 hover:text-white transition-colors duration-200 text-sm hover:underline">ÁSZF</button>
          <button @click="openLegalModal('adatkezeles')" class="text-slate-400 hover:text-white transition-colors duration-200 text-sm hover:underline">Adatkezelési Tájékoztató</button>
          <button @click="openLegalModal('cookies')" class="text-slate-400 hover:text-white transition-colors duration-200 text-sm hover:underline">Sütik</button>
          <a href="#" class="text-slate-400 hover:text-white transition-colors duration-200 text-sm">Kapcsolat</a>
        </div>
      </div>
      <div class="max-w-7xl mx-auto mt-6 pt-6 border-t border-slate-700/50 text-center text-xs text-slate-500">
        © 2026 Service Finder. Minden jog fenntartva. Gépjármű-rajongók számára készült precízióval.
      </div>
    </footer>
  </div>
</template>

<style scoped>
.nav-link {
  position: relative;
  padding: 0.5rem 0;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: linear-gradient(to right, #3b82f6, #06b6d4);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

/* Smooth transitions */
* {
  transition-property: color, background-color, border-color, transform, box-shadow;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
</style>