<script setup lang="ts">
import { computed, onMounted } from 'vue'
import { RouterView, useRoute } from "vue-router";
import { useI18n } from 'vue-i18n'
import MainLayout from "./components/layouts/MainLayout.vue";
import { useThemeStore } from './stores/theme'
import { analyticsService } from '@/services/analyticsService'

// Initialize theme store
const route = useRoute()
const { locale } = useI18n()
const themeStore = useThemeStore()

const isSplashScreen = computed(() => route.name === 'splash')
const isAuthScreen = computed(() => route.name === 'auth' || route.path === '/login')

onMounted(() => {
  themeStore.applyTheme()
  analyticsService.logEvent({
    event_name: 'app_open',
    properties: { language: locale.value }
  })
})
</script>

<template>
  <MainLayout v-if="!isSplashScreen && !isAuthScreen">
    <RouterView />
  </MainLayout>
  <RouterView v-else />
</template>

<style>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&display=swap');

:root {
  /* Common Variables */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --transition-speed: 0.4s;
  --font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif;
}

/* DARK THEME (Default & .dark) */
:root, 
html.dark {
  --bg-primary: #0f172a;
  --bg-secondary: #020617;
  --text-primary: #f8fafc;
  --text-secondary: #94a3b8;
  --border-color: rgba(255, 255, 255, 0.1);
  --shadow: 0 20px 50px rgba(0, 0, 0, 0.5);
  
  --header-bg: rgba(15, 23, 42, 0.8);
  --header-text: #ffffff;
  
  --card-bg: rgba(30, 41, 59, 0.7);
  --hover-bg: rgba(254, 231, 21, 0.08); /* SIBU Gold hint on hover */
  --active-bg: rgba(254, 231, 21, 0.15);
  --active-color: #fee715;
  --accent-color: #fee715;
  --accent-hover: #fde047;
  
  --glass-bg: rgba(15, 23, 42, 0.6);
  --glass-border: rgba(254, 231, 21, 0.2);
}

/* LIGHT THEME */
html.light-theme {
  --bg-primary: #f0f4f8;
  --bg-secondary: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --border-color: rgba(15, 23, 42, 0.1);
  --header-bg: rgba(255, 255, 255, 0.85);
  --header-text: #0f172a;
  --card-bg: rgba(255, 255, 255, 0.95);
  --hover-bg: rgba(37, 99, 235, 0.05); /* Soft Blue hover */
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(37, 99, 235, 0.1);
  --shadow: 0 15px 40px rgba(15, 23, 42, 0.1);
  --active-bg: rgba(37, 99, 235, 0.1);
  --active-color: #2563eb; /* Premium Nexus Blue */
  --accent-color: #2563eb;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.5s ease-in-out;
  font-family: var(--font-family);
  letter-spacing: -0.02em;
}

body {
  -webkit-font-smoothing: antialiased;
}

#app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Global Utilities */
.glass-effect {
  background: var(--glass-bg);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--glass-border);
}

.gradient-text {
  background: linear-gradient(135deg, #fee715 0%, #facc15 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* App Transition */
.page-enter-active,
.page-leave-active {
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.page-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.page-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

::-webkit-scrollbar {
  width: 5px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--border-color);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--active-color);
}
</style>
