<template>
  <el-dropdown trigger="hover" @command="handleHistorySelect">
    <el-button 
      :class="['history-btn', { 'icon-only': iconOnly }]" 
      :icon="Clock" 
      text 
      bg
    >
      <span v-if="!iconOnly">历史会话</span>
    </el-button>
    <template #dropdown>
      <el-dropdown-menu>
        <template v-if="currentModeHistory.length">
          <el-dropdown-item 
            v-for="chat in currentModeHistory" 
            :key="chat.conversationId"
            :command="chat.conversationId"
            class="history-item"
          >
            <div class="history-content">
              <span class="history-title">{{ formatChatTitle(chat) }}</span>
              <el-button
                class="delete-btn"
                :icon="Delete"
                link
                @click.stop="handleDelete(chat.conversationId)"
              />
            </div>
          </el-dropdown-item>
        </template>
        <el-dropdown-item v-else disabled>暂无历史会话</el-dropdown-item>
      </el-dropdown-menu>
    </template>
  </el-dropdown>
</template>

<script setup>
import { computed } from 'vue'
import { useChatStore } from '@/store/chat'
import { Clock, Delete } from '@element-plus/icons-vue'
import { ElMessageBox } from 'element-plus'

const props = defineProps({
  iconOnly: {
    type: Boolean,
    default: false
  }
})

const chatStore = useChatStore()

const currentModeHistory = computed(() => {
  return chatStore.conversations.filter(chat => chat.mode === chatStore.currentMode)
})

const formatChatTitle = (chat) => {
  if (chat.messages && chat.messages.length > 0) {
    const firstMessage = chat.messages[0].question
    return firstMessage.length > 20 ? firstMessage.substring(0, 20) + '...' : firstMessage
  }
  return `会话 ${chat.conversationId.substring(0, 8)}`
}

const handleHistorySelect = (conversationId) => {
  chatStore.switchConversation(conversationId)
}

const handleDelete = async (conversationId) => {
  try {
    await ElMessageBox.confirm(
      '确定要删除这个会话吗？删除后无法恢复。',
      '删除确认',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        confirmButtonClass: 'el-button--danger'
      }
    )
    chatStore.deleteConversation(conversationId)
  } catch {
    // 用户取消删除
  }
}
</script>

<style lang="scss" scoped>
.history-btn {
  height: 32px;
  padding: 4px 12px;
  color: inherit;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: transparent !important;
  
  &.icon-only {
    width: 32px;
    padding: 0;
  }

  &:hover {
    color: #07c160 !important;
    background: transparent !important;
  }

  &:focus {
    outline: none;
    box-shadow: none;
  }

  :deep(.el-icon) {
    font-size: 16px;
  }
}

:deep(.el-dropdown-menu__item) {
  font-size: 13px;
  padding: 8px 16px;
  line-height: 1.4;
  max-width: 300px;
  overflow-x: hidden;

  &:hover .delete-btn {
    opacity: 1;
    transform: translateX(0);
  }
}

:deep(.el-dropdown-menu) {
  min-width: 200px;
  max-width: 300px;
}

.history-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  position: relative;
  min-width: 0;
}

.history-title {
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-right: 24px;
  min-width: 0;
}

.delete-btn {
  position: absolute;
  right: -8px;
  opacity: 0;
  transform: translateX(10px);
  transition: all 0.3s ease;
  height: 24px;
  width: 24px;
  padding: 0;
  color: #f56c6c;
  flex-shrink: 0;
  
  &:hover {
    color: #f56c6c;
    background-color: rgba(245, 108, 108, 0.1);
  }
  
  :deep(.el-icon) {
    font-size: 14px;
  }
}
</style> 