From fa8551b19d49b68fd6f4584f7cf27a6f00605f9d Mon Sep 17 00:00:00 2001
From: Hanzo_dev <2002samudiojohan@gmail.com>
Date: Sun, 1 Mar 2026 22:06:42 -0500
Subject: [PATCH] UI: Refine 'no buses available' flow and fix decimal bug

---
 frontend/src/components/ETACard.vue | 27 ++++++++++++++++++---------
 frontend/src/composables/useETA.ts  |  3 ++-
 frontend/src/views/MapView.vue      |  9 ++++++++-
 3 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/frontend/src/components/ETACard.vue b/frontend/src/components/ETACard.vue
index 52645c6..1eb2718 100644
--- a/frontend/src/components/ETACard.vue
+++ b/frontend/src/components/ETACard.vue
@@ -27,8 +27,8 @@
         Desliza hacia abajo para cerrar
       </p>
 
-      <!-- Cabecera de la parada -->
-      <div class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
+      <!-- Cabecera de la parada (Ocultar si no hay buses para modo minimalista) -->
+      <div v-if="buses.length > 0" class="mt-4 flex items-start gap-4 pb-4 border-b border-gray-100 dark:border-gray-800">
         <div class="bg-blue-100 dark:bg-blue-900/40 p-3 rounded-2xl flex-shrink-0">
           <span class="material-icons text-blue-600 dark:text-blue-400 text-3xl">place</span>
         </div>
@@ -54,11 +54,17 @@
           <span class="mt-4 text-gray-500 dark:text-gray-400 font-medium animate-pulse">Calculando satélites...</span>
         </div>
 
-        <!-- Sin servicio -->
-        <div v-else-if="buses.length === 0" class="bg-gray-50 dark:bg-gray-800/50 rounded-2xl p-6 text-center border dashed border-gray-200 dark:border-gray-700">
-          <span class="material-icons text-4xl text-gray-400 mb-2">directions_bus</span>
-          <h4 class="text-gray-700 dark:text-gray-300 font-bold mb-1">Sin servicio programado</h4>
-          <p class="text-sm text-gray-500 dark:text-gray-400">No hay buses en ruta para hoy en esta línea.</p>
+        <!-- Sin servicio (Actualizado según petición) -->
+        <div v-else-if="buses.length === 0" class="bg-gray-50 dark:bg-gray-800/50 rounded-2xl p-8 text-center border-2 border-dashed border-gray-300 dark:border-gray-700 my-4">
+          <div class="w-16 h-16 bg-gray-100 dark:bg-gray-800 rounded-full flex items-center justify-center mx-auto mb-4">
+            <span class="material-icons text-4xl text-gray-400">no_bus</span>
+          </div>
+          <h4 class="text-gray-900 dark:text-white font-black text-lg mb-2">
+            {{ t('map.noBusesAvailable') }}
+          </h4>
+          <p class="text-sm text-gray-500 dark:text-gray-400">
+            {{ t('schedules.noSchedules') }}
+          </p>
         </div>
 
         <!-- Lista de llegadas (Max 2) -->
@@ -125,8 +131,8 @@
         </template>
       </div>
 
-      <!-- Legal Disclaimer Intocable -->
-      <div class="mt-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-xl flex items-start gap-3 border border-yellow-100 dark:border-yellow-900/50">
+      <!-- Legal Disclaimer Intocable (Solo si hay buses) -->
+      <div v-if="buses.length > 0" class="mt-2 p-3 bg-yellow-50 dark:bg-yellow-900/20 rounded-xl flex items-start gap-3 border border-yellow-100 dark:border-yellow-900/50">
         <span class="material-icons text-yellow-600 dark:text-yellow-500 text-lg mt-0.5 shrink-0">info</span>
         <p class="text-[11px] leading-snug text-yellow-800 dark:text-yellow-600/90 font-medium">
           <strong>Aviso:</strong> Este es un tiempo estimado basado en la velocidad promedio de las unidades en la ciudad. No existe rastreo GPS en tiempo real. 
@@ -140,8 +146,11 @@
 
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
+import { useI18n } from 'vue-i18n';
 import type { BusETA } from '@/composables/useETA';
 
+const { t } = useI18n();
+
 defineProps<{
   isOpen: boolean;
   stopName: string;
diff --git a/frontend/src/composables/useETA.ts b/frontend/src/composables/useETA.ts
index f8b003b..569cbc2 100644
--- a/frontend/src/composables/useETA.ts
+++ b/frontend/src/composables/useETA.ts
@@ -182,7 +182,8 @@ export function useETA() {
 
     // Helper: convierte minutos desde medianoche a "HH:mm"
     function minutosAHora(minutos: number): string {
-        const m = ((minutos % 1440) + 1440) % 1440; // normalizar 0-1439
+        const totalMinutes = Math.round(minutos);
+        const m = ((totalMinutes % 1440) + 1440) % 1440; // normalizar 0-1439
         const h = Math.floor(m / 60);
         const min = m % 60;
         return `${String(h).padStart(2, '0')}:${String(min).padStart(2, '0')}`;
diff --git a/frontend/src/views/MapView.vue b/frontend/src/views/MapView.vue
index 85094c6..4d2c54c 100644
--- a/frontend/src/views/MapView.vue
+++ b/frontend/src/views/MapView.vue
@@ -329,6 +329,13 @@ const sonarHtml = `
 `;
 
 // Watch for route selection changes
+// Watch for ETA loading to automatically show ETACard if no buses are available
+watch([etaCargando, () => busesActivos.value.length], ([loading, count]) => {
+  if (!loading && count === 0 && routeStore.selectedRouteId && routeStore.wasSelectedFromMap) {
+    showETACard.value = true;
+  }
+});
+
 watch(() => routeStore.selectedRouteId, (routeId) => {
   if (routeId) {
     if (routeStore.wasSelectedFromMap) {
@@ -393,7 +400,7 @@ function handleImageError(event: Event) {
         >
           <template #extra-triggers>
             <ArrivalBanner 
-              :is-visible="!!(paradaCercana && routeStore.selectedRouteId && !isBannerClosing && routeStore.wasSelectedFromMap)"
+              :is-visible="!!(paradaCercana && routeStore.selectedRouteId && !isBannerClosing && routeStore.wasSelectedFromMap && busesActivos.length > 0)"
               :stop-name="paradaCercana?.name || ''"
               :is-loading="etaCargando"
               :has-active-buses="busesActivos.length > 0"