<template>
  <div class="event-tab">
    <div v-if="loading" class="loading-container">
      <n-spin size="medium" />
    </div>
    <div v-else>
      <div v-if="events.length" class="events-container">
        <div
          v-for="event in events"
          :key="event.name"
          class="event-item"
          @click="handleEventClick(event)"
        >
          <div class="event-border" :style="{ borderColor: event.color }" />
          <div class="event-content">
            <div class="event-subject">{{ event.subject }}</div>
            <div class="event-time">
              {{ formatEventTime(event) }}
              <span v-if="event.location">, {{ event.location }}</span>
            </div>
          </div>
        </div>
      </div>
      <div v-else class="empty-state">
        <div class="empty-state-content">
          <n-icon size="64" color="#d1d8dd">
            <Icon icon="tabler:calendar-off" />
          </n-icon>
          <div class="subtitle">
            {{ t('No Upcoming Events') }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { NSpin, NIcon } from 'naive-ui'
import { Icon } from '@iconify/vue'
import { getTodaysEvents, type Event } from '../api/notifications'
import { t } from '../i18n'

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

const router = useRouter()
const events = ref<Event[]>([])
const loading = ref(true)

onMounted(async () => {
  await loadEvents()
})

const loadEvents = async () => {
  loading.value = true
  const result = await getTodaysEvents()
  if (result.success && result.data) {
    events.value = result.data
  }
  loading.value = false
}

const formatEventTime = (event: Event): string => {
  if (event.all_day) {
    return t('All Day')
  }

  const startTime = formatTime(event.starts_on)
  const endDate = new Date(event.ends_on)
  const startDate = new Date(event.starts_on)
  
  const daysDiff = Math.floor((endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24))
  
  let endTime = formatTime(event.ends_on)
  if (daysDiff > 1) {
    endTime = t('Rest of the day')
  }
  
  return `${startTime} - ${endTime}`
}

const formatTime = (timestamp: string): string => {
  const date = new Date(timestamp)
  const hours = date.getHours().toString().padStart(2, '0')
  const minutes = date.getMinutes().toString().padStart(2, '0')
  return `${hours}:${minutes}`
}

const handleEventClick = (event: Event) => {
  router.push(`/app/Event/${event.name}`)
  emit('close')
}

defineExpose({
  loadEvents
})
</script>

<style scoped>
.event-tab {
  width: 100%;
  max-height: 450px;
  overflow-y: auto;
}

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 300px;
}

.empty-state {
  min-height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.empty-state-content {
  text-align: center;
}

.empty-state .title {
  margin-top: 16px;
  font-size: 16px;
  font-weight: 600;
}

.empty-state .subtitle {
  margin-top: 8px;
  font-size: 14px;
  color: var(--n-text-color-disabled);
}

.events-container {
  padding: 4px 0;
}

.event-item {
  display: flex;
  padding: 10px;
  margin: 4px 0;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.event-item:first-child {
  margin-top: 10px;
}

.event-item:hover {
  background-color: var(--n-color-hover);
}

.event-border {
  width: 2px;
  border-radius: 4px;
  margin-right: 10px;
  border-left: 2px solid;
}

.event-content {
  flex: 1;
}

.event-subject {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
}

.event-time {
  font-size: 12px;
  color: var(--n-text-color-disabled);
}
</style>
