<template>
  <div v-if="visible" class="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
    <div class="bg-slate-800 rounded-lg w-[600px] max-h-[80vh] overflow-hidden border border-slate-600 flex flex-col shadow-2xl">
      <!-- 头部 -->
      <div class="p-4 border-b border-slate-700 flex items-center justify-between shrink-0">
        <h3 class="text-lg font-bold text-white flex items-center gap-2">
          <IconLibrary name="folder" :size="18" /> 选择写作范式
        </h3>
        <button @click="$emit('close')" class="text-slate-400 hover:text-white transition">
          <IconLibrary name="close" :size="18" />
        </button>
      </div>

      <!-- 搜索/过滤 -->
      <div class="px-4 py-3 border-b border-slate-700 bg-slate-800/50 shrink-0">
        <input 
          v-model="searchQuery"
          type="text"
          placeholder="搜索范式名称或描述..."
          class="w-full bg-slate-900 border border-slate-700 rounded-lg px-3 py-2 text-sm text-slate-200 focus:ring-2 focus:ring-blue-500 focus:border-transparent outline-none transition"
        />
      </div>

      <!-- 范式列表 -->
      <div class="flex-1 overflow-y-auto p-4 space-y-3 min-h-0 bg-slate-900/20">
        <div v-if="filteredParadigms.length === 0" class="text-center text-slate-500 py-12">
          <div class="w-12 h-12 flex items-center justify-center mx-auto mb-2">
            <IconLibrary name="search" :size="32" />
          </div>
          <p class="text-sm">未找到相关范式</p>
        </div>
        
        <div 
          v-for="paradigm in filteredParadigms" 
          :key="paradigm.id"
          @click="selectParadigm(paradigm)"
          :class="['p-4 rounded-xl border cursor-pointer transition-all duration-300 group',
            selectedId === paradigm.id 
              ? 'bg-blue-600/10 border-blue-500 shadow-[0_0_15px_rgba(59,130,246,0.1)]' 
              : 'bg-slate-800 border-slate-700 hover:border-slate-500 hover:bg-slate-750'
          ]"
        >
          <div class="flex items-start gap-4">
            <!-- 图标区 -->
            <div :class="['w-12 h-12 rounded-xl flex items-center justify-center text-2xl shrink-0 transition-transform group-hover:scale-110', 
              selectedId === paradigm.id ? 'bg-blue-600' : 'bg-slate-700']">
              {{ paradigm.icon }}
            </div>

            <!-- 内容区 -->
            <div class="flex-1 min-w-0">
              <div class="flex items-center justify-between mb-1">
                <h4 class="font-bold text-white text-base truncate">{{ paradigm.name }}</h4>
                <div class="flex gap-1">
                  <span v-if="paradigm.isNew" class="text-[10px] px-1.5 py-0.5 rounded bg-orange-500 text-white font-bold animate-pulse">NEW</span>
                  <span v-if="paradigm.isCustom" class="text-[10px] px-1.5 py-0.5 rounded bg-purple-500 text-white font-bold">自定义</span>
                </div>
              </div>
              <p class="text-xs text-slate-400 line-clamp-2 leading-relaxed mb-3">{{ paradigm.description }}</p>
              
              <!-- 标签列表 -->
              <div class="flex flex-wrap gap-1.5">
                <span 
                  v-for="tag in paradigm.tags" 
                  :key="tag"
                  :class="['text-[10px] px-2 py-0.5 rounded-full border border-slate-700/50', 
                    selectedId === paradigm.id ? 'bg-blue-900/40 text-blue-200' : 'bg-slate-700 text-slate-300']"
                >
                  {{ tag }}
                </span>
              </div>
            </div>

            <!-- 勾选指示 -->
            <div class="w-6 h-6 rounded-full border-2 flex items-center justify-center shrink-0 mt-1 transition-colors"
              :class="selectedId === paradigm.id ? 'border-blue-500 bg-blue-600' : 'border-slate-600'">
              <IconLibrary v-if="selectedId === paradigm.id" name="check" :size="12" class="text-white" />
            </div>
          </div>
        </div>
      </div>

      <!-- 底部操作 -->
      <div class="p-4 border-t border-slate-700 bg-slate-800 flex gap-3 shrink-0">
        <button
          @click="$emit('create-custom')"
          class="py-2.5 px-4 rounded-lg bg-purple-600 text-white hover:bg-purple-500 transition font-medium shadow-lg shadow-purple-900/20 flex items-center gap-2"
          title="从需求文档创建自定义范式"
        >
          <IconLibrary name="sparkles" :size="14" />
          <span>新建范式</span>
        </button>
        <div class="flex-1 flex gap-3">
          <button
            @click="$emit('close')"
            class="flex-1 py-2.5 rounded-lg bg-slate-700 text-slate-300 hover:bg-slate-600 transition font-medium"
          >
            取消
          </button>
          <button
            @click="confirmSelect"
            :disabled="!selectedId"
            class="flex-1 py-2.5 rounded-lg bg-blue-600 text-white hover:bg-blue-500 transition font-medium disabled:opacity-50 disabled:cursor-not-allowed shadow-lg shadow-blue-900/20"
          >
            确认作为对比要求
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch } from 'vue'
import { getParadigmList } from '../config/paradigms.js'
import IconLibrary from './icons/IconLibrary.vue'

const props = defineProps({
  visible: Boolean
})

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

// 状态
const paradigms = ref([])
const selectedId = ref(null)
const searchQuery = ref('')

// 加载范式列表（集成默认与自定义）
const loadParadigms = () => {
  const defaultList = getParadigmList()
  
  // 从本地存储加载自定义范式
  const savedCustomParadigms = localStorage.getItem('customParadigms')
  const customList = savedCustomParadigms ? JSON.parse(savedCustomParadigms) : []
  
  // 合并并处理
  paradigms.value = [...defaultList, ...customList]
}

// 筛选后的列表
const filteredParadigms = computed(() => {
  if (!searchQuery.value.trim()) return paradigms.value
  
  const query = searchQuery.value.toLowerCase()
  return paradigms.value.filter(p => 
    p.name.toLowerCase().includes(query) || 
    p.description.toLowerCase().includes(query) ||
    (p.tags && p.tags.some(tag => tag.toLowerCase().includes(query)))
  )
})

// 选择
const selectParadigm = (p) => {
  selectedId.value = p.id
}

// 确认
const confirmSelect = () => {
  const p = paradigms.value.find(item => item.id === selectedId.value)
  if (p) {
    emit('select', p)
  }
}

// 监听显示状态
watch(() => props.visible, (val) => {
  if (val) {
    searchQuery.value = ''
    selectedId.value = null
    loadParadigms()
  }
})
</script>

<style scoped>
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
</style>
