<template>
  <div class="flex gap-4" :class="{ 'ml-12': depth > 0 }">
    <UAvatar
      :src="comment.author?.avatarUrl"
      :alt="comment.author?.displayName || comment.author?.username"
      size="md"
      class="flex-shrink-0"
    />

    <div class="flex-1">
      <UCard class="bg-gray-50 dark:bg-gray-800">
        <div class="flex items-center justify-between mb-2">
          <div class="flex items-center gap-2">
            <span class="font-medium text-gray-900 dark:text-white">
              {{ comment.author?.displayName || comment.author?.username || comment.authorName || '匿名用户' }}
            </span>
            <time class="text-xs text-gray-500 dark:text-gray-400">
              {{ formatTime(comment.createdAt) }}
            </time>
            <UBadge
              v-if="comment.status !== 'approved'"
              :label="statusLabels[comment.status]"
              :color="statusColors[comment.status]"
              size="xs"
              variant="subtle"
            />
          </div>
        </div>

        <div class="prose prose-sm dark:prose-invert max-w-none text-gray-700 dark:text-gray-300">
          {{ comment.content }}
        </div>

        <div class="mt-3 flex items-center gap-4">
          <UButton
            variant="ghost"
            size="xs"
            icon="i-heroicons-arrow-turn-left-up"
            @click="showReply = !showReply"
          >
            回复
          </UButton>
        </div>

        <CommentForm
          v-if="showReply"
          :article-id="comment.articleId"
          :parent-id="comment.id"
          :placeholder="`回复 ${comment.author?.displayName || comment.author?.username || '匿名用户'}`"
          @submitted="onReplySubmitted"
          @cancel="showReply = false"
        />
      </UCard>

      <div v-if="comment.replies?.length && depth < 2" class="mt-4 space-y-4">
        <CommentItem
          v-for="reply in comment.replies"
          :key="reply.id"
          :comment="reply"
          :depth="depth + 1"
          @reply="$emit('reply', $event)"
        />
      </div>
    </div>
  </div>
</template>

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

defineProps<{
  comment: Comment
  depth: number
}>()

defineEmits<{
  reply: [comment: Comment]
}>()

const showReply = ref(false)

const statusLabels: Record<string, string> = {
  pending: '待审核',
  approved: '已通过',
  rejected: '已拒绝',
  suspicious: '可疑',
}

const statusColors: Record<string, string> = {
  pending: 'yellow',
  approved: 'green',
  rejected: 'red',
  suspicious: 'orange',
}

const formatTime = (date: string) => {
  return new Date(date).toLocaleString('zh-CN', {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
    hour: '2-digit',
    minute: '2-digit',
  })
}

const onReplySubmitted = () => {
  showReply.value = false
  // TODO: 刷新评论列表
}
</script>
