feat: motor de calculo real de llegadas de buses por parada - reemplaza datos mock con logica usando travel_time_minutes + horarios del dia, con soporte GPS para tiempos de espera en tiempo real

frontend/src/components/BusStopInfoModal.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ref, watch } from 'vue'
 import type { BusStop } from '@/types'
-import { busStopsService } from '@/services/busStopsService'
+import { busStopsService, type BusArrival } from '@/services/busStopsService'
 import FavoriteButton from '@/components/FavoriteButton.vue'
 import { formatTo12Hour } from '@/utils/timeFormatter'
 
@@ -13,22 +13,49 @@ interface Props {
 const props = defineProps<Props>()
 const emit = defineEmits(['close', 'navigate'])
 
-const upcomingArrivals = ref<{ routeName: string; arrivalTime: string }[]>([])
+const upcomingArrivals = ref<BusArrival[]>([])
 const isLoading = ref(false)
+const hasGps = ref(false)
+
+// Try to get user GPS position (non-blocking)
+async function getUserPosition(): Promise<{ lat: number; lng: number } | null> {
+  if (!navigator.geolocation) return null
+  return new Promise((resolve) => {
+    navigator.geolocation.getCurrentPosition(
+      (pos) => resolve({ lat: pos.coords.latitude, lng: pos.coords.longitude }),
+      () => resolve(null),  // user denied or error → null (option A: show raw times)
+      { timeout: 5000, maximumAge: 60000 }
+    )
+  })
+}
 
-// Function to fetch arrivals
 async function loadArrivals() {
-  if (props.busStop) {
+  if (!props.busStop) return
   isLoading.value = true
+  upcomingArrivals.value = []
   try {
-      upcomingArrivals.value = await busStopsService.getNextBusArrivals(props.busStop.id)
+    const pos = await getUserPosition()
+    hasGps.value = pos !== null
+    upcomingArrivals.value = await busStopsService.getNextBusesForStop(
+      props.busStop.id,
+      pos?.lat,
+      pos?.lng
+    )
   } catch (e) {
     console.error('Failed to load arrivals', e)
     upcomingArrivals.value = []
   } finally {
     isLoading.value = false
   }
-  }
+}
+
+/** Format wait time as human label: "2 min", "1 h 5 min" */
+function formatWait(minutes: number): string {
+  if (minutes < 1) return 'Llegando'
+  if (minutes < 60) return `${Math.round(minutes)} min`
+  const h = Math.floor(minutes / 60)
+  const m = Math.round(minutes % 60)
+  return m > 0 ? `${h}h ${m}min` : `${h}h`
 }
 
 function startInternalNavigation() {
@@ -37,17 +64,12 @@ function startInternalNavigation() {
   }
 }
 
-// Watch for changes in busStop or isOpen to reload data
 watch(() => props.busStop, async (newStop) => {
-  if (newStop && props.isOpen) {
+  if (newStop && props.isOpen) await loadArrivals()
-    await loadArrivals()
-  }
 })
 
 watch(() => props.isOpen, async (isOpen) => {
-  if (isOpen && props.busStop) {
+  if (isOpen && props.busStop) await loadArrivals()
-    await loadArrivals()
-  }
 })
 </script>
 
@@ -81,25 +103,32 @@ watch(() => props.isOpen, async (isOpen) => {
         <div v-if="busStop" class="amenities-container">
            <div v-if="busStop.has_shelter" class="amenity-chip" title="Shelter available">
              <span class="material-icons md-16">roofing</span>
-             <span>Shelter</span>
+             <span>Cubierta</span>
            </div>
            <div v-if="busStop.has_seating" class="amenity-chip" title="Seating available">
              <span class="material-icons md-16">event_seat</span>
-             <span>Seating</span>
+             <span>Asientos</span>
            </div>
            <div v-if="busStop.is_accessible" class="amenity-chip" title="Wheelchair accessible">
              <span class="material-icons md-16">accessible</span>
-             <span>Accessible</span>
+             <span>Accesible</span>
            </div>
         </div>
 
         <!-- Body -->
         <div class="modal-body">
-          <h4 class="section-title">Next Arrivals</h4>
+          <!-- Section header with GPS status badge -->
+          <div class="arrivals-header">
+            <h4 class="section-title">Próximos Buses</h4>
+            <div v-if="!isLoading" class="gps-badge" :class="hasGps ? 'gps-on' : 'gps-off'">
+              <span class="material-icons md-16">{{ hasGps ? 'gps_fixed' : 'gps_off' }}</span>
+              <span>{{ hasGps ? 'Tiempo real' : 'Horario' }}</span>
+            </div>
+          </div>
           
           <div v-if="isLoading" class="loading-state">
             <span class="material-icons spin">refresh</span>
-            <p>Loading arrivals...</p>
+            <p>Obteniendo horarios...</p>
           </div>
 
           <div v-else-if="upcomingArrivals.length > 0" class="arrivals-list">
@@ -107,20 +136,35 @@ watch(() => props.isOpen, async (isOpen) => {
               v-for="(arrival, index) in upcomingArrivals" 
               :key="index" 
               class="arrival-item"
-              :style="{ animationDelay: `${index * 0.1}s` }"
+              :style="{ animationDelay: `${index * 0.07}s` }"
             >
               <div class="route-info">
                 <span class="material-icons bus-icon">directions_bus</span>
+                <div class="route-texts">
                   <span class="route-name">{{ arrival.routeName }}</span>
+                  <span class="departure-hint">Sale: {{ formatTo12Hour(arrival.departureTime) }}</span>
                 </div>
-              <div class="arrival-time">
+              </div>
+
+              <!-- With GPS: show wait minutes + arrival time -->
+              <div v-if="arrival.hasGps && arrival.waitMinutes !== null" class="arrival-time-block">
+                <span class="wait-badge" :class="arrival.waitMinutes < 10 ? 'urgent' : 'normal'">
+                  {{ formatWait(arrival.waitMinutes) }}
+                </span>
+                <span class="arrival-clock">{{ formatTo12Hour(arrival.arrivalTime) }}</span>
+              </div>
+
+              <!-- Without GPS: show raw schedule time -->
+              <div v-else class="arrival-time">
                 {{ formatTo12Hour(arrival.arrivalTime) }}
               </div>
             </div>
           </div>
 
           <div v-else class="empty-state">
-             <p>No upcoming arrivals found.</p>
+            <span class="material-icons">schedule</span>
+            <p>Sin servicio disponible en este momento</p>
+            <span class="empty-hint">Prueba más tarde o revisa el horario completo</span>
           </div>
         </div>
 
@@ -128,11 +172,11 @@ watch(() => props.isOpen, async (isOpen) => {
         <div class="modal-footer">
           <button class="action-btn secondary" @click="startInternalNavigation">
             <span class="material-icons md-18">navigation</span>
-            Navigate
+            Cómo llegar
           </button>
           <button class="action-btn primary" @click="loadArrivals">
             <span class="material-icons md-18">refresh</span>
-            Refresh
+            Actualizar
           </button>
         </div>
 
@@ -237,13 +281,42 @@ watch(() => props.isOpen, async (isOpen) => {
   padding: 4px;
 }
 
+.arrivals-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 12px;
+}
+
 .section-title {
   font-size: 1rem;
   font-weight: 600;
-  margin-bottom: 12px;
+  margin: 0;
   color: var(--text-primary);
 }
 
+.gps-badge {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 0.7rem;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 12px;
+  text-transform: uppercase;
+  letter-spacing: 0.03em;
+}
+.gps-badge.gps-on {
+  background: rgba(34, 197, 94, 0.12);
+  color: #22c55e;
+  border: 1px solid rgba(34, 197, 94, 0.3);
+}
+.gps-badge.gps-off {
+  background: var(--bg-secondary);
+  color: var(--text-secondary);
+  border: 1px solid var(--border-color);
+}
+
 .arrivals-list {
   display: flex;
   flex-direction: column;
@@ -263,19 +336,74 @@ watch(() => props.isOpen, async (isOpen) => {
   display: flex;
   align-items: center;
   gap: 8px;
+  flex: 1;
+  min-width: 0;
+}
+
+.route-texts {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
 }
 
 .bus-icon {
   color: var(--header-bg);
+  flex-shrink: 0;
 }
 
 .route-name {
-  font-weight: 500;
+  font-weight: 600;
+  font-size: 0.875rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
+.departure-hint {
+  font-size: 0.72rem;
+  color: var(--text-secondary);
+}
+
+/* Raw time (no GPS) */
 .arrival-time {
   font-weight: 700;
+  font-size: 0.95rem;
   color: var(--active-color, green);
+  white-space: nowrap;
+  flex-shrink: 0;
+}
+
+/* GPS mode: wait badge + clock */
+.arrival-time-block {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 2px;
+  flex-shrink: 0;
+}
+
+.wait-badge {
+  font-size: 0.8rem;
+  font-weight: 800;
+  padding: 2px 8px;
+  border-radius: 10px;
+  white-space: nowrap;
+}
+.wait-badge.urgent {
+  background: rgba(239, 68, 68, 0.12);
+  color: #ef4444;
+  border: 1px solid rgba(239, 68, 68, 0.3);
+}
+.wait-badge.normal {
+  background: rgba(34, 197, 94, 0.12);
+  color: #22c55e;
+  border: 1px solid rgba(34, 197, 94, 0.25);
+}
+
+.arrival-clock {
+  font-size: 0.72rem;
+  color: var(--text-secondary);
 }
 
 /* Amenities Styles */
@@ -393,4 +521,33 @@ watch(() => props.isOpen, async (isOpen) => {
 }
 
 @keyframes spin { 100% { transform: rotate(360deg); } }
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 24px 16px;
+  text-align: center;
+  color: var(--text-secondary);
+}
+
+.empty-state .material-icons {
+  font-size: 2.5rem;
+  opacity: 0.4;
+}
+
+.empty-state p {
+  margin: 0;
+  font-size: 0.9rem;
+  font-weight: 500;
+  color: var(--text-primary);
+}
+
+.empty-hint {
+  font-size: 0.78rem;
+  color: var(--text-secondary);
+  opacity: 0.75;
+}
+
 </style>

frontend/src/services/busStopsService.ts

@@ -2,6 +2,41 @@
 import { supabase } from '@/supabase'
 import type { BusStop, Route } from '@/types'
 
+// Map JS getDay() (0=Sun,6=Sat) to Spanish day names used in dias_operacion
+const DAY_MAP: Record<number, string> = {
+    0: 'domingo',
+    1: 'lunes',
+    2: 'martes',
+    3: 'miercoles',
+    4: 'jueves',
+    5: 'viernes',
+    6: 'sabado'
+}
+
+/** Convert "HH:MM:SS" time string to total minutes since midnight */
+function timeToMinutes(t: string): number {
+    const parts = t.split(':')
+    return parseInt(parts[0] || '0') * 60 + parseInt(parts[1] || '0')
+}
+
+/** Convert total minutes since midnight back to "HH:MM" string */
+function minutesToTime(m: number): string {
+    const safeM = ((m % 1440) + 1440) % 1440  // wrap around midnight
+    const h = Math.floor(safeM / 60)
+    const min = safeM % 60
+    return `${h.toString().padStart(2, '0')}:${min.toString().padStart(2, '0')}`
+}
+
+export interface BusArrival {
+    routeName: string
+    routeId: string
+    arrivalTime: string         // "HH:MM" when bus arrives at this stop
+    waitMinutes: number | null  // null = no GPS, raw schedule shown
+    hasGps: boolean
+    departureTime: string       // "HH:MM" when bus departs origin
+    alreadyPassed: boolean      // true if bus has already passed this stop
+}
+
 export const busStopsService = {
     /** Get all bus stops */
     async getAllBusStops(): Promise<BusStop[]> {
@@ -29,20 +64,121 @@ export const busStopsService = {
         return (data || []).map((row: any) => row.routes) as Route[]
     },
 
-    /** Get estimated next bus arrivals (Mock Data) */
+    /**
-    async getNextBusArrivals(_stopId: string): Promise<{ routeName: string; arrivalTime: string }[]> {
+     * Real-time bus arrival calculator for a specific stop.
-        // Mock delay to simulate network request
+     *
-        await new Promise(resolve => setTimeout(resolve, 500));
+     * Logic:
+     *  1. Get all routes passing through this stop + their travel_time_minutes to the stop
+     *  2. Get today's published schedules for those routes
+     *  3. For each schedule: arrivalAtStop = departure_time + travel_time_minutes
+     *  4. With GPS: filter to buses not yet passed, calculate wait minutes
+     *     Without GPS: show all future arrivals as raw times for today (option A)
+     *  5. Return sorted by arrivalTime asc, max 8 results within next 2 hours
+     */
+    async getNextBusesForStop(stopId: string, userLat?: number, userLng?: number): Promise<BusArrival[]> {
+        const hasGps = userLat !== undefined && userLng !== undefined
 
-        // Generate some random mock arrivals
+        // ── STEP 1: Get route_stops entries for this stop (includes travel_time_minutes) ──
-        const mockArrivals = [
+        const { data: routeStopsData, error: rsError } = await supabase
-            { routeName: "Ruta Boquete - David", arrivalTime: "5 min" },
+            .from('route_stops')
-            { routeName: "Ruta David - Boquete", arrivalTime: "12 min" },
+            .select('route_id, travel_time_minutes, stop_delay_minutes')
-            { routeName: "Ruta Circular", arrivalTime: "25 min" }
+            .eq('stop_id', stopId)
-        ];
 
-        // Randomly return 1-3 arrivals
+        if (rsError) throw new Error(rsError.message)
-        return mockArrivals.slice(0, Math.floor(Math.random() * 3) + 1);
+        if (!routeStopsData || routeStopsData.length === 0) return []
+
+        const routeIds = routeStopsData.map((rs: any) => rs.route_id)
+
+        // Build a lookup: routeId → travel_time_minutes to THIS stop
+        const travelTimeMap: Record<string, number> = {}
+        for (const rs of routeStopsData as any[]) {
+            travelTimeMap[rs.route_id] = (rs.travel_time_minutes || 0) + (rs.stop_delay_minutes || 0)
+        }
+
+        // ── STEP 2: Get routes metadata (name) ──
+        const { data: routesData, error: routesError } = await supabase
+            .from('routes')
+            .select('id, name')
+            .in('id', routeIds)
+
+        if (routesError) throw new Error(routesError.message)
+        const routeNameMap: Record<string, string> = {}
+        for (const r of (routesData || []) as any[]) {
+            routeNameMap[r.id] = r.name
+        }
+
+        // ── STEP 3: Get today's schedules ──
+        const now = new Date()
+        const todayDay = DAY_MAP[now.getDay()]
+        const nowMinutes = now.getHours() * 60 + now.getMinutes()
+
+        const { data: schedulesData, error: schError } = await supabase
+            .from('bus_schedules')
+            .select('route_id, departure_time, dias_operacion')
+            .in('route_id', routeIds)
+            .eq('is_published', true)
+            .order('departure_time', { ascending: true })
+
+        if (schError) throw new Error(schError.message)
+        if (!schedulesData || schedulesData.length === 0) return []
+
+        // ── STEP 4: Calculate arrival time for each schedule at THIS stop ──
+        const arrivals: BusArrival[] = []
+
+        for (const sched of schedulesData as any[]) {
+            // Check if this schedule runs today
+            const diasOp: string[] = sched.dias_operacion || []
+            if (!todayDay || !diasOp.includes(todayDay)) continue
+
+
+            const depMinutes = timeToMinutes(sched.departure_time)
+            const travelMins = travelTimeMap[sched.route_id] ?? 0
+            const arrivalMinutes = depMinutes + travelMins
+
+            // Handle midnight crossover (e.g. departure 23:50 + 20min travel = 00:10 next day)
+            const arrivalMinutesNormalized = arrivalMinutes % 1440
+
+            const alreadyPassed = arrivalMinutesNormalized < nowMinutes
+            const waitMinutes = hasGps ? (arrivalMinutesNormalized - nowMinutes) : null
+
+            // Without GPS (option A): show all future arrivals as raw times
+            // With GPS: only show buses that haven't passed yet
+            if (hasGps && alreadyPassed) continue
+
+            // Skip buses more than 3 hours in the future to avoid showing the whole day
+            if (hasGps && waitMinutes !== null && waitMinutes > 180) continue
+
+            // Without GPS: skip past arrivals but show up to next 3 hours anyway
+            if (!hasGps && alreadyPassed && Math.abs(arrivalMinutesNormalized - nowMinutes) > 10) continue
+
+            arrivals.push({
+                routeName: routeNameMap[sched.route_id] || 'Ruta desconocida',
+                routeId: sched.route_id,
+                arrivalTime: minutesToTime(arrivalMinutesNormalized),
+                departureTime: minutesToTime(depMinutes),
+                waitMinutes,
+                hasGps,
+                alreadyPassed
+            })
+        }
+
+        // Sort by arrival time ascending, return first 8
+        arrivals.sort((a, b) => {
+            const aMin = timeToMinutes(a.arrivalTime)
+            const bMin = timeToMinutes(b.arrivalTime)
+            return aMin - bMin
+        })
+
+        return arrivals.slice(0, 8)
+    },
+
+    /**
+     * @deprecated Use getNextBusesForStop instead.
+     * Kept for compatibility — calls the real engine without GPS context.
+     */
+    async getNextBusArrivals(stopId: string): Promise<{ routeName: string; arrivalTime: string }[]> {
+        const real = await this.getNextBusesForStop(stopId)
+        return real.map(a => ({ routeName: a.routeName, arrivalTime: a.arrivalTime }))
     },
 
     /** Create a new bus stop (Admin) */