<script setup>
import { ref, onMounted, watch } from 'vue';
import { Button, Popconfirm } from 'ant-design-vue';
import { PlusOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons-vue';
import { 
  getQuickReplyList, 
  createQuickReply, 
  updateQuickReply, 
  deleteQuickReply 
} from '../api/index';

const props = defineProps({
  doctorId: {
    type: String,
    default: '32',
  },
});

const emit = defineEmits(['select-reply']);

const quickReplies = ref([]);
const showAddModal = ref(false);
const editingItem = ref(null);
const newContent = ref('');

// 加载快速回复列表
const loadQuickReplies = async () => {
  try {
    const res = await getQuickReplyList({ doctor_id: props.doctorId });
    quickReplies.value = res || [];
  } catch (error) {
    console.error('加载快速回复失败:', error);
  }
};

// 选择快速回复
const handleSelectReply = (content) => {
  emit('select-reply', content);
};

// 添加快速回复
const handleAddReply = async () => {
  if (!newContent.value.trim()) {
    return;
  }

  try {
    await createQuickReply({
      doctor_id: props.doctorId,
      content: newContent.value.trim(),
      sort_order: quickReplies.value.length,
    });
    newContent.value = '';
    showAddModal.value = false;
    await loadQuickReplies();
  } catch (error) {
    console.error('添加快速回复失败:', error);
  }
};

// 编辑快速回复
const handleEditReply = async (item) => {
  editingItem.value = item;
  newContent.value = item.content;
  showAddModal.value = true;
};

// 更新快速回复
const handleUpdateReply = async () => {
  if (!newContent.value.trim() || !editingItem.value) {
    return;
  }

  try {
    await updateQuickReply({
      id: editingItem.value.id,
      doctor_id: props.doctorId,
      content: newContent.value.trim(),
    });
    newContent.value = '';
    editingItem.value = null;
    showAddModal.value = false;
    await loadQuickReplies();
  } catch (error) {
    console.error('更新快速回复失败:', error);
  }
};

// 删除快速回复
const handleDeleteReply = async (id) => {
  try {
    await deleteQuickReply({
      id,
      doctor_id: props.doctorId,
    });
    await loadQuickReplies();
  } catch (error) {
    console.error('删除快速回复失败:', error);
  }
};

// 取消编辑
const handleCancel = () => {
  newContent.value = '';
  editingItem.value = null;
  showAddModal.value = false;
};

onMounted(() => {
  loadQuickReplies();
});

watch(() => props.doctorId, () => {
  loadQuickReplies();
});
</script>

<template>
  <div class="quick-reply-bubbles bg-gray-100 dark:bg-gray-800 border-b border-gray-200 dark:border-gray-700">
    <div class="bubbles-container">
      <div
        v-for="item in quickReplies"
        :key="item.id"
        class="reply-bubble bg-white dark:bg-gray-700 border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 hover:bg-blue-50 dark:hover:bg-blue-900/20"
        @click="handleSelectReply(item.content)"
      >
        <span class="bubble-text">{{ item.content }}</span>
        <div class="bubble-actions" @click.stop>
          <Button
            v-if="item.doctor_id !== '0' && item.doctor_id !== 0"
            type="text"
            size="small"
            @click="handleEditReply(item)"
          >
            <template #icon><EditOutlined /></template>
          </Button>
          <Popconfirm
            v-if="item.doctor_id !== '0' && item.doctor_id !== 0"
            title="确定删除这条快速回复吗？"
            @confirm="handleDeleteReply(item.id)"
          >
            <Button
              type="text"
              size="small"
              danger
            >
              <template #icon><DeleteOutlined /></template>
            </Button>
          </Popconfirm>
        </div>
      </div>

      <div
        v-if="!showAddModal"
        class="add-bubble bg-white dark:bg-gray-700 border-dashed border-gray-300 dark:border-gray-600 hover:border-blue-500 dark:hover:border-blue-400 hover:text-blue-500 dark:hover:text-blue-400"
        @click="showAddModal = true"
      >
        <PlusOutlined />
        <span>添加常用语</span>
      </div>

      <div v-else class="add-modal bg-white dark:bg-gray-700 border-blue-500 dark:border-blue-400">
        <input
          v-model="newContent"
          type="text"
          placeholder="输入常用语"
          class="add-input bg-transparent placeholder-gray-400 dark:placeholder-gray-500"
          @keyup.enter="editingItem ? handleUpdateReply() : handleAddReply()"
          @keyup.esc="handleCancel"
        />
        <div class="add-actions">
          <Button size="small" @click="handleCancel">取消</Button>
          <Button
            type="primary"
            size="small"
            @click="editingItem ? handleUpdateReply() : handleAddReply()"
          >
            {{ editingItem ? '更新' : '添加' }}
          </Button>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.quick-reply-bubbles {
  padding: 8px 12px;
}

.bubbles-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.reply-bubble {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border: 1px solid;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.reply-bubble:hover .bubble-actions {
  display: flex;
}

.bubble-text {
  font-size: 13px;
}

.bubble-actions {
  display: none;
  margin-left: 8px;
  gap: 4px;
}

.add-bubble {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border: 1px dashed;
  border-radius: 16px;
  cursor: pointer;
  font-size: 13px;
  transition: all 0.3s;
}

.add-modal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px;
  border: 1px solid;
  border-radius: 16px;
}

.add-input {
  flex: 1;
  padding: 4px 8px;
  border: none;
  outline: none;
  font-size: 13px;
}

.add-actions {
  display: flex;
  gap: 4px;
}
</style>

