<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>
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Common Variables */
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --transition-speed: 0.3s;
}

/* 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.12);
  --shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.6);
  
  --header-bg: rgba(15, 23, 42, 0.9);
  --header-text: #ffffff;
  
  --card-bg: rgba(30, 41, 59, 0.85); /* Increased opacity for better legibility */
  --hover-bg: rgba(255, 255, 255, 0.08);
  --active-bg: rgba(254, 231, 21, 0.15);
  --active-color: #fee715;
  --accent-color: #fee715;
  --accent-hover: #fde047;
  
  --glass-bg: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.15);
}

/* LIGHT THEME */
html.light-theme {
  --bg-primary: #f1f5f9; /* Slightly darker light background */
  --bg-secondary: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --border-color: #cbd5e1; /* More visible borders */
  --header-bg: #ffffff;
  --header-text: #0f172a;
  --card-bg: #ffffff;
  --hover-bg: #f1f5f9;
  --glass-bg: rgba(255, 255, 255, 0.9);
  --glass-border: #e2e8f0;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.12); /* Stronger shadow in light mode */
  --active-bg: rgba(16, 24, 32, 0.1);
  --active-color: #101820;
  --accent-color: #101820;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: all 0.3s ease;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  letter-spacing: -0.01em;
}

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

#app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  padding-top: calc(v-bind("isSplashScreen || isAuthScreen ? '0px' : '64px'") + var(--safe-area-top));
}

/* 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>
