<template>
  <div v-if="isOpen" class="fixed inset-x-0 bottom-0 z-[9999] sm:max-w-md sm:mx-auto">
    <!-- Overlay transparente oscuro en fondo -->
    <div class="fixed inset-0 bg-black/40 transition-opacity" @click="closeCard"></div>

    <!-- Bottom Sheet container -->
    <div 
      class="relative bg-white dark:bg-gray-900 rounded-t-3xl shadow-2xl p-5 transform transition-transform duration-300 ease-out flex flex-col gap-4 max-h-[85vh] overflow-y-auto"
      :class="isOpen ? 'translate-y-0' : 'translate-y-full'"
    >
      <!-- Indicador de arrastre (visual) -->
      <div class="absolute top-3 left-1/2 -translate-x-1/2 w-12 h-1.5 bg-gray-300 dark:bg-gray-600 rounded-full cursor-pointer" @click="closeCard"></div>

      <!-- Cabecera de la parada -->
      <div 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>
        <div class="flex-1">
          <h3 class="text-sm font-bold text-gray-500 dark:text-gray-400 uppercase tracking-wider mb-1">Tu parada asignada</h3>
          <h2 class="text-xl font-black text-gray-900 dark:text-white leading-tight">
            {{ stopName }}
          </h2>
          <div class="flex items-center gap-2 mt-2 text-sm text-gray-600 dark:text-gray-300 font-medium">
            <span class="material-icons text-sm text-gray-400">directions_walk</span>
            A {{ Math.round(walkDuration / 60) }} min caminando
            <span class="text-gray-300 dark:text-gray-600">•</span>
            {{ Math.round(walkDistance) }} metros
          </div>
        </div>
      </div>

      <!-- Contenido de buses -->
      <div class="flex flex-col gap-3 py-2">
        <!-- Estado de carga -->
        <div v-if="isLoading" class="flex flex-col items-center justify-center py-8">
          <div class="w-10 h-10 border-4 border-blue-500 border-t-transparent rounded-full animate-spin"></div>
          <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>
        </div>

        <!-- Lista de llegadas (Max 3) -->
        <template v-else>
          <div 
            v-for="(bus, index) in buses" 
            :key="bus.horario_id"
            class="group bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-2xl p-4 flex items-center justify-between"
            :class="{ 'ring-2 ring-green-500/50 dark:ring-green-400/50 bg-green-50/30 dark:bg-green-900/10': bus.estado === 'en_camino' }"
          >
            <div class="flex items-center gap-4">
              <!-- Icono dinámico según estado -->
              <div 
                class="w-12 h-12 rounded-full flex items-center justify-center text-white shrink-0"
                :class="{
                  'bg-green-500': bus.estado === 'en_camino',
                  'bg-blue-500': bus.estado === 'próximo',
                  'bg-gray-400 dark:bg-gray-600': bus.estado === 'pasó'
                }"
              >
                <span class="material-icons">{{ bus.estado === 'pasó' ? 'history' : 'directions_bus' }}</span>
              </div>
              
              <div class="flex flex-col">
                <span class="text-sm font-bold text-gray-900 dark:text-white line-clamp-1">
                  {{ index === 0 ? 'Bus más cercano' : 'Siguiente bus' }}
                </span>
                <span class="text-xs font-semibold text-gray-500 dark:text-gray-400 flex items-center gap-1 mt-0.5">
                  <span class="material-icons" style="font-size: 14px">schedule</span>
                  Salió de terminal a las {{ bus.hora_salida }}
                </span>
              </div>
            </div>

            <div class="flex flex-col items-end text-right shrink-0 ml-4">
              <!-- ETA gigante -->
              <div v-if="bus.estado !== 'pasó'" class="text-2xl font-black text-gray-900 dark:text-white flex items-baseline gap-1" :class="{ 'text-green-600 dark:text-green-400': bus.estado === 'en_camino' }">
                <span>~{{ bus.etaMinutos }}</span>
                <span class="text-sm font-bold text-gray-500 dark:text-gray-400">min</span>
              </div>
              
              <!-- Badges de estado -->
              <div class="mt-1">
                <span v-if="bus.estado === 'en_camino'" class="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-lg bg-green-100 dark:bg-green-900/40 text-green-700 dark:text-green-400 text-[10px] font-black uppercase tracking-wider">
                  <span class="w-1.5 h-1.5 bg-green-500 rounded-full animate-ping"></span>
                  En Vía
                </span>
                <span v-else-if="bus.estado === 'próximo'" class="inline-flex px-2.5 py-1 rounded-lg bg-blue-100 dark:bg-blue-900/40 text-blue-700 dark:text-blue-400 text-[10px] font-black uppercase tracking-wider">
                  Programado
                </span>
                <span v-else class="inline-flex px-2.5 py-1 rounded-lg bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 text-[10px] font-black uppercase tracking-wider line-through">
                  Ya pasó
                </span>
              </div>
            </div>
          </div>
        </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">
        <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. 
          El tráfico y paradas intermedias pueden alterar el tiempo de llegada dramáticamente.
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, onUnmounted } from 'vue';
import type { BusETA } from '@/composables/useETA';

defineProps<{
  isOpen: boolean;
  stopName: string;
  walkDistance: number;
  walkDuration: number; // en segundos
  buses: BusETA[];
  isLoading: boolean;
}>();

const emit = defineEmits<{
  (e: 'close'): void;
  (e: 'refresh'): void;
}>();

let intervalId: number;

function closeCard() {
  emit('close');
}

onMounted(() => {
  // Refresca el panel de ETAs cada 60 segundos
  intervalId = window.setInterval(() => {
    emit('refresh');
  }, 60000);
});

onUnmounted(() => {
  if (intervalId) {
    clearInterval(intervalId);
  }
});
</script>

<style scoped>
/* Transición extra refinada a lo material you */
.translate-y-full {
  transform: translateY(100%);
}
.translate-y-0 {
  transform: translateY(0%);
}
</style>
