<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { usePromptStore } from '../stores/promptStore';
import type { PromptPreset } from '../types';
import NotificationToast from './NotificationToast.vue';

const store = usePromptStore();

// Props
const props = defineProps<{
  show: boolean;
}>();

// Emits
const emit = defineEmits<{
  close: [];
  load: [name: string];
  save: [name: string];
  delete: [name: string];
  rename: [oldName: string, newName: string];
}>();

// 组件状态
const presetSearch = ref('');
const renamingPreset = ref<string | null>(null);
const renamingValue = ref('');
const newPresetName = ref('');
const showCreateForm = ref(false);
const sortBy = ref<'name' | 'date'>('date');
const sortOrder = ref<'asc' | 'desc'>('desc');

// 通知状态与方法（复用现有提示框架）
const notification = ref<{ message: string; type: 'success' | 'error' | 'info'; show: boolean }>({ 
  message: '', 
  type: 'info', 
  show: false 
});

function showNotification(message: string, type: 'success' | 'error' | 'info' = 'info') {
  notification.value = { message, type, show: true };
  setTimeout(() => {
    notification.value.show = false;
  }, 3000);
}

// 计算属性
const filteredPresets = computed(() => {
  const q = presetSearch.value.trim().toLowerCase();
  // 合并旧预设和新预设，优先显示新预设
  let list = [
    ...store.extendedPresets.map(p => ({
      name: p.name,
      text: p.content,
      updatedAt: p.updatedAt,
      type: p.type,
      description: p.description,
      isExtended: true
    })),
    ...store.presets.map(p => ({
      name: p.name,
      text: p.text,
      updatedAt: p.updatedAt,
      type: 'positive' as const,
      description: undefined,
      isExtended: false
    }))
  ];
  
  // 去重（如果新旧预设有同名的，优先保留新预设）
  const seen = new Set();
  list = list.filter(p => {
    const key = `${p.name}_${p.type}`;
    if (seen.has(key)) return false;
    seen.add(key);
    return true;
  });
  
  // 搜索过滤 - 支持名称、内容、描述、标签、文件夹搜索
  if (q) {
    list = list.filter((p) => {
      // 基本搜索：名称、内容、描述
      const basicMatch = p.name.toLowerCase().includes(q) ||
                        p.text.toLowerCase().includes(q) ||
                        p.description?.toLowerCase().includes(q);
      
      // 标签搜索（如果是扩展预设）
      let tagMatch = false;
      if (p.isExtended) {
        const extendedPreset = store.extendedPresets.find(ep => ep.name === p.name && ep.type === p.type);
        if (extendedPreset?.tags) {
          tagMatch = extendedPreset.tags.some(tag => tag.toLowerCase().includes(q));
        }
      }
      
      // 文件夹搜索（如果是扩展预设）
      let folderMatch = false;
      if (p.isExtended) {
        const extendedPreset = store.extendedPresets.find(ep => ep.name === p.name && ep.type === p.type);
        if (extendedPreset?.folderId) {
          const folder = store.presetFolders.find(f => f.id === extendedPreset.folderId);
          if (folder) {
            folderMatch = folder.name.toLowerCase().includes(q);
          }
        }
      }
      
      // 类型搜索
      const typeMatch = getTypeLabel(p.type).toLowerCase().includes(q);
      
      return basicMatch || tagMatch || folderMatch || typeMatch;
    });
  }
  
  // 排序
  list.sort((a, b) => {
    let comparison = 0;
    
    if (sortBy.value === 'name') {
      comparison = a.name.localeCompare(b.name);
    } else {
      comparison = new Date(a.updatedAt).getTime() - new Date(b.updatedAt).getTime();
    }
    
    return sortOrder.value === 'asc' ? comparison : -comparison;
  });
  
  return list;
});

const presetStats = computed(() => {
  const totalOld = store.presets.length;
  const totalExtended = store.extendedPresets.length;
  const dayAgo = new Date();
  dayAgo.setDate(dayAgo.getDate() - 1);
  
  const recentOld = store.presets.filter(p => new Date(p.updatedAt) > dayAgo).length;
  const recentExtended = store.extendedPresets.filter(p => new Date(p.updatedAt) > dayAgo).length;
  
  return {
    total: totalOld + totalExtended,
    recent: recentOld + recentExtended
  };
});

// 方法
function loadPreset(name: string) {
  emit('load', name);
  emit('close');
}

function saveNewPreset() {
  const name = newPresetName.value.trim();
  if (!name) return;
  
  // 只保存到新的扩展预设系统
  const defaultFolder = store.presetManagement?.settings?.defaultFolder;
  store.createExtendedPreset({
    name: name,
    type: 'positive',
    content: store.promptText,
    description: '从快速预设创建',
    folderId: defaultFolder
  });
  
  newPresetName.value = '';
  showCreateForm.value = false;
}

function deletePreset(preset: any) {
  if (confirm(`确定删除预设「${preset.name}」吗？`)) {
    // 删除旧系统中的预设
    if (!preset.isExtended) {
      emit('delete', preset.name);
    }
    
    // 删除扩展预设系统中的预设
    if (preset.isExtended) {
      const extendedPreset = store.extendedPresets.find(p => p.name === preset.name && p.type === preset.type);
      if (extendedPreset) {
        store.deleteExtendedPreset(extendedPreset.id);
      }
    }
  }
}

function beginRename(name: string) {
  renamingPreset.value = name;
  renamingValue.value = name;
}

function commitRename() {
  if (!renamingPreset.value) return;
  
  const oldName = renamingPreset.value;
  const newName = renamingValue.value.trim();
  
  if (!newName) {
    alert('预设名称不能为空');
    return;
  }
  
  if (newName !== oldName) {
    emit('rename', oldName, newName);
  }
  
  cancelRename();
}

function cancelRename() {
  renamingPreset.value = null;
  renamingValue.value = '';
}

async function copyPresetToClipboard(preset: any) {
  const text = preset?.text || '';
  if (!text) return;
  
  try {
    await navigator.clipboard.writeText(text);
    showNotification('已复制到剪贴板', 'success');
  } catch (err) {
    try {
      const ta = document.createElement('textarea');
      ta.value = text;
      ta.style.position = 'fixed';
      ta.style.left = '-9999px';
      document.body.appendChild(ta);
      ta.focus();
      ta.select();
      document.execCommand('copy');
      document.body.removeChild(ta);
      showNotification('已复制到剪贴板', 'success');
    } catch (e) {
      console.error('复制到剪贴板失败:', e);
      showNotification('复制失败，请手动复制', 'error');
    }
  }
}

function exportPreset(preset: any) {
  const data = {
    name: preset.name,
    text: preset.text,
    type: preset.type,
    description: preset.description,
    updatedAt: preset.updatedAt,
    exportedAt: new Date().toISOString()
  };
  
  const blob = new Blob([JSON.stringify(data, null, 2)], { type: 'application/json' });
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `preset-${preset.name}.json`;
  a.click();
  URL.revokeObjectURL(url);
}

function importPreset(event: Event) {
  const file = (event.target as HTMLInputElement).files?.[0];
  if (!file) return;
  
  const reader = new FileReader();
  reader.onload = (e) => {
    try {
      const data = JSON.parse(e.target?.result as string);
      if (data.name && data.text) {
        const existingIndex = store.presets.findIndex(p => p.name === data.name);
        if (existingIndex >= 0) {
          if (confirm(`预设「${data.name}」已存在，是否覆盖？`)) {
            store.presets[existingIndex] = {
              name: data.name,
              text: data.text,
              updatedAt: new Date().toISOString()
            };
          }
        } else {
          store.presets.push({
            name: data.name,
            text: data.text,
            updatedAt: new Date().toISOString()
          });
        }
        store.save();
      }
    } catch (error) {
      alert('导入失败，请检查文件格式');
    }
  };
  reader.readAsText(file);
  
  // 重置文件输入
  (event.target as HTMLInputElement).value = '';
}

function getTypeLabel(type: string) {
  const typeMap: Record<string, string> = {
    'positive': '正面',
    'negative': '负面',
    'setting': '设定',
    'style': '风格',
    'character': '角色',
    'scene': '场景',
    'custom': '自定义'
  };
  return typeMap[type] || type;
}

function formatDate(dateStr: string) {
  const date = new Date(dateStr);
  const now = new Date();
  const diffMs = now.getTime() - date.getTime();
  const diffDays = Math.floor(diffMs / (1000 * 60 * 60 * 24));
  
  if (diffDays === 0) {
    return '今天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
  } else if (diffDays === 1) {
    return '昨天 ' + date.toLocaleTimeString('zh-CN', { hour: '2-digit', minute: '2-digit' });
  } else if (diffDays < 7) {
    return `${diffDays}天前`;
  } else {
    return date.toLocaleDateString('zh-CN');
  }
}

function getPresetPreview(text: string, maxLength = 50) {
  return text.length > maxLength ? text.substring(0, maxLength) + '...' : text;
}

function toggleSort(field: 'name' | 'date') {
  if (sortBy.value === field) {
    sortOrder.value = sortOrder.value === 'asc' ? 'desc' : 'asc';
  } else {
    sortBy.value = field;
    sortOrder.value = field === 'name' ? 'asc' : 'desc';
  }
}

// 键盘事件处理
function handleKeydown(event: KeyboardEvent) {
  if (event.key === 'Escape') {
    emit('close');
  }
}

onMounted(() => {
  document.addEventListener('keydown', handleKeydown);
});

onUnmounted(() => {
  document.removeEventListener('keydown', handleKeydown);
});
</script>

<template>
  <Transition name="dropdown">
    <div v-if="show" class="pd-dropdown">
      <!-- 头部统计和操作 -->
      <div class="pd-header">
        <div class="pd-stats">
          <span class="pd-stat-item">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z" stroke="currentColor" stroke-width="2"/>
            </svg>
            {{ presetStats.total }} 个预设
          </span>
          <span v-if="presetStats.recent > 0" class="pd-stat-item pd-recent">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="2"/>
              <polyline points="12,6 12,12 16,14" stroke="currentColor" stroke-width="2"/>
            </svg>
            {{ presetStats.recent }} 个最近更新
          </span>
        </div>
        
        <div class="pd-header-actions">
          <label class="pd-import-btn" title="导入预设">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
              <polyline points="17,8 12,3 7,8" stroke="currentColor" stroke-width="2"/>
              <line x1="12" y1="3" x2="12" y2="15" stroke="currentColor" stroke-width="2"/>
            </svg>
            <input type="file" accept=".json" @change="importPreset" style="display: none;">
          </label>
          
          <button @click="showCreateForm = !showCreateForm" class="pd-create-btn" title="创建新预设">
            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <line x1="12" y1="5" x2="12" y2="19" stroke="currentColor" stroke-width="2"/>
              <line x1="5" y1="12" x2="19" y2="12" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- 快速创建表单 -->
      <Transition name="slide-down">
        <div v-if="showCreateForm" class="pd-create-form">
          <div class="pd-create-input">
            <input 
              v-model="newPresetName" 
              placeholder="输入预设名称..." 
              @keyup.enter="saveNewPreset"
              @keyup.escape="showCreateForm = false"
            />
            <div class="pd-create-actions">
              <button @click="saveNewPreset" class="pd-create-confirm" title="保存">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <polyline points="20,6 9,17 4,12" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
              <button @click="showCreateForm = false" class="pd-create-cancel" title="取消">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2"/>
                  <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
            </div>
          </div>
        </div>
      </Transition>

      <!-- 搜索和排序 -->
      <div class="pd-search-wrapper">
        <div class="pd-search">
          <svg width="14" height="14" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
            <circle cx="11" cy="11" r="8" stroke="currentColor" stroke-width="2"/>
            <path d="m21 21-4.35-4.35" stroke="currentColor" stroke-width="2"/>
          </svg>
          <input v-model="presetSearch" placeholder="搜索预设名称、内容、标签、文件夹..." />
        </div>
        
        <div class="pd-sort-controls">
          <button 
            @click="toggleSort('name')" 
            :class="{ active: sortBy === 'name' }"
            class="pd-sort-btn"
            title="按名称排序"
          >
            名称
            <svg v-if="sortBy === 'name'" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <polyline :points="sortOrder === 'asc' ? '6,9 12,15 18,9' : '18,15 12,9 6,15'" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
          <button 
            @click="toggleSort('date')" 
            :class="{ active: sortBy === 'date' }"
            class="pd-sort-btn"
            title="按时间排序"
          >
            时间
            <svg v-if="sortBy === 'date'" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
              <polyline :points="sortOrder === 'asc' ? '6,9 12,15 18,9' : '18,15 12,9 6,15'" stroke="currentColor" stroke-width="2"/>
            </svg>
          </button>
        </div>
      </div>

      <!-- 预设列表 -->
      <div class="pd-list">
        <div v-if="filteredPresets.length === 0" class="pd-empty">
          <div class="pd-empty-icon">📝</div>
          <span>{{ presetSearch ? '未找到匹配的预设' : '暂无预设' }}</span>
        </div>
        
        <div v-for="p in filteredPresets" :key="`${p.name}_${p.type}`" class="pd-item">
          <template v-if="renamingPreset !== p.name">
            <div class="pd-item-main" @click="loadPreset(p.name)">
              <div class="pd-item-header">
                <div class="pd-item-title">
                  <span class="pd-item-name">{{ p.name }}</span>
                  <span v-if="p.isExtended" class="pd-item-type" :class="`type-${p.type}`">
                    {{ getTypeLabel(p.type) }}
                  </span>
                </div>
                <span class="pd-item-date">{{ formatDate(p.updatedAt) }}</span>
              </div>
              <div class="pd-item-preview">{{ getPresetPreview(p.text) }}</div>
              <div v-if="p.description" class="pd-item-description">{{ p.description }}</div>
            </div>
            
            <div class="pd-item-actions">
              <button @click.stop="copyPresetToClipboard(p)" class="pd-action-btn" title="复制到剪贴板">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2"/>
                  <path d="m5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
              <button @click.stop="exportPreset(p)" class="pd-action-btn" title="导出">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" stroke="currentColor" stroke-width="2"/>
                  <polyline points="7,10 12,15 17,10" stroke="currentColor" stroke-width="2"/>
                  <line x1="12" y1="15" x2="12" y2="3" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
              <button @click.stop="beginRename(p.name)" class="pd-action-btn" title="重命名">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" stroke="currentColor" stroke-width="2"/>
                  <path d="m18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
              <button @click.stop="deletePreset(p)" class="pd-action-btn pd-delete" title="删除">
                <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <polyline points="3,6 5,6 21,6" stroke="currentColor" stroke-width="2"/>
                  <path d="m19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" stroke="currentColor" stroke-width="2"/>
                </svg>
              </button>
            </div>
          </template>
          
          <template v-else>
            <div class="pd-rename-form">
              <input 
                v-model="renamingValue" 
                @keyup.enter="commitRename" 
                @keyup.escape="cancelRename"
                @click.stop
                class="pd-rename-input"
              />
              <div class="pd-rename-actions">
                <button @click.stop="commitRename" class="pd-rename-confirm" title="确定">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <polyline points="20,6 9,17 4,12" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </button>
                <button @click.stop="cancelRename" class="pd-rename-cancel" title="取消">
                  <svg width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <line x1="18" y1="6" x2="6" y2="18" stroke="currentColor" stroke-width="2"/>
                    <line x1="6" y1="6" x2="18" y2="18" stroke="currentColor" stroke-width="2"/>
                  </svg>
                </button>
              </div>
            </div>
          </template>
        </div>
      </div>

      <!-- 底部提示 -->
      <div class="pd-footer">
        <div class="pd-tips">
          <span>💡 双击预设名称快速加载</span>
          <span>🔍 支持搜索名称、内容、标签、文件夹</span>
          <span>⌨️ ESC 关闭面板</span>
        </div>
      </div>
      
      <!-- 通知组件 -->
      <NotificationToast 
        :message="notification.message"
        :type="notification.type"
        :show="notification.show"
      />
    </div>
  </Transition>
</template>

<style scoped>
.pd-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 50;
  min-width: 380px;
  max-width: 500px;
  max-height: 500px;
  background-color: var(--color-bg-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xl);
  margin-top: 0.5rem;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.pd-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
}

.pd-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
}

.pd-stat-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--color-text-secondary);
}

.pd-stat-item.pd-recent {
  color: var(--color-accent);
}

.pd-header-actions {
  display: flex;
  gap: 0.25rem;
}

.pd-import-btn, .pd-create-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-import-btn:hover, .pd-create-btn:hover {
  background-color: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.pd-create-form {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
}

.pd-create-input {
  display: flex;
  gap: 0.5rem;
}

.pd-create-input input {
  flex: 1;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

.pd-create-input input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.pd-create-actions {
  display: flex;
  gap: 0.25rem;
}

.pd-create-confirm, .pd-create-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-create-confirm {
  background-color: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

.pd-create-confirm:hover {
  background-color: var(--color-success-hover);
}

.pd-create-cancel {
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
}

.pd-create-cancel:hover {
  background-color: var(--color-error);
  color: white;
  border-color: var(--color-error);
}

.pd-search-wrapper {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.pd-search {
  position: relative;
  flex: 1;
}

.pd-search svg {
  position: absolute;
  left: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
}

.pd-search input {
  width: 100%;
  padding: 0.375rem 0.5rem 0.375rem 2rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-secondary);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  transition: all 0.2s ease;
}

.pd-search input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.pd-sort-controls {
  display: flex;
  gap: 0.25rem;
}

.pd-sort-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-sort-btn:hover {
  background-color: var(--color-bg-tertiary);
}

.pd-sort-btn.active {
  background-color: var(--color-accent);
  color: white;
  border-color: var(--color-accent);
}

.pd-list {
  flex: 1;
  overflow-y: auto;
  max-height: 300px;
}

.pd-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  text-align: center;
  color: var(--color-text-tertiary);
  font-size: 0.875rem;
}

.pd-empty-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

.pd-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  transition: all 0.2s ease;
}

.pd-item:last-child {
  border-bottom: none;
}

.pd-item:hover {
  background-color: var(--color-bg-secondary);
}

.pd-item-main {
  flex: 1;
  cursor: pointer;
  min-width: 0;
}

.pd-item-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}

.pd-item-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
  min-width: 0;
}

.pd-item-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

.pd-item-type {
  padding: 0.125rem 0.375rem;
  border-radius: var(--radius-sm);
  font-size: 0.6875rem;
  font-weight: 500;
  flex-shrink: 0;
}

.pd-item-type.type-positive {
  background-color: #dcfce7;
  color: #166534;
}

.pd-item-type.type-negative {
  background-color: #fee2e2;
  color: #991b1b;
}

.pd-item-type.type-setting {
  background-color: #e0e7ff;
  color: #3730a3;
}

.pd-item-type.type-style {
  background-color: #fef3c7;
  color: #92400e;
}

.pd-item-type.type-character {
  background-color: #f3e8ff;
  color: #6b21a8;
}

.pd-item-type.type-scene {
  background-color: #ecfdf5;
  color: #047857;
}

.pd-item-type.type-custom {
  background-color: #f1f5f9;
  color: #475569;
}

.pd-item-date {
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  flex-shrink: 0;
  margin-left: 0.5rem;
}

.pd-item-preview {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.25rem;
}

.pd-item-description {
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-style: italic;
}

.pd-item-actions {
  display: flex;
  gap: 0.25rem;
  opacity: 0.7;
  transition: opacity 0.2s ease;
  margin-left: 0.5rem;
}

.pd-item:hover .pd-item-actions {
  opacity: 1;
}

.pd-action-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-border);
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-action-btn:hover {
  background-color: var(--color-bg-tertiary);
  color: var(--color-text-primary);
}

.pd-action-btn.pd-delete:hover {
  background-color: var(--color-error);
  color: white;
  border-color: var(--color-error);
}

.pd-rename-form {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
}

.pd-rename-input {
  flex: 1;
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background-color: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-size: 0.875rem;
}

.pd-rename-input:focus {
  outline: none;
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-light);
}

.pd-rename-actions {
  display: flex;
  gap: 0.25rem;
}

.pd-rename-confirm, .pd-rename-cancel {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all 0.2s ease;
}

.pd-rename-confirm {
  background-color: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

.pd-rename-confirm:hover {
  background-color: var(--color-success-hover);
}

.pd-rename-cancel {
  background-color: var(--color-bg-primary);
  color: var(--color-text-secondary);
}

.pd-rename-cancel:hover {
  background-color: var(--color-error);
  color: white;
  border-color: var(--color-error);
}

.pd-footer {
  padding: 0.5rem 1rem;
  border-top: 1px solid var(--color-border);
  background-color: var(--color-bg-secondary);
}

.pd-tips {
  display: flex;
  gap: 1rem;
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
}

/* 动画 */
.dropdown-enter-active {
  transition: all 0.2s ease-out;
}

.dropdown-leave-active {
  transition: all 0.2s ease-in;
}

.dropdown-enter-from {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
}

.dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px) scale(0.95);
}

.slide-down-enter-active {
  transition: all 0.2s ease-out;
}

.slide-down-leave-active {
  transition: all 0.2s ease-in;
}

.slide-down-enter-from {
  opacity: 0;
  max-height: 0;
  transform: translateY(-10px);
}

.slide-down-leave-to {
  opacity: 0;
  max-height: 0;
  transform: translateY(-10px);
}

/* 滚动条样式 */
.pd-list::-webkit-scrollbar {
  width: 6px;
}

.pd-list::-webkit-scrollbar-track {
  background: var(--color-bg-secondary);
}

.pd-list::-webkit-scrollbar-thumb {
  background: var(--color-border-hover);
  border-radius: 3px;
}

.pd-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-tertiary);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .pd-dropdown {
    min-width: 320px;
    max-width: 90vw;
  }
  
  .pd-search-wrapper {
    flex-direction: column;
    align-items: stretch;
    gap: 0.5rem;
  }
  
  .pd-sort-controls {
    justify-content: center;
  }
  
  .pd-tips {
    flex-direction: column;
    gap: 0.25rem;
    text-align: center;
  }
  
  .pd-item-actions {
    opacity: 1;
  }
}
</style>
