<template>
  <a-card
    size="small"
    :class="['citation-card', { 'citation-card--guide': isGuideSource }]"
    @click="$emit('open', reference)"
  >
    <div class="citation-title-row">
      <span class="citation-index" v-if="index !== undefined">[{{ index + 1 }}]</span>
      <span class="citation-title">{{ reference.title }}</span>
    </div>
    <div v-if="reference.doc_number" class="citation-meta">{{ reference.doc_number }}</div>
    <div v-if="reference.strength || visibleMatchedFieldLabels.length" class="citation-tags">
      <a-tag v-if="reference.strength" color="gold">{{ strengthLabel }}</a-tag>
      <a-tag v-for="label in visibleMatchedFieldLabels" :key="label" color="orange">{{ label }}</a-tag>
      <a-tag v-if="hiddenMatchedFieldCount > 0" color="orange">+{{ hiddenMatchedFieldCount }}</a-tag>
    </div>
    <div v-if="reference.summary" class="citation-summary">{{ reference.summary }}</div>
  </a-card>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import type { ResearchReference } from '@/types/document'

const props = defineProps<{
  reference: ResearchReference
  index?: number
}>()

defineEmits<{
  (e: 'open', reference: ResearchReference): void
}>()

const strengthLabel = computed(() => {
  if (props.reference.strength === 'high') return '强证据'
  if (props.reference.strength === 'low') return '弱证据'
  return '中证据'
})

const isGuideSource = computed(() => props.reference.source_group === 'guide')

const visibleMatchedFieldLabels = computed(() => {
  return (props.reference.matched_field_labels || []).filter(Boolean).slice(0, 4)
})

const hiddenMatchedFieldCount = computed(() => {
  const total = (props.reference.matched_field_labels || []).filter(Boolean).length
  return total > 4 ? total - 4 : 0
})
</script>

<style scoped lang="less">
.citation-card {
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

  &:hover {
    border-color: #1890ff;
  }

  &--guide {
    background: linear-gradient(180deg, #fff9e6 0%, #fffdf5 100%);
    border-color: #ffd666;
    box-shadow: 0 8px 20px rgba(250, 173, 20, 0.12);

    &:hover {
      border-color: #faad14;
    }

    .citation-index {
      color: #d48806;
    }
  }

  .citation-title-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
  }

  .citation-index {
    color: #1890ff;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
  }

  .citation-title {
    font-size: 13px;
    font-weight: 500;
  }

  .citation-meta {
    font-size: 12px;
    color: #8c8c8c;
  }

  .citation-tags {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }

  .citation-summary {
    margin-top: 8px;
    color: #595959;
    font-size: 12px;
    line-height: 1.6;
  }
}
</style>