<template>
  <div class="media-section" v-if="hasTags">
    <h4>{{ t('Tags') }}</h4>
    <div class="tag-cloud">
      <n-tag 
        v-for="tag in tags" 
        :key="tag"
        type="info"
        size="small"
        @click="searchByTag(tag)"
        class="tag-item"
      >
        {{ tag }}
      </n-tag>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { NTag } from 'naive-ui'
import { t } from '@/shared/i18n'

const props = defineProps<{
  metaFields: any[]
  record: Record<string, any>
}>()

// 标签处理 - 直接处理 _user_tags
const tags = computed(() => {
  const userTags = props.record._user_tags
  if (userTags && typeof userTags === 'string') {
    const trimmed = userTags.trim()
    if (trimmed) {
      return trimmed.split(',').map(tag => tag.trim()).filter(tag => tag.length > 0)
    }
  }
  return []
})

const hasTags = computed(() => tags.value.length > 0)

const searchByTag = (tag: string) => {
  // 实现标签搜索功能
  console.log('Search by tag:', tag)
}
</script>

<style scoped>
/* 媒体区域 */
.media-section {
  margin-bottom: 24px;
}

.media-section:last-child {
  margin-bottom: 0;
}

.media-section h4 {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* 标签云 */
.tag-cloud {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tag-item {
  cursor: pointer;
  transition: all 0.2s ease;
}

.tag-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
</style>
