<template>
  <UCard class="h-full flex flex-col">
    <NuxtLink
      v-if="article.coverImageUrl"
      :to="`/article/${article.slug}`"
      class="block -mx-4 -mt-4 mb-4"
    >
      <img
        :src="article.coverImageUrl"
        :alt="article.title"
        class="w-full h-48 object-cover rounded-t-lg"
        loading="lazy"
      />
    </NuxtLink>

    <div class="flex-1 flex flex-col">
      <div class="flex items-center justify-between mb-2">
        <UBadge
          :label="statusLabels[article.status]"
          :color="statusColors[article.status]"
          size="xs"
          variant="subtle"
        />
        <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">
          <UIcon name="i-heroicons-eye" class="w-4 h-4 mr-1" />
          {{ formatNumber(article.viewCount) }}
        </div>
      </div>

      <NuxtLink :to="`/article/${article.slug}`" class="group">
        <h3
          class="text-lg font-semibold text-gray-900 dark:text-white mb-2 group-hover:text-indigo-600 dark:group-hover:text-indigo-400 transition-colors line-clamp-2"
        >
          {{ article.title }}
        </h3>
      </NuxtLink>

      <p
        v-if="article.excerpt"
        class="text-gray-600 dark:text-gray-400 text-sm mb-4 line-clamp-3 flex-1"
      >
        {{ article.excerpt }}
      </p>

      <div class="flex items-center justify-between pt-4 border-t border-gray-100 dark:border-gray-700">
        <div class="flex items-center">
          <UAvatar
            :src="article.author.avatarUrl"
            :alt="article.author.displayName || article.author.username"
            size="2xs"
            class="mr-2"
          />
          <span class="text-sm text-gray-700 dark:text-gray-300">
            {{ article.author.displayName || article.author.username }}
          </span>
        </div>

        <time
          :datetime="article.createdAt"
          class="text-xs text-gray-500 dark:text-gray-400"
        >
          {{ timeAgo(article.createdAt) }}
        </time>
      </div>
    </div>
  </UCard>
</template>

<script setup lang="ts">
import type { Article } from '~/types/models'

defineProps<{
  article: Article
}>()

const statusLabels: Record<string, string> = {
  published: '已发布',
  draft: '草稿',
  archived: '归档',
}

const statusColors: Record<string, string> = {
  published: 'green',
  draft: 'yellow',
  archived: 'gray',
}

const formatNumber = (num: number) => {
  if (num >= 10000) {
    return `${(num / 10000).toFixed(1)}w`
  }
  if (num >= 1000) {
    return `${(num / 1000).toFixed(1)}k`
  }
  return num.toString()
}

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

  if (days === 0) {
    return '今天'
  } else if (days === 1) {
    return '昨天'
  } else if (days < 7) {
    return `${days}天前`
  } else if (days < 30) {
    return `${Math.floor(days / 7)}周前`
  } else if (days < 365) {
    return `${Math.floor(days / 30)}个月前`
  } else {
    return `${Math.floor(days / 365)}年前`
  }
}
</script>
