SIB/frontend/src/App.vue

<script setup lang="ts">
import { computed, onMounted, onUnmounted } 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 { useAuthStore } from './stores/auth'
import { useFavoritesStore } from './stores/favorites'
import { analyticsService } from '@/services/analyticsService'

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

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

let lastHiddenAt: number | null = null
let refocusDebounceTimer: ReturnType<typeof setTimeout> | null = null

function dispatchRefocus(reason: string) {
  // Debounce: no disparar dos eventos seguidos en menos de 1 segundo
  if (refocusDebounceTimer) return
  refocusDebounceTimer = setTimeout(() => { refocusDebounceTimer = null }, 1000)
  console.log(`SIBU | App refocus — motivo: ${reason}`)
  window.dispatchEvent(new CustomEvent('app-refocus'))
}

function handleVisibilityChange() {
  if (document.visibilityState === 'hidden') {
    lastHiddenAt = Date.now()
    return
  }
  if (document.visibilityState === 'visible' && lastHiddenAt !== null) {
    const secondsAway = (Date.now() - lastHiddenAt) / 1000
    // Umbral bajo (1 s) para capturar retornos rápidos desde Google Maps / links externos
    if (secondsAway > 1) {
      dispatchRefocus(`visibilitychange tras ${secondsAway.toFixed(1)}s`)
    }
    lastHiddenAt = null
  }
}

// Fallback: 'pageshow' se dispara al volver desde el bfcache (back-forward cache)
// Muy común en Safari/iOS cuando se abre un link externo y se regresa
function handlePageShow(event: PageTransitionEvent) {
  if (event.persisted) {
    // La página fue restaurada desde bfcache — siempre necesita refocus
    dispatchRefocus('pageshow persisted (bfcache)')
  }
}

// Fallback: 'focus' en window cubre casos donde visibilitychange no se dispara
// (algunos navegadores Android al volver de otra app)
let windowFocusTimer: ReturnType<typeof setTimeout> | null = null
function handleWindowFocus() {
  // Solo si la pestaña estuvo oculta antes
  if (lastHiddenAt !== null) {
    const secondsAway = (Date.now() - lastHiddenAt) / 1000
    if (secondsAway > 1) {
      dispatchRefocus(`window focus tras ${secondsAway.toFixed(1)}s`)
    }
    lastHiddenAt = null
  }
}

onMounted(() => {
  themeStore.applyTheme()
  analyticsService.logEvent({
    event_name: 'app_open',
    properties: { language: locale.value }
  })
  // Load favorites if the user is already logged in
  if (authStore.isAuthenticated) {
    favoritesStore.loadFavorites()
  }
  document.addEventListener('visibilitychange', handleVisibilityChange)
  window.addEventListener('pageshow', handlePageShow)
  window.addEventListener('focus', handleWindowFocus)
})

onUnmounted(() => {
  document.removeEventListener('visibilitychange', handleVisibilityChange)
  window.removeEventListener('pageshow', handlePageShow)
  window.removeEventListener('focus', handleWindowFocus)
  if (refocusDebounceTimer) clearTimeout(refocusDebounceTimer)
  if (windowFocusTimer) clearTimeout(windowFocusTimer)
})
</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(254, 231, 21, 0.08);
  --glass-bg: rgba(255, 255, 255, 0.8);
  --glass-border: rgba(254, 231, 21, 0.2);
  --shadow: 0 15px 40px rgba(15, 23, 42, 0.1);
  --active-bg: rgba(254, 231, 21, 0.15);
  --active-color: #fee715; 
  --accent-color: #fee715;
}

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>