<template>
  <div class="activity-tab">
    <div v-if="loading" class="loading-container">
      <n-spin size="medium" />
    </div>
    <div v-else>
      <div v-if="activities.length" class="item-list">
        <div
          v-for="item in activities"
          :key="item.name"
          class="list-item"
          @click="handleClick(item)"
        >
          <div class="item-title">{{ item.title }}</div>
          <div class="item-time text-muted">{{ formatTime(item.creation) }}</div>
        </div>
      </div>
      <div v-else class="empty-state">
        <n-icon size="64" color="#d1d8dd">
          <Icon icon="tabler:activity" />
        </n-icon>
        <div class="empty-text text-muted">{{ t('Nothing New') }}</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 { getActivityList, type ActivityItem } from '../api/notifications'
import { t } from '../i18n'
import { pageTypeToSlug } from '../utils/slug'

const emit = defineEmits<{ (e: 'close'): void }>()
const router = useRouter()
const activities = ref<ActivityItem[]>([])
const loading = ref(true)

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

const loadActivities = async () => {
  loading.value = true
  const result = await getActivityList(20)
  if (result.success && result.data) activities.value = result.data
  loading.value = false
}

const formatTime = (ts: string): string => {
  if (!ts) return ''
  const d = new Date(ts.replace(/-/g, '/').replace(/[TZ]/g, ' ').replace(/\.[0-9]*/, ''))
  if (isNaN(d.getTime())) return ''
  const pad = (n: number) => n.toString().padStart(2, '0')
  return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())} ${pad(d.getHours())}:${pad(d.getMinutes())}:${pad(d.getSeconds())}`
}

const handleClick = (item: ActivityItem) => {
  if (item.reference_pagetype && item.reference_name) {
    router.push(`/app/${pageTypeToSlug(item.reference_pagetype)}/${encodeURIComponent(item.reference_name)}`)
  } else {
    router.push(`/app/${pageTypeToSlug('Activity')}/${encodeURIComponent(item.name)}`)
  }
  emit('close')
}

defineExpose({ loadActivities })
</script>

<style scoped>
.activity-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; flex-direction: column; justify-content: center; align-items: center; }
.empty-text { margin-top: 8px; font-size: 14px; }
.item-list { padding: 4px 0; }
.list-item { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px; cursor: pointer; transition: background-color 0.2s; border-bottom: 1px solid var(--n-border-color, #f0f0f0); }
.list-item:last-child { border-bottom: none; }
.list-item:hover { background-color: var(--n-color-hover); }
.item-title { font-size: 14px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-right: 12px; }
.item-time { font-size: 12px; flex-shrink: 0; }
.text-muted { color: var(--n-text-color-disabled); }
</style>
