<template>
  <component
    :is="cardType"
    :notification="notification"
    :displayTitle="displayTitle"
    @mark-read="emit('mark-read', $event)"
    @delete="emit('delete', $event)"
  />
</template>

<script setup>
import { computed } from 'vue'
import PostcardBase      from './PostcardBase.vue'
import PostcardFeedback  from './PostcardFeedback.vue'
import PostcardReport    from './PostcardReport.vue'
import PostcardTarget    from './PostcardTarget.vue'
import PostcardActivity  from './PostcardActivity.vue'
import { parseData }     from './postcardHelpers.js'

const props = defineProps({
  notification: { type: Object, required: true },
})
const emit = defineEmits(['mark-read', 'delete'])

// 按 notification.type 选择类型专属卡片;未知类型回退到 PostcardBase(只显示 chrome)。
const cardMap = {
  feedback_replied: PostcardFeedback,
  report_resolved:  PostcardReport,
  target_reported:  PostcardTarget,
  activity:         PostcardActivity,
}
const cardType = computed(() => cardMap[props.notification.type] || PostcardBase)

// P2-2 fix:title 里的 #NNN 替换为 #${star_name}。
// 例如 "您被举报#87" → "您被举报#张艺兴";空 star_name 时保留原 title。
const data = computed(() => parseData(props.notification.data))
const starName = computed(() => data.value.star_name || '')
const displayTitle = computed(() => {
  const raw = props.notification.title || ''
  if (!starName.value) return raw
  return raw.replace(/#\d+/g, '#' + starName.value)
})
</script>

<style lang="scss" scoped>
</style>