<template>
  <div
    v-if="visible"
    class="fixed inset-0 bg-black/50 flex items-center justify-center z-50"
    @click.self="$emit('close')"
  >
    <div class="bg-slate-800 rounded-lg w-[600px] max-h-[80vh] flex flex-col">
      <!-- 头部 -->
      <div class="p-4 border-b border-slate-700 flex items-center justify-between">
        <h3 class="text-lg font-medium text-white">选择素材</h3>
        <button
          @click="$emit('close')"
          class="text-slate-400 hover:text-white"
        ><IconLibrary name="close" :size="18" /></button>
      </div>

      <!-- 筛选器 -->
      <div class="p-3 border-b border-slate-700 flex gap-2">
        <button
          v-for="type in materialTypes"
          :key="type.id"
          @click="selectedType = type.id"
          :class="['text-xs px-3 py-1 rounded transition',
            selectedType === type.id
              ? 'bg-amber-600 text-white'
              : 'bg-slate-700 text-slate-300 hover:bg-slate-600']"
        >{{ type.label }}</button>
      </div>

      <!-- 素材列表 -->
      <div class="flex-1 overflow-y-auto p-4 space-y-3">
        <div
          v-for="material in filteredMaterials"
          :key="material.id"
          @click="selectMaterial(material)"
          :class="['p-3 rounded-lg border cursor-pointer transition',
            selectedMaterial?.id === material.id
              ? 'bg-amber-900/30 border-amber-500'
              : 'bg-slate-900 border-slate-700 hover:border-amber-500/50']"
        >
          <div class="flex items-center justify-between mb-2">
            <span class="text-sm font-medium text-white">{{ material.title }}</span>
            <span class="text-xs text-slate-500">{{ material.type }}</span>
          </div>
          <p class="text-xs text-slate-400 line-clamp-2">
            {{ getMaterialPreview(material) }}
          </p>
        </div>

        <div v-if="filteredMaterials.length === 0" class="text-center py-8">
          <span class="text-slate-500 text-sm">暂无素材</span>
        </div>
      </div>

      <!-- 底部操作 -->
      <div class="p-4 border-t border-slate-700 flex justify-end gap-2">
        <button
          @click="$emit('close')"
          class="px-4 py-2 text-sm bg-slate-700 text-slate-300 rounded hover:bg-slate-600"
        >取消</button>
        <button
          @click="confirmSelect"
          :disabled="!selectedMaterial"
          class="px-4 py-2 text-sm bg-amber-600 text-white rounded hover:bg-amber-500 disabled:opacity-50"
        >确认选择</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useDatabaseStore } from '../stores/database'
import IconLibrary from './icons/IconLibrary.vue'

const props = defineProps({
  visible: Boolean
})

const emit = defineEmits(['close', 'select'])

const dbStore = useDatabaseStore()

const selectedType = ref('all')
const selectedMaterial = ref(null)

const materialTypes = [
  { id: 'all', label: '全部' },
  { id: 'policy', label: '政策文件' },
  { id: 'speech', label: '领导讲话' },
  { id: 'case', label: '典型案例' },
  { id: 'reference', label: '参考范文' }
]

const filteredMaterials = computed(() => {
  const materials = dbStore.references || []
  if (selectedType.value === 'all') return materials
  return materials.filter(m => m.type === selectedType.value)
})

const getMaterialPreview = (material) => {
  if (material.excerpts?.length > 0) {
    return material.excerpts[0].content?.substring(0, 100) + '...'
  }
  return '暂无内容预览'
}

const selectMaterial = (material) => {
  selectedMaterial.value = material
}

const confirmSelect = () => {
  if (selectedMaterial.value) {
    emit('select', selectedMaterial.value)
    emit('close')
  }
}
</script>
