<script setup lang="ts">
const props = defineProps<{
  post: any
  matchedLines?: string[]
  highlight?: (text: string) => string
}>()

const expanded = ref(false)

function formatDate(date: string) {
  return new Date(date).toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  })
}

function getWordCount(post: any): number {
  const text = JSON.stringify(post.body || '').replace(/<[^>]*>/g, '')
  const chinese = text.match(/[一-龥]/g) || []
  const english = text.match(/[a-zA-Z]+/g) || []
  return chinese.length + english.length
}

function getReadTime(count: number): number {
  return Math.max(1, Math.ceil(count / 300))
}

const wordCount = computed(() => getWordCount(props.post))
const readTime = computed(() => getReadTime(wordCount.value))

function renderTitle(): string {
  const text = props.post.title || '无标题'
  return props.highlight ? props.highlight(text) : text
}

function renderDesc(): string {
  if (!props.post.description) return ''
  return props.highlight ? props.highlight(props.post.description) : props.post.description
}
</script>

<template>
  <NuxtLink :to="post.path" class="block">
    <div class="group transition-all hover:shadow-lg rounded-2xl py-6 overflow-hidden" style="border: 1px solid var(--color-border);">
      <div class="px-6">
        <div class="flex flex-col gap-4 md:flex-row">
          <div v-if="post.image" class="md:w-48 md:flex-shrink-0">
            <img
              :src="post.image"
              :alt="post.title"
              loading="lazy"
              decoding="async"
              class="h-48 w-full rounded-md object-cover md:h-32"
            />
          </div>

          <div class="flex-1">
            <div class="mb-2 flex flex-wrap items-center gap-x-2 gap-y-0">
              <span
                v-if="post.pinned"
                class="shrink-0 inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium"
                style="background: var(--color-text); color: var(--color-bg);"
              >
                置顶
              </span>
              <time v-if="post.published" class="shrink-0 text-sm text-muted-foreground whitespace-nowrap">
                {{ formatDate(post.published) }}
              </time>
              <span class="shrink-0 text-sm text-muted-foreground whitespace-nowrap">
                · {{ wordCount }} 字
              </span>
              <span class="shrink-0 text-sm text-muted-foreground whitespace-nowrap">
                · 约 {{ readTime }} 分钟
              </span>
            </div>

            <h2
              class="mb-2 text-2xl font-semibold group-hover:opacity-70 transition-opacity"
              v-html="renderTitle()"
            />

            <p
              v-if="post.description"
              class="text-muted-foreground"
              v-html="renderDesc()"
            />

            <div v-if="post.tags?.length" class="mt-2 flex flex-wrap gap-1.5">
              <span
                v-for="tag in post.tags"
                :key="tag"
                class="tag-pill"
              >
                {{ tag }}
              </span>
            </div>

            <div v-if="matchedLines && matchedLines.length > 0" class="mt-3 space-y-1.5">
              <div
                v-for="(line, idx) in (expanded ? matchedLines : matchedLines.slice(0, 3))"
                :key="idx"
                class="text-sm text-muted-foreground border-l-2 pl-3"
                style="border-color: var(--color-border);"
                v-html="highlight ? highlight(line) : line"
              />
              <button
                v-if="matchedLines.length > 3"
                type="button"
                class="text-xs text-muted-foreground hover:opacity-70 transition-opacity mt-1"
                @click.prevent.stop="expanded = !expanded"
              >
                {{ expanded ? '收起' : `展开 (还有 ${matchedLines.length - 3} 条)` }}
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </NuxtLink>
</template>
