<template>
  <div class="tagpicker-overlay" @mousedown.self="$emit('close')">
    <div class="tagpicker-card">
      <div class="tagpicker-title">为「{{ name }}」选择标签</div>

      <div class="tagpicker-pills">
        <span
          v-for="tag in allTags"
          :key="tag"
          class="tagpicker-pill"
          :class="{ selected: selectedTags.has(tag) }"
          @click="toggleTag(tag)"
        >
          {{ tag }}
        </span>
      </div>

      <div class="tagpicker-new">
        <input
          v-model="newTag"
          type="text"
          placeholder="添加新标签..."
          class="tagpicker-input"
          @keydown.enter="addNewTag"
        />
        <button class="tagpicker-add-btn" @click="addNewTag" :disabled="!newTag.trim()">+</button>
      </div>

      <div class="tagpicker-actions">
        <button class="tagpicker-btn-cancel" @click="$emit('close')">取消</button>
        <button class="tagpicker-btn-confirm" @click="save">确定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'

const props = defineProps({
  name: { type: String, default: '' },
  currentTags: { type: Array, default: () => [] },
  allTags: { type: Array, default: () => [] },
})

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

const selectedTags = reactive(new Set(props.currentTags))
const newTag = ref('')

function toggleTag(tag) {
  if (selectedTags.has(tag)) {
    selectedTags.delete(tag)
  } else {
    selectedTags.add(tag)
  }
}

function addNewTag() {
  const tag = newTag.value.trim()
  if (!tag) return
  if (!selectedTags.has(tag)) {
    selectedTags.add(tag)
  }
  newTag.value = ''
}

function save() {
  emit('save', [...selectedTags])
}
</script>

<style scoped>
.tagpicker-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  z-index: 6000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tagpicker-card {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  width: 380px;
  max-width: 90vw;
  max-height: 70vh;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.tagpicker-title {
  font-size: 16px;
  font-weight: 600;
  color: #3e3a44;
  margin-bottom: 16px;
}

.tagpicker-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  min-height: 32px;
}

.tagpicker-pill {
  font-size: 13px;
  padding: 5px 14px;
  border-radius: 14px;
  background: #f0ece4;
  color: #8a7e6b;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  user-select: none;
}

.tagpicker-pill.selected {
  background: #4a9d7e;
  color: #fff;
}

.tagpicker-pill:hover {
  opacity: 0.85;
}

.tagpicker-new {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}

.tagpicker-input {
  flex: 1;
  padding: 9px 12px;
  border: 1.5px solid #d4cfc7;
  border-radius: 10px;
  font-size: 13px;
  outline: none;
  font-family: inherit;
  box-sizing: border-box;
}

.tagpicker-input:focus {
  border-color: #4a9d7e;
}

.tagpicker-add-btn {
  width: 36px;
  height: 36px;
  border: 1.5px solid #d4cfc7;
  border-radius: 10px;
  background: #fff;
  font-size: 18px;
  color: #4a9d7e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tagpicker-add-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tagpicker-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.tagpicker-btn-cancel {
  background: #fff;
  color: #6b6375;
  border: 1.5px solid #d4cfc7;
  border-radius: 10px;
  padding: 9px 24px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
}

.tagpicker-btn-cancel:hover {
  background: #f8f7f5;
}

.tagpicker-btn-confirm {
  background: linear-gradient(135deg, #7ec6a4 0%, #4a9d7e 100%);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 24px;
  font-size: 14px;
  cursor: pointer;
  font-family: inherit;
  font-weight: 500;
}

.tagpicker-btn-confirm:hover {
  opacity: 0.9;
}
</style>
