<script setup lang="ts">
import { computed, onMounted, onUnmounted, watch } 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'
// 🔧 FIX: Importar stores para resetear isLoading al volver del background
import { useScheduleStore } from './stores/schedule'
import { useRouteStore } from './stores/route'
import { useTaxiStore } from './stores/taxi'
import { useShuttleStore } from './stores/shuttle'
import { useCouponStore } from './stores/coupon'
import { supabase } from '@/supabase'
import { useGoogleMaps } from '@/composables/useGoogleMaps'
// useFavoritesStore ya importado arriba (línea 8)

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

// Iniciar descarga asíncrona masiva de Google Maps al bootear VUE (Ahorra ~3 seg de espera en MapView)
loadMaps()

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

async 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(`SIB | App.vue dispatching auth check and refocus — motivo: ${reason}`)

  // 🛡 HIGIENE TRANSACCIONAL: Solo verificamos sesión si el usuario estaba logueado.
  // Si Guest, omitimos el Refresh para no fallar
  if (authStore.isAuthenticated) {
    console.log(`SIB | Verificando sanidad de sesión Supabase...`)
    const timeoutMs = 5000

    const refreshWithTimeout = Promise.race([
      supabase.auth.getSession(), // Usa caché interno si el token no ha expirado, previene delays innecesarios HTTP de 1-3 segundos
      new Promise((_, reject) =>
        setTimeout(() => reject(new Error("Auth refresh timeout")), timeoutMs)
      )
    ])

    try {
      await refreshWithTimeout
    } catch (err: any) {
      console.warn("SIB | Error al verificar sesión en refocus (timeout o red).", err)
      // FIX CRÍTICO: Si el error es de timeout (5s), la persona estaba eligiendo ruta o 
      // subiendo archivo y la red tardó. NUNCA expulsarla automáticamente en timeout. 
      // El caché local de Supabase ya mantiene su sesión válida bajo el capó.
      if (err.message === "Auth refresh timeout") {
        console.log("SIB | Ignorando timeout, manteniendo sesión optimista.")
      } else {
        // Solo si hay un error real de Auth (sesión vencida rechazada por Supabase)
        // se cierra sesión, pero no haremos signOut agresivo sin confirmar.
      }
    }
  }

  // Una vez que sabemos que la autenticación está sana (o no era relevante), enviamos señal a la UI
  window.dispatchEvent(new CustomEvent('app-refocus'))
}

/**
 * 🔧 FIX CRÍTICO: Resetear todos los isLoading antes de refocus.
 *
 * Cuando se apaga/bloquea la pantalla, el OS puede congelar el JS thread.
 * En ese caso, los fetch en vuelo son abortados por el navegador y el bloque
 * `finally` puede no ejecutarse, dejando isLoading = true para siempre.
 *
 * Este reset garantiza que la UI no quede bloqueada con un spinner infinito
 * al volver de background, mostrando los datos que ya estaban cargados.
 */
function forceResetAllLoadingStates() {
  try {
    useScheduleStore().$patch({ isLoading: false })
    useRouteStore().$patch({ isLoadingRoutes: false, isLoadingStops: false })
    useTaxiStore().$patch({ isLoading: false })
    useShuttleStore().$patch({ isLoading: false })
    useCouponStore().$patch({ isLoading: false })
    // Favorites: solo existe cuando hay usuario autenticado — el bug específico
    if (authStore.isAuthenticated) {
      useFavoritesStore().$patch({ isLoading: false })
    }
    console.log('SIB | ✅ Loading states reseteados tras regreso del background')
  } catch (e) {
    console.warn('SIB | No se pudo resetear loading states:', e)
  }
}

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) {
      // Reset de loading states: solo si estuvo más de 3s (suficiente para que
      // el OS congele el JS thread y los fetch queden colgados)
      if (secondsAway > 3) {
        forceResetAllLoadingStates()
      }
      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
    forceResetAllLoadingStates()
    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) {
      if (secondsAway > 3) {
        forceResetAllLoadingStates()
      }
      dispatchRefocus(`window focus tras ${secondsAway.toFixed(1)}s`)
    }
    lastHiddenAt = null
  }
}

onMounted(() => {
  themeStore.applyTheme()
  analyticsService.logEvent({
    event_name: 'app_open',
    properties: { language: locale.value }
  })
  document.addEventListener('visibilitychange', handleVisibilityChange)
  window.addEventListener('pageshow', handlePageShow)
  window.addEventListener('focus', handleWindowFocus)
})

// Cargar favoritos cuando Supabase confirme la sesión (puede ser después de onMounted)
// immediate:true cubre el caso donde la sesión ya está lista al arrancar
const stopFavWatcher = watch(
  () => authStore.isAuthenticated,
  (authenticated) => {
    if (authenticated && favoritesStore.favorites.length === 0 && !favoritesStore.isLoading) {
      favoritesStore.loadFavorites()
      stopFavWatcher() // Solo necesitamos cargarlo una vez al inicio
    }
  },
  { immediate: true }
)

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>
