<template>
  <div class="prompt-selector">
    <!-- 下拉菜单式选择器（推荐方案） -->
    <div v-if="displayMode === 'select'" class="prompt-select-container">
      <a-select
        v-model:value="selectedPromptId"
        placeholder="选择文案风格"
        style="width: 100%"
        @change="handleSelectChange"
        :loading="loading"
      >
        <a-select-option
          v-for="prompt in allPrompts"
          :key="prompt.id"
          :value="prompt.id"
        >
          <div class="prompt-option">
            <span class="prompt-option-name">{{ prompt.name }}</span>
          </div>
        </a-select-option>
      </a-select>
    </div>

    <!-- 标签式选择器 -->
    <div v-else-if="displayMode === 'tags'" class="prompt-tags-container">
      <div class="prompt-tags-grid">
        <div
          v-for="prompt in displayPrompts"
          :key="prompt.id"
          class="prompt-tag"
          :class="{ 'prompt-tag-selected': selectedPromptId === prompt.id }"
          @click="selectPrompt(prompt)"
        >
          <span class="prompt-tag-name">{{ prompt.name }}</span>
        </div>
      </div>
      <div v-if="hasMore && showMoreButton" class="prompt-more-button">
        <a-button size="small" type="link" @click="showAllPromptsModal = true" :disabled="allPrompts.length === 0">
          更多 ({{ allPrompts.length - displayCount }})
        </a-button>
      </div>
    </div>

    <!-- 加载状态 -->
    <div v-if="loading && allPrompts.length === 0" class="prompt-loading">
      <a-spin size="small" />
      <span class="loading-text">加载中...</span>
    </div>

    <!-- 更多提示词弹窗 -->
    <div v-if="showAllPromptsModal" class="prompt-modal-mask" @click.self="showAllPromptsModal = false">
      <div class="prompt-modal">
        <div class="prompt-modal-header">
          <h3 class="prompt-modal-title">选择提示词</h3>
          <button class="prompt-modal-close" @click="showAllPromptsModal = false">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <line x1="18" y1="6" x2="6" y2="18"></line>
              <line x1="6" y1="6" x2="18" y2="18"></line>
            </svg>
          </button>
        </div>

        <!-- 搜索框 -->
        <div class="prompt-modal-search">
          <svg class="prompt-search-icon" xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <circle cx="11" cy="11" r="8"></circle>
            <line x1="21" y1="21" x2="16.65" y2="16.65"></line>
          </svg>
          <input
            v-model="promptSearchKeyword"
            type="text"
            placeholder="搜索提示词..."
            class="prompt-search-input"
          />
          <button class="refresh-button" @click="refreshUserPrompts" :disabled="loading">
            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
              <polyline points="23 4 23 10 17 10"></polyline>
              <path d="M20.49 15a9 9 0 1 1-2.12-9.36L23 10"></path>
            </svg>
          </button>
        </div>

        <!-- 提示词列表 -->
        <div class="prompt-modal-content">
          <div v-if="filteredPrompts.length > 0" class="all-prompts-grid">
            <div
              v-for="prompt in filteredPrompts"
              :key="prompt.id"
              class="all-prompt-tag"
              :class="{ 'all-prompt-tag-selected': selectedPromptId === prompt.id }"
              @click="selectPrompt(prompt)"
            >
              <span class="all-prompt-tag-name">{{ prompt.name }}</span>
              <span v-if="prompt.status === 1" class="all-prompt-tag-status">启用</span>
              <span v-else class="all-prompt-tag-status all-prompt-tag-status-disabled">禁用</span>
            </div>
          </div>
          <div v-else class="prompt-empty-state">
            <div class="prompt-empty-icon">
              <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"></rect>
                <circle cx="8.5" cy="8.5" r="1.5"></circle>
                <polyline points="21 15 16 10 5 21"></polyline>
              </svg>
            </div>
            <p class="prompt-empty-text">没有找到匹配的提示词</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, onMounted } from 'vue'
import { useUserStore } from '@/stores/user'
import { usePromptStore } from '@/stores/prompt'
import { message } from 'ant-design-vue'
import { setJSON, getJSON } from '@/utils/storage'

// Props
const props = defineProps({
  // 当前选中的提示词ID
  modelValue: {
    type: Number,
    default: null
  },
  // 展示模式：tags（标签）或 select（下拉选择）
  displayMode: {
    type: String,
    default: 'select' // 默认为select模式，因为用户反馈标签模式不好看
  },
  // 展示数量（仅标签模式有效）
  displayCount: {
    type: Number,
    default: 6
  },
  // 是否显示"更多"按钮
  showMoreButton: {
    type: Boolean,
    default: true
  },
  // 本地存储键名前缀，用于保存和恢复选择
  storageKey: {
    type: String,
    default: 'prompt_selector'
  }
})

// Emits
const emit = defineEmits(['update:modelValue', 'change'])

// Stores
const userStore = useUserStore()
const promptStore = usePromptStore()

// Refs
const showAllPromptsModal = ref(false)
const promptSearchKeyword = ref('')
const selectedPromptId = ref(props.modelValue)

// 使用 store 中的数据
const allPrompts = computed(() => promptStore.promptList)
const loading = computed(() => promptStore.promptListLoading)

// 计算属性：展示的部分提示词
const displayPrompts = computed(() => {
  if (props.displayMode !== 'tags') return []
  return allPrompts.value.slice(0, props.displayCount)
})

// 计算属性：是否有更多提示词
const hasMore = computed(() => {
  return allPrompts.value.length > props.displayCount
})

// 计算属性：过滤后的全部提示词（用于"更多"弹窗）
const filteredPrompts = computed(() => {
  if (!promptSearchKeyword.value.trim()) {
    return allPrompts.value
  }
  const keyword = promptSearchKeyword.value.trim().toLowerCase()
  return allPrompts.value.filter(p =>
    p.name.toLowerCase().includes(keyword) ||
    (p.content && p.content.toLowerCase().includes(keyword))
  )
})

// 监听 selectedPromptId 变化，同步到父组件
watch(selectedPromptId, (newValue) => {
  emit('update:modelValue', newValue)
  saveSelectedPromptId(newValue)
})

// 监听 props.modelValue 变化，更新内部状态
watch(() => props.modelValue, (newValue) => {
  selectedPromptId.value = newValue
})

// 加载用户提示词
async function loadUserPrompts() {
  // 检查用户是否登录
  if (!userStore.userId) {
    console.warn('用户未登录，无法加载提示词')
    return
  }

  try {
    // 使用 store 加载数据
    const prompts = await promptStore.loadPromptList(userStore.userId)

    // 如果有选中ID，但当前选中的提示词不在列表中，清空选择
    if (selectedPromptId.value && !prompts.find(p => p.id === selectedPromptId.value)) {
      selectedPromptId.value = null
    }
    // 如果没有选中ID且有提示词，默认选中第一个
    else if (!selectedPromptId.value && prompts.length > 0) {
      selectedPromptId.value = prompts[0].id
    }

    // 尝试从本地存储恢复选中状态
    await restoreSelectedPromptId()
  } catch (error) {
    console.error('加载提示词失败:', error)
  }
}

// 保存选中的提示词ID到本地存储
async function saveSelectedPromptId(promptId) {
  if (!promptId) return

  try {
    await setJSON(`${props.storageKey}_selected`, promptId)
  } catch (error) {
    console.error('保存提示词选择失败:', error)
  }
}

// 从本地存储恢复选中的提示词ID
async function restoreSelectedPromptId() {
  try {
    const savedId = await getJSON(`${props.storageKey}_selected`, null)
    if (savedId) {
      // 检查保存的ID是否在当前列表中
      const prompt = allPrompts.value.find(p => p.id === savedId)
      if (prompt) {
        selectedPromptId.value = savedId
      }
    }
  } catch (error) {
    console.error('恢复提示词选择失败:', error)
  }
}

// 选择提示词
function selectPrompt(prompt) {
  if (!prompt || !prompt.content) {
    console.warn('提示词内容为空')
    return
  }

  selectedPromptId.value = prompt.id
  emit('change', prompt)
  showAllPromptsModal.value = false
}

// 处理下拉选择变化
function handleSelectChange(value) {
  const prompt = allPrompts.value.find(p => p.id === value)
  if (prompt) {
    emit('change', prompt)
  }
}

// 刷新用户提示词
async function refreshUserPrompts() {
  try {
    await promptStore.refreshPromptList(userStore.userId)
    await restoreSelectedPromptId()
  } catch (error) {
    console.error('刷新提示词失败:', error)
    message.error('刷新提示词失败')
  }
}

// 组件挂载时加载提示词
onMounted(() => {
  loadUserPrompts()
})
</script>

<style scoped>
/* 基础样式 */
.prompt-selector {
  width: 100%;
}

/* 下拉选择器样式 */
.prompt-select-container {
  width: 100%;
}

.prompt-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.prompt-option-name {
  font-weight: 500;
}

/* 标签模式 */
.prompt-tags-container {
  margin-bottom: 12px;
}

.prompt-tags-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.prompt-tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.prompt-tag:hover {
  border-color: var(--color-primary);
  background: rgba(24, 144, 255, 0.08);
}

.prompt-tag-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.prompt-tag-name {
  white-space: nowrap;
  user-select: none;
}

.prompt-more-button {
  margin-top: 8px;
  text-align: right;
}

/* 加载状态 */
.prompt-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 20px;
  color: var(--color-text-secondary);
}

.loading-text {
  font-size: 14px;
}

/* 空状态 */
.prompt-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--color-text-secondary);
}

.prompt-empty-icon {
  color: var(--color-text-secondary);
  opacity: 0.5;
  margin-bottom: 12px;
}

.prompt-empty-text {
  font-size: 14px;
  margin: 0;
}

/* 弹窗 */
.prompt-modal-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.prompt-modal {
  background: var(--color-surface);
  border-radius: var(--radius-card);
  width: 600px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.prompt-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
}

.prompt-modal-title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.prompt-modal-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.prompt-modal-close:hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.prompt-modal-search {
  position: relative;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  display: flex;
  gap: 12px;
}

.prompt-search-icon {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
}

.prompt-search-input {
  flex: 1;
  padding: 10px 12px 10px 40px;
  font-size: 14px;
  color: var(--color-text);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

.prompt-search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(24, 144, 255, 0.1);
}

.refresh-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text);
  cursor: pointer;
}

.refresh-button:hover:not(:disabled) {
  background: var(--color-primary);
  color: #fff;
  border-color: var(--color-primary);
}

.refresh-button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.prompt-modal-content {
  overflow-y: auto;
  max-height: calc(80vh - 180px);
  padding: 16px 0;
}

/* 提示词列表 */
.all-prompts-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0 16px;
}

.all-prompt-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

.all-prompt-tag:hover {
  border-color: var(--color-primary);
  background: rgba(24, 144, 255, 0.08);
}

.all-prompt-tag-selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: #fff;
}

.all-prompt-tag-name {
  white-space: nowrap;
  user-select: none;
}

.all-prompt-tag-status {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 10px;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.all-prompt-tag-status-disabled {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
}
</style>