<template>
  <article class="bg-white dark:bg-gray-800 shadow-sm rounded-lg overflow-hidden transition duration-300 ease-in-out hover:shadow-md">
    <div class="p-6">
      <!-- 标题和内容 -->
      <h3 class="text-xl font-semibold text-gray-900 dark:text-white mb-4">
        <router-link :to="{ name: 'ArticleDetail', params: { id: post.id }}" class="hover:text-green-600 dark:hover:text-green-400 transition duration-150 ease-in-out">
          {{ post.title }}
        </router-link>
      </h3>
      <p @click="goToDetail" class="text-base text-gray-700 dark:text-gray-300 mb-6 cursor-pointer">
        {{ post.summary || post.content.slice(0, 200) + '...' }}
      </p>

      <!-- 互动区域 -->
      <div class="flex items-center justify-between">
        <!-- 左侧：作者信息 -->
        <div class="flex items-center space-x-2">
          <div class="flex-shrink-0">
            <template v-if="post?.author?.avatar">
              <img class="h-8 w-8 rounded-full ring-1 ring-gray-200 dark:ring-gray-700" 
                :src="post.author.avatar" 
                :alt="post?.author?.username || 'User'" />
            </template>
            <template v-else>
              <DefaultAvatar class="h-8 w-8" />
            </template>
          </div>
          <div class="flex items-center text-sm">
            <span class="font-medium text-gray-900 dark:text-white">{{ post.author.username }}</span>
            <span class="mx-2 text-gray-400">·</span>
            <span class="text-gray-500 dark:text-gray-400">{{ post.author.bio || '旅行爱好者' }}</span>
            <span class="mx-2 text-gray-400">·</span>
            <time class="text-gray-500 dark:text-gray-400">{{ formatDate(post.created_at) }}</time>
          </div>
        </div>

        <!-- 右侧：点赞和评论按钮 -->
        <div class="flex items-center space-x-4">
          <button
            v-if="isAuthor"
            @click="$router.push(`/posts/${post.id}/edit`)"
            class="flex items-center text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition duration-150 ease-in-out"
          >
            <PencilIcon class="h-5 w-5 mr-1.5" />
            <span class="text-sm">编辑</span>
          </button>
          <button 
            @click="handleLikeClick"
            class="flex items-center transition duration-150 ease-in-out"
            :class="[
              post.is_liked 
                ? 'text-green-600 dark:text-green-400' 
                : 'text-gray-500 hover:text-green-600 dark:hover:text-green-400'
            ]"
          >
            <HandThumbUpIcon class="h-5 w-5 mr-1.5" />
            <span class="text-sm">{{ post.likes_count }}</span>
          </button>
          <button class="flex items-center text-gray-500 hover:text-green-600 dark:hover:text-green-400 transition duration-150 ease-in-out">
            <ChatBubbleLeftIcon class="h-5 w-5 mr-1.5" />
            <span class="text-sm">{{ post.comments_count || 0 }}</span>
          </button>
        </div>
      </div>
    </div>
  </article>
</template>

<script setup>
import { computed } from 'vue'
import { useRouter } from 'vue-router'
import { HandThumbUpIcon, ChatBubbleLeftIcon, PencilIcon } from '@heroicons/vue/24/outline'
import { useAuth } from '../composables/useAuth'
import DefaultAvatar from './DefaultAvatar.vue'

const router = useRouter()
const { user } = useAuth()

const props = defineProps({
  post: {
    type: Object,
    required: true
  }
})

const isAuthor = computed(() => user.value?.id === props.post.author_id)

const emit = defineEmits(['like', 'unlike'])

const goToDetail = () => {
  router.push({ name: 'ArticleDetail', params: { id: props.post.id }})
}

const handleLikeClick = () => {
  if (props.post.is_liked) {
    emit('unlike', props.post.id)
  } else {
    emit('like', props.post.id)
  }
}

const formatDate = (dateString) => {
  const date = new Date(dateString)
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  })
}
</script>