<script setup lang="ts">
import { onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { useBusStopStore } from '@/stores/busStop'
import { analyticsService } from '@/services/analyticsService'

const { t } = useI18n()

const route = useRoute()
const busStopStore = useBusStopStore()

onMounted(async () => {
  const stopId = route.params.id as string
  if (stopId) {
    await busStopStore.loadBusStopById(stopId)
    if (busStopStore.selectedStop) {
      analyticsService.logEvent({ 
        event_name: 'stop_selected', 
        item_id: busStopStore.selectedStop.name,
        properties: { stop_id: stopId }
      })
    }
  }
})
</script>

<template>
  <div class="bus-stop-details-view">
    <div v-if="busStopStore.isLoading">
      <p>{{ t('busStop.loadingDetails') }}</p>
    </div>
    
    <div v-else-if="busStopStore.error">
      <p>{{ t('common.error') }}: {{ busStopStore.error }}</p>
    </div>
    
    <div v-else-if="busStopStore.selectedStop">
      <h1>{{ busStopStore.selectedStop.name }}</h1>
      <p v-if="busStopStore.selectedStop.address">{{ busStopStore.selectedStop.address }}</p>
      <p v-if="busStopStore.selectedStop.city">{{ busStopStore.selectedStop.city }}</p>
      
      <div class="amenities">
        <h3>{{ t('busStop.amenities') }}</h3>
        <ul>
          <li v-if="busStopStore.selectedStop.has_shelter">{{ t('busStop.shelter') }}</li>
          <li v-if="busStopStore.selectedStop.has_seating">{{ t('busStop.seating') }}</li>
          <li v-if="busStopStore.selectedStop.is_accessible">{{ t('busStop.accessible') }}</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<style scoped>
.bus-stop-details-view {
  padding: 1rem;
  background: var(--bg-primary);
  color: var(--text-primary);
  min-height: 100%;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.bus-stop-details-view h1,
.bus-stop-details-view h3 {
  color: var(--text-primary);
}

.bus-stop-details-view p {
  color: var(--text-secondary);
}

.amenities {
  margin-top: 1rem;
  padding: 1rem;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--border-color);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.amenities ul {
  list-style: none;
  padding: 0;
  margin-top: 0.5rem;
}

.amenities li {
  padding: 0.5rem 0;
  color: var(--text-primary);
}
</style>

