<template>
  <div class="changelog-tab">
    <div v-if="changelogFeed.length" class="changelog-container">
      <div
        v-for="item in changelogFeed"
        :key="item.title"
        class="changelog-item"
        @click="handleItemClick(item)"
      >
        <div class="message">
          <div class="title">{{ item.title }}</div>
          <div class="changelog-timestamp text-muted">
            {{ item.app_title }} | {{ formatTimestamp(item.posting_timestamp) }}
          </div>
        </div>
      </div>
    </div>
    <div v-else class="empty-state">
      <div class="empty-state-content">
        <n-icon size="64" color="#d1d8dd">
          <Icon icon="tabler:news-off" />
        </n-icon>
        <div class="subtitle">
          {{ t('Nothing New') }}
        </div>
      </div>
    </div>
  </div>
</template>

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

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

const changelogFeed = ref<ChangelogFeedItem[]>([])

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

const loadChangelogFeed = async () => {
  const result = await getChangelogFeed()
  if (result.success && result.data) {
    changelogFeed.value = result.data
  }
}

const formatTimestamp = (timestamp: string): string => {
  const date = new Date(timestamp)
  const now = new Date()
  const diff = now.getTime() - date.getTime()
  const days = Math.floor(diff / (1000 * 60 * 60 * 24))

  if (days === 0) {
    return t('Today')
  } else if (days === 1) {
    return t('Yesterday')
  } else if (days < 7) {
    return `${days} ${t('days ago')}`
  } else if (days < 30) {
    const weeks = Math.floor(days / 7)
    return `${weeks} ${t('weeks ago')}`
  } else if (days < 365) {
    const months = Math.floor(days / 30)
    return `${months} ${t('months ago')}`
  } else {
    const years = Math.floor(days / 365)
    return `${years} ${t('years ago')}`
  }
}

const handleItemClick = (item: ChangelogFeedItem) => {
  if (item.link) {
    window.open(item.link, '_blank', 'noopener,noreferrer')
  }
  emit('close')
}

defineExpose({
  loadChangelogFeed
})
</script>

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

.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);
}

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

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

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

.message {
  padding-left: 10px;
}

.title {
  font-size: 14px;
  margin-bottom: 4px;
}

.changelog-timestamp {
  font-size: 12px;
}

.text-muted {
  color: var(--n-text-color-disabled);
}
</style>
