<template>
  <div
    ref="popupRef"
    class="comment-popup"
    :style="{
      left: currentPosition.x + 'px',
      top: currentPosition.y + 'px'
    }"
    @mousedown="handleMouseDown"
  >
    <div class="comment-popup-header" @mousedown.stop>
      <span class="comment-popup-title">添加批注</span>
      <button 
        v-if="onDeleteHighlight"
        @click="onDeleteHighlight" 
        class="comment-popup-delete-highlight"
      >
        删除高亮
      </button>
      <button 
        @click="onClose" 
        class="comment-popup-close"
      >
        ×
      </button>
    </div>
    
    <div v-if="highlightContent" class="comment-popup-preview">
      <div class="comment-popup-preview-label">选中文本：</div>
      <div class="comment-popup-preview-text">
        "{{ highlightContent }}"
      </div>
    </div>
    
    <div class="comment-popup-comments">
      <div v-if="comments.length > 0" class="comment-popup-comments-count">
        已有 {{ comments.length }} 条批注：
      </div>
      <div v-for="comment in comments" :key="comment.id" class="comment-item">
        <div class="comment-text">{{ comment.text }}</div>
        <div class="comment-meta">
          <span>{{ new Date(comment.createdAt).toLocaleString() }}</span>
          <button
            @click="onDeleteComment(comment.id)"
            class="comment-delete-btn"
          >
            删除
          </button>
        </div>
      </div>
    </div>

    <form @submit.prevent="handleSubmit" class="comment-form">
      <textarea
        v-model="newComment"
        placeholder="在此输入您的批注..."
        class="comment-input"
      />
      
      <div class="color-picker-section">
        <div class="color-picker-label">选择高亮颜色</div>
        <div class="color-picker-options">
          <button
            v-for="{ color, name } in colorOptions"
            :key="color"
            type="button"
            @click="highlightColor = color"
            :title="name"
            :class="['color-option', { active: highlightColor === color }]"
            :style="{ backgroundColor: color }"
          />
        </div>
      </div>
      
      <button 
        type="submit" 
        :disabled="!newComment.trim()" 
        class="submit-btn"
        :class="{ disabled: !newComment.trim() }"
      >
        添加批注
      </button>
    </form>
  </div>
</template>

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

const props = defineProps({
  comments: {
    type: Array,
    default: () => []
  },
  position: {
    type: Object,
    required: true
  },
  onAddComment: {
    type: Function,
    required: true
  },
  onDeleteComment: {
    type: Function,
    required: true
  },
  onClose: {
    type: Function,
    required: true
  },
  onDeleteHighlight: {
    type: Function,
    default: null
  },
  highlightContent: {
    type: String,
    default: ''
  }
})

const newComment = ref('')
const isDragging = ref(false)
const dragOffset = reactive({ x: 0, y: 0 })
const currentPosition = reactive({ ...props.position })
const highlightColor = ref('#ffeb3b')
const popupRef = ref(null)

const colorOptions = [
  { color: '#ffeb3b', name: '黄色' },
  { color: '#4caf50', name: '绿色' },
  { color: '#2196f3', name: '蓝色' },
  { color: '#ff9800', name: '橙色' },
  { color: '#f44336', name: '红色' },
  { color: '#9c27b0', name: '紫色' }
]

watch(() => props.position, (newPosition) => {
  currentPosition.x = newPosition.x
  currentPosition.y = newPosition.y
})

const handleMouseDown = (e) => {
  e.stopPropagation()
  
  if (e.target.closest('.comment-popup-header')) {
    isDragging.value = true
    dragOffset.x = e.clientX - currentPosition.x
    dragOffset.y = e.clientY - currentPosition.y
  }
}

const handleMouseMove = (e) => {
  e.stopPropagation()
  
  if (isDragging.value) {
    currentPosition.x = e.clientX - dragOffset.x
    currentPosition.y = e.clientY - dragOffset.y
  }
}

const handleMouseUp = (e) => {
  e.stopPropagation()
  isDragging.value = false
}

const handleClickOutside = (e) => {
  if (popupRef.value && !popupRef.value.contains(e.target)) {
    props.onClose()
  }
}

onMounted(() => {
  document.addEventListener('mousedown', handleClickOutside)
})

onUnmounted(() => {
  document.removeEventListener('mousedown', handleClickOutside)
  document.removeEventListener('mousemove', handleMouseMove)
  document.removeEventListener('mouseup', handleMouseUp)
})

watch(isDragging, (newValue) => {
  if (newValue) {
    document.addEventListener('mousemove', handleMouseMove)
    document.addEventListener('mouseup', handleMouseUp)
  } else {
    document.removeEventListener('mousemove', handleMouseMove)
    document.removeEventListener('mouseup', handleMouseUp)
  }
})

const handleSubmit = () => {
  if (newComment.value.trim()) {
    props.onAddComment(newComment.value.trim(), true, highlightColor.value)
    newComment.value = ''
  }
}
</script>

<style scoped>
@import './pdfReader.css';

.comment-popup {
  position: absolute;
  z-index: 1000;
  width: 280px;
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
}

.comment-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
  cursor: move;
}

.comment-popup-title {
  font-weight: var(--weight-semibold);
  font-size: var(--font-md);
  color: var(--text-primary);
}

.comment-popup-close {
  background: none;
  border: none;
  font-size: var(--font-xl);
  cursor: pointer;
  color: var(--text-tertiary);
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.comment-popup-close:hover {
  color: var(--text-primary);
}

.comment-popup-delete-highlight {
  background: none;
  border: none;
  color: var(--color-error);
  margin-right: var(--space-xs);
  cursor: pointer;
  font-size: var(--font-xs);
  padding: 2px var(--space-sm);
}

.comment-popup-delete-highlight:hover {
  background: var(--bg-error);
}

.comment-popup-preview {
  padding: var(--space-sm) var(--space-md);
  background: var(--bg-warning);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.comment-popup-preview-label {
  font-weight: var(--weight-medium);
  margin-bottom: var(--space-xs);
}

.comment-popup-preview-text {
  font-style: italic;
  line-height: 1.4;
  max-height: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.comment-popup-comments {
  max-height: 180px;
  overflow-y: auto;
  padding: var(--space-sm);
}

.comment-popup-comments-count {
  margin-bottom: var(--space-xs);
  font-size: var(--font-xs);
  color: var(--text-tertiary);
  font-weight: var(--weight-medium);
}

.comment-item {
  padding: var(--space-xs);
  margin-bottom: var(--space-xs);
  background: var(--bg-container);
  border-radius: var(--radius-sm);
}

.comment-text {
  margin-bottom: var(--space-xs);
  font-size: var(--font-sm);
  line-height: 1.4;
  color: var(--text-primary);
}

.comment-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--font-xs);
  color: var(--text-tertiary);
}

.comment-delete-btn {
  background: none;
  border: none;
  color: var(--color-error);
  cursor: pointer;
  font-size: var(--font-xs);
}

.comment-delete-btn:hover {
  text-decoration: underline;
}

.comment-form {
  display: flex;
  flex-direction: column;
  padding: var(--space-md);
  border-top: 1px solid var(--border-light);
  gap: var(--space-sm);
}

.comment-input {
  width: 100%;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  font-size: var(--font-sm);
  resize: none;
  min-height: 50px;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
  box-sizing: border-box;
}

.comment-input:focus {
  border-color: var(--color-primary);
}

.color-picker-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  background: var(--bg-warning);
  padding: var(--space-sm);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-warning);
}

.color-picker-label {
  font-size: var(--font-xs);
  color: var(--color-warning-dark);
  font-weight: var(--weight-medium);
}

.color-picker-options {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.color-option {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.2s;
}

.color-option.active {
  border-color: var(--text-primary);
  transform: scale(1.1);
}

.submit-btn {
  padding: var(--space-xs) var(--space-md);
  background-color: var(--color-primary);
  color: var(--text-inverse);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--font-sm);
  font-weight: var(--weight-medium);
  transition: background-color 0.2s;
  margin-top: var(--space-xs);
}

.submit-btn:hover:not(.disabled) {
  background-color: var(--color-primary-hover);
}

.submit-btn.disabled {
  background-color: var(--border-default);
  cursor: not-allowed;
}
</style>