<template>
  <div class="chat-history-panel">
    <!-- 面板头部 -->
    <div class="panel-header">
      <h3 class="panel-title">{{ t("chatHistoryPanel.title") }}</h3>
      <div class="panel-close" @click="$emit('close')">
        <i class="fas fa-times"></i>
      </div>
    </div>

    <!-- 选项卡 -->
    <div class="panel-tabs">
      <div class="tabs-left">
        <div
          class="tab-item"
          :class="{ active: currentTab === 'all' }"
          @click="switchTab('all')"
        >
          {{ t("chatHistoryPanel.tabs.all") }}
        </div>
        <div
          class="tab-item"
          :class="{ active: currentTab === 'quick' }"
          @click="switchTab('quick')"
        >
          {{ t("chatHistoryPanel.tabs.quick") }}
        </div>
        <div
          class="tab-item"
          :class="{ active: currentTab === 'deep' }"
          @click="switchTab('deep')"
        >
          {{ t("chatHistoryPanel.tabs.deep") }}
        </div>
      </div>
      <div class="tabs-right">
        <div class="search-container">
          <i class="fas fa-search search-icon"></i>
          <input
            v-model="searchKeyword"
            type="text"
            class="search-input"
            :placeholder="t('chatHistoryPanel.searchPlaceholder')"
            @input="handleSearch"
          />
          <i
            v-if="searchKeyword"
            class="fas fa-times clear-icon"
            @click="clearSearch"
          ></i>
        </div>
      </div>
    </div>

    <!-- 对话列表 -->
    <div class="panel-content">
      <div v-if="loading" class="loading-state">
        <i class="fas fa-spinner fa-spin"></i>
        <span>{{ t("chatHistoryPanel.loading") }}</span>
      </div>

      <div v-else-if="filteredChats.length === 0" class="empty-state">
        <i class="fas fa-comments"></i>
        <span>{{ t("chatHistoryPanel.empty") }}</span>
      </div>

      <div v-else class="chat-list">
        <div
          v-for="group in groupedChats"
          :key="group.period"
          class="chat-group"
        >
          <div class="group-header">{{ group.period }}</div>
          <div class="group-chats">
            <div
              v-for="chat in group.chats"
              :key="chat.id"
              class="chat-item"
              @click="handleChatClick(chat)"
            >
              <!-- 深度检索任务统一使用 jiansuo.svg 图标 -->
              <div v-if="chat.type === 'deep'" class="chat-icon">
                <img src="/jiansuo.svg" class="status-icon" alt="deep search" />
              </div>
              <!-- 其他任务显示类型图标 -->
              <div v-else class="chat-icon">
                <i class="fas fa-comment-dots"></i>
              </div>
              <div class="chat-content">
                <div class="chat-title">
                  {{
                    chat.type === "deep" && chat.question
                      ? chat.question
                      : chat.title
                  }}
                </div>
                <div class="chat-meta">
                  <span class="chat-type-tag" :class="getChatTypeClass(chat)">
                    {{ getChatTypeLabel(chat) }}
                  </span>
                  <span class="chat-date">{{
                    formatRelativeDate(chat.createdAt)
                  }}</span>
                </div>
              </div>
              <div class="chat-actions">
                <img
                  src="/shanchu1.svg"
                  class="delete-icon"
                  @click.stop="handleDelete(chat.id)"
                  :title="t('chatHistoryPanel.deleteTooltip')"
                  alt="delete"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 全部 tab 分页选择器（不显示 total） -->
      <div
        v-if="currentTab === 'all' && !loading && filteredChats.length > 0"
        class="pagination-container"
      >
        <el-pagination
          v-model:current-page="allCurrentPage"
          v-model:page-size="allPageSize"
          :page-sizes="[50, 100, 150, 200, 250, 300, 350]"
          :size="'small'"
          :background="true"
          layout="sizes, prev, pager, next, jumper"
          :total="
            allHasMore
              ? allCurrentPage * allPageSize + 1
              : allCurrentPage * allPageSize
          "
          @size-change="handleAllSizeChange"
          @current-change="handleAllCurrentChange"
        />
      </div>

      <!-- 快问快答分页选择器（不显示 total） -->
      <div
        v-if="currentTab === 'quick' && !loading && filteredChats.length > 0"
        class="pagination-container"
      >
        <el-pagination
          v-model:current-page="quickCurrentPage"
          v-model:page-size="quickPageSize"
          :page-sizes="[50, 100, 150, 200, 250, 300, 350]"
          :size="'small'"
          :background="true"
          layout="sizes, prev, pager, next, jumper"
          :total="
            quickHasMore
              ? quickCurrentPage * quickPageSize + 1
              : quickCurrentPage * quickPageSize
          "
          @size-change="handleQuickSizeChange"
          @current-change="handleQuickCurrentChange"
        />
      </div>
      <!-- 深度检索分页选择器 -->
      <div
        v-if="currentTab === 'deep' && !loading && filteredChats.length > 0"
        class="pagination-container"
      >
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[50, 100, 150, 200, 250, 300, 350]"
          :size="'small'"
          :background="true"
          layout="sizes, prev, pager, next, jumper"
          :total="totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElPagination } from "element-plus";
import { useI18n } from "vue-i18n";
import { listChats, deleteChat } from "@/api/chat";
import { getScheduleList, deleteSchedule } from "@/api/schedules";

const { t } = useI18n();

// 历史对话接口
interface ChatSession {
  id: number;
  title: string;
  createdAt: string;
  deleted: boolean;
  type?: "quick" | "deep"; // 对话类型，quick: 快问快答，deep: 深度检索
  provider?: string; // 提供商：doubao/baichuan/deerflow
  question?: string; // 深度检索的问题
  data?: any; // 深度检索的数据
  statusIcon?: string | null; // 任务状态图标路径
  isFinished?: boolean | null; // 任务完成状态
  hasData?: boolean; // 深度检索任务是否有数据
  threadId?: string; // 深度检索任务的线程ID
}

// 定义事件
const emit = defineEmits<{
  close: [];
  chatSelect: [chat: ChatSession];
  deleted: [chatId: number];
}>();

// 数据
const currentTab = ref<"all" | "quick" | "deep">("all");
const chatList = ref<ChatSession[]>([]);
const loading = ref(false);
const searchKeyword = ref("");

// 分页相关数据
// 全部 tab 分页
const allCurrentPage = ref(1);
const allPageSize = ref(50);
const allHasMore = ref(true); // 是否还有更多数据

// 深度检索分页
const currentPage = ref(1);
const pageSize = ref(50);
const totalCount = ref(0);

// 快问快答分页
const quickCurrentPage = ref(1);
const quickPageSize = ref(50);
const quickHasMore = ref(true); // 是否还有更多数据

// 过滤后的对话列表
const filteredChats = computed(() => {
  let chats = chatList.value;

  // 按类型过滤
  if (currentTab.value === "quick") {
    chats = chats.filter((chat) => chat.type === "quick" || !chat.type);
  } else if (currentTab.value === "deep") {
    chats = chats.filter((chat) => chat.type === "deep");
  }

  // 按搜索关键词过滤
  if (searchKeyword.value.trim()) {
    const keyword = searchKeyword.value.trim().toLowerCase();
    chats = chats.filter((chat) => {
      const title = chat.title?.toLowerCase() || "";
      const question = chat.question?.toLowerCase() || "";
      return title.includes(keyword) || question.includes(keyword);
    });
  }

  return chats;
});

// 按时间分组的对话列表
const groupedChats = computed(() => {
  const groups: { period: string; chats: ChatSession[] }[] = [];
  const today = new Date();
  const yesterday = new Date(today);
  yesterday.setDate(yesterday.getDate() - 1);
  const weekAgo = new Date(today);
  weekAgo.setDate(weekAgo.getDate() - 7);

  const todayChats: ChatSession[] = [];
  const yesterdayChats: ChatSession[] = [];
  const weekChats: ChatSession[] = [];
  const olderChats: ChatSession[] = [];

  filteredChats.value.forEach((chat) => {
    const chatDate = new Date(chat.createdAt);

    if (isSameDay(chatDate, today)) {
      todayChats.push(chat);
    } else if (isSameDay(chatDate, yesterday)) {
      yesterdayChats.push(chat);
    } else if (chatDate >= weekAgo) {
      weekChats.push(chat);
    } else {
      olderChats.push(chat);
    }
  });

  if (todayChats.length > 0) {
    groups.push({
      period: t("chatHistoryPanel.periods.today"),
      chats: todayChats,
    });
  }
  if (yesterdayChats.length > 0) {
    groups.push({
      period: t("chatHistoryPanel.periods.yesterday"),
      chats: yesterdayChats,
    });
  }
  if (weekChats.length > 0) {
    groups.push({
      period: t("chatHistoryPanel.periods.last7Days"),
      chats: weekChats,
    });
  }
  if (olderChats.length > 0) {
    groups.push({
      period: t("chatHistoryPanel.periods.older"),
      chats: olderChats,
    });
  }

  return groups;
});

// 判断是否为同一天
const isSameDay = (date1: Date, date2: Date): boolean => {
  return (
    date1.getFullYear() === date2.getFullYear() &&
    date1.getMonth() === date2.getMonth() &&
    date1.getDate() === date2.getDate()
  );
};

// 切换选项卡
const switchTab = (tab: "all" | "quick" | "deep") => {
  currentTab.value = tab;
  // 切换 tab 时重置分页并重新加载数据
  if (tab === "all") {
    allCurrentPage.value = 1;
    allPageSize.value = 50;
    allHasMore.value = true; // 重置是否有更多数据的标志
  } else if (tab === "deep") {
    currentPage.value = 1;
    pageSize.value = 50;
  } else if (tab === "quick") {
    quickCurrentPage.value = 1;
    quickPageSize.value = 50;
    quickHasMore.value = true; // 重置是否有更多数据的标志
  }
  loadChats();
};

// 处理搜索
const handleSearch = () => {
  console.log("搜索关键词:", searchKeyword.value);
};

// 清除搜索
const clearSearch = () => {
  searchKeyword.value = "";
  console.log("清除搜索");
};

// 加载历史对话 - 根据当前 tab 加载对应的历史记录
const loadChats = async () => {
  try {
    loading.value = true;

    let baichuanChats: ChatSession[] = [];
    let deepSearchChats: ChatSession[] = [];

    // 根据当前 tab 决定加载哪些数据
    if (currentTab.value === "all") {
      // 全部：加载百川和深度检索（使用分页参数）
      const [baichuanResponse, scheduleResponse] = await Promise.all([
        // 获取百川的历史对话（传递 provider=baichuan）
        listChats({
          page: allCurrentPage.value - 1, // listChats 接口 page 从 0 开始
          size: allPageSize.value,
          provider: "baichuan",
        }),
        // 获取定时任务列表（深度检索任务）
        getScheduleList({
          page: allCurrentPage.value,
          size: allPageSize.value,
        }),
      ]);

      // 处理百川的对话记录
      const baichuanData = baichuanResponse.data || [];
      baichuanChats = baichuanData
        .filter((chat: ChatSession) => !chat.deleted)
        .map((chat: ChatSession) => ({
          ...chat,
          provider: "baichuan",
          type: "quick" as const,
        }));

      // 处理定时任务列表（深度检索任务）
      const scheduleData = scheduleResponse?.data || {};
      const scheduleItems = scheduleData.items || [];

      // 过滤并处理定时任务数据
      const filteredItems = scheduleItems.filter(
        (item: any) => item && item.id !== undefined && !item.deleted,
      );

      // 将定时任务转换为深度检索对话格式
      deepSearchChats = filteredItems.map((item: any) => {
        // 解析 paramsJson 获取参数
        let paramsData = null;
        try {
          if (item.paramsJson) {
            paramsData = JSON.parse(item.paramsJson);
          }
        } catch (error) {
          console.warn(`解析任务 ${item.id} 参数失败:`, error);
        }

        return {
          id: item.id,
          title:
            item.title ||
            item.question ||
            t("chatHistoryPanel.defaultDeepSearchTitle"),
          createdAt: item.createdAt || item.updatedAt,
          deleted: item.deleted || false,
          provider: "deerflow",
          type: "deep" as const,
          question: item.question,
          data: paramsData,
          statusIcon: "/jiansuo.svg",
          isFinished: item.enabled,
          hasData: undefined, // 定时任务没有 hasData 字段
          threadId: undefined, // 定时任务没有 threadId 字段
        };
      });

      // 根据返回的数据长度判断是否还有更多数据
      // 如果任一数据源返回的数据长度等于 pageSize，说明可能还有更多数据
      const baichuanHasMore = baichuanData.length >= allPageSize.value;
      const deepSearchHasMore = filteredItems.length >= allPageSize.value;
      allHasMore.value = baichuanHasMore || deepSearchHasMore;
    } else if (currentTab.value === "quick") {
      // 快问快答：只加载百川（使用分页参数）
      const baichuanResponse = await listChats({
        page: quickCurrentPage.value - 1, // listChats 接口 page 从 0 开始
        size: quickPageSize.value,
        provider: "baichuan",
      });

      const responseData = baichuanResponse.data || [];
      baichuanChats = responseData
        .filter((chat: ChatSession) => !chat.deleted)
        .map((chat: ChatSession) => ({
          ...chat,
          provider: "baichuan",
          type: "quick" as const,
        }));

      // 根据返回的数据长度判断是否还有更多数据
      // 如果返回的数据长度等于 pageSize，说明可能还有更多数据
      quickHasMore.value = responseData.length >= quickPageSize.value;
    } else if (currentTab.value === "deep") {
      // 深度检索：只加载定时任务列表（使用分页参数）
      const scheduleResponse = await getScheduleList({
        page: currentPage.value,
        size: pageSize.value,
      });

      const scheduleData = scheduleResponse?.data || {};
      const scheduleItems = scheduleData.items || [];

      // 保存总数用于分页
      totalCount.value = scheduleData.total || 0;

      // 过滤并处理定时任务数据
      const filteredItems = scheduleItems.filter(
        (item: any) => item && item.id !== undefined && !item.deleted,
      );

      // 将定时任务转换为深度检索对话格式
      deepSearchChats = filteredItems.map((item: any) => {
        // 解析 paramsJson 获取参数
        let paramsData = null;
        try {
          if (item.paramsJson) {
            paramsData = JSON.parse(item.paramsJson);
          }
        } catch (error) {
          console.warn(`解析任务 ${item.id} 参数失败:`, error);
        }

        return {
          id: item.id,
          title:
            item.title ||
            item.question ||
            t("chatHistoryPanel.defaultDeepSearchTitle"),
          createdAt: item.createdAt || item.updatedAt,
          deleted: item.deleted || false,
          provider: "deerflow",
          type: "deep" as const,
          question: item.question,
          data: paramsData,
          statusIcon: "/jiansuo.svg",
          isFinished: item.enabled,
          hasData: undefined, // 定时任务没有 hasData 字段
          threadId: undefined, // 定时任务没有 threadId 字段
        };
      });
    }

    // 合并列表并按时间降序排序（最新的在前）
    const allChats = [...baichuanChats, ...deepSearchChats];
    allChats.sort((a, b) => {
      const timeA = new Date(a.createdAt).getTime();
      const timeB = new Date(b.createdAt).getTime();
      return timeB - timeA; // 降序排序
    });

    chatList.value = allChats;
  } catch (error) {
    ElMessage.error("加载历史对话失败");
    chatList.value = [];
  } finally {
    loading.value = false;
  }
};

// 格式化相对时间
const formatRelativeDate = (dateString: string): string => {
  if (!dateString) return "";

  try {
    const date = new Date(dateString);
    if (isNaN(date.getTime())) {
      return dateString;
    }

    const now = new Date();
    const diffTime = Math.abs(now.getTime() - date.getTime());
    const diffDays = Math.ceil(diffTime / (1000 * 60 * 60 * 24));

    if (diffDays === 1) {
      return t("chatHistoryPanel.dateFormat.today");
    } else if (diffDays === 2) {
      return t("chatHistoryPanel.dateFormat.yesterday");
    } else if (diffDays <= 7) {
      return t("chatHistoryPanel.dateFormat.daysAgo", { days: diffDays - 1 });
    } else {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0");
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}/${month}/${day}`;
    }
  } catch (error) {
    console.error("Error formatting relative date:", error);
    return dateString;
  }
};
// 获取对话类型标签
const getChatTypeLabel = (chat: ChatSession): string => {
  if (chat.type === "deep") {
    return t("chatHistoryPanel.chatTypes.deep");
  }
  return t("chatHistoryPanel.chatTypes.quick");
};

// 获取对话类型样式类
const getChatTypeClass = (chat: ChatSession): string => {
  if (chat.type === "deep") {
    return "type-deep";
  }
  return "type-quick";
};

// 处理对话点击
const handleChatClick = (chat: ChatSession) => {
  console.log("点击对话:", chat);
  emit("chatSelect", chat);
};

// 删除对话
const handleDelete = async (chatId: number) => {
  try {
    // 查找对话记录，判断是否为深度检索任务
    const chat = chatList.value.find((c) => c.id === chatId);

    if (!chat) {
      ElMessage.error("未找到该对话记录");
      return;
    }

    let response: any;

    // 根据对话类型调用不同的删除接口
    if (chat.type === "deep") {
      // 深度检索任务（定时任务），调用 DELETE /agent/deep-search-schedules/{id}
      response = await deleteSchedule(chatId);
    } else {
      // 普通对话（豆包或百川），调用原有的删除接口
      response = await deleteChat(chatId);
    }

    if (response.code === 200 || response.status === 200) {
      chatList.value = chatList.value.filter((c) => c.id !== chatId);
      ElMessage.success(
        chat.type === "deep"
          ? t("chatHistoryPanel.messages.deleteDeepSearchSuccess")
          : t("chatHistoryPanel.messages.deleteChatSuccess"),
      );

      // ⭐ 通知父组件删除成功，需要更新左侧边栏列表
      emit("deleted", chatId);
    } else {
      ElMessage.error(response.message || "删除失败");
    }
  } catch (error) {
    console.error("删除历史对话失败:", error);
    ElMessage.error("删除失败");
  }
};

// 全部 tab 分页大小改变处理
const handleAllSizeChange = (newSize: number) => {
  allPageSize.value = newSize;
  allCurrentPage.value = 1; // 重置到第一页
  loadChats();
};

// 全部 tab 当前页改变处理
const handleAllCurrentChange = (newPage: number) => {
  allCurrentPage.value = newPage;
  loadChats();
};

// 深度检索分页大小改变处理
const handleSizeChange = (newSize: number) => {
  pageSize.value = newSize;
  currentPage.value = 1; // 重置到第一页
  loadChats();
};

// 深度检索当前页改变处理
const handleCurrentChange = (newPage: number) => {
  currentPage.value = newPage;
  loadChats();
};

// 快问快答分页大小改变处理
const handleQuickSizeChange = (newSize: number) => {
  quickPageSize.value = newSize;
  quickCurrentPage.value = 1; // 重置到第一页
  loadChats();
};

// 快问快答当前页改变处理
const handleQuickCurrentChange = (newPage: number) => {
  quickCurrentPage.value = newPage;
  loadChats();
};

// 组件挂载时加载数据
onMounted(() => {
  loadChats();
});
</script>

<style lang="scss" scoped>
.chat-history-panel {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-bg, #fff);
  animation: fadeIn 0.3s ease-out;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.panel-header {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0px;

  .panel-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text, #333);
    margin: 0;
  }

  .panel-close {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    color: var(--color-text-secondary, #666);

    &:hover {
      background: var(--color-hover, rgba(0, 0, 0, 0.05));
      color: var(--color-text, #333);
    }

    i {
      font-size: 18px;
    }
  }
}

.panel-tabs {
  width: 90%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0px;
  gap: 12px;

  .tabs-left {
    display: flex;
    gap: 12px;
  }

  .tabs-right {
    display: flex;
    align-items: center;
  }

  .tab-item {
    padding: 8px 20px;
    font-size: 14px;
    color: var(--color-text-secondary, #666);
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.2s;
    white-space: nowrap;
    user-select: none;

    &:hover {
      background: var(--color-hover, rgba(0, 0, 0, 0.05));
      color: var(--color-text, #333);
    }

    &.active {
      background: #1890ff;
      color: #fff;
      font-weight: 500;
    }
  }

  .search-container {
    position: relative;
    display: flex;
    align-items: center;
    width: 200px;
    height: 32px;
    background: var(--color-bg, #f5f5f5);
    border: 1px solid var(--color-border, #e0e0e0);
    border-radius: 4px;
    padding: 0 12px;
    transition: all 0.2s;

    &:hover {
      border-color: rgba(24, 144, 255, 0.3);
    }

    &:focus-within {
      border-color: #1890ff;
      box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.1);
    }

    .search-icon {
      font-size: 12px;
      color: var(--color-text-secondary, #999);
      margin-right: 8px;
      flex-shrink: 0;
    }

    .search-input {
      flex: 1;
      border: none;
      outline: none;
      background: transparent;
      font-size: 12px;
      color: var(--color-text, #333);
      line-height: 1;

      &::placeholder {
        color: var(--color-text-secondary, #999);
        font-size: 12px;
      }
    }

    .clear-icon {
      font-size: 12px;
      color: var(--color-text-secondary, #999);
      cursor: pointer;
      margin-left: 8px;
      flex-shrink: 0;
      transition: color 0.2s;

      &:hover {
        color: var(--color-text, #333);
      }
    }
  }
}

.panel-content {
  width: 90%;
  margin: 0 auto;
  flex: 1;
  overflow-y: auto;
  padding: 10px 0px;
  scrollbar-width: thin;
  scrollbar-color: var(--color-border, #ddd) transparent;
  display: flex;
  flex-direction: column;
  justify-content: space-between;

  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: transparent;
  }

  &::-webkit-scrollbar-thumb {
    background: var(--color-border, #ddd);
    border-radius: 4px;

    &:hover {
      background: var(--color-text-secondary, #999);
    }
  }
}

.loading-state,
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 12px;
  color: var(--color-text-secondary, #999);

  i {
    font-size: 32px;
  }

  span {
    font-size: 14px;
  }
}

.chat-list {
  display: flex;
  flex-direction: column;
}

.pagination-container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;

  // 处理下拉菜单的背景色
  :deep(.el-select-dropdown) {
    background-color: var(--color-bg, #fff);
    border-color: var(--color-border, #e0e0e0);

    .el-select-dropdown__item {
      background-color: var(--color-bg, #fff);
      color: var(--color-text, #333);

      &:hover {
        background-color: var(--color-hover, rgba(0, 0, 0, 0.05));
        color: var(--color-text, #333);
      }

      &.selected {
        background-color: rgba(24, 144, 255, 0.1);
        color: #1890ff;
      }
    }
  }

  :deep(.el-pagination) {
    .btn-prev,
    .btn-next,
    .el-pager li {
      background-color: var(--color-bg, #fff);
      color: var(--color-text, #333);
      border: 1px solid var(--color-border, #e0e0e0);

      &:hover {
        background-color: var(--color-hover, rgba(0, 0, 0, 0.05));
        color: var(--color-text, #333);
      }

      &.is-active {
        background-color: #1890ff;
        color: #fff;
        border-color: #1890ff;
      }
    }

    .el-pagination__sizes {
      .el-select {
        .el-select__wrapper {
          background-color: transparent;
          box-shadow: 0 0 0 1px var(--color-border, #e0e0e0) inset;

          &:hover {
            box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.3) inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px #1890ff inset;
          }
        }

        .el-input__wrapper {
          background-color: var(--color-bg, #fff);
          box-shadow: 0 0 0 1px var(--color-border, #e0e0e0) inset;

          .el-input__inner {
            background-color: transparent;
            color: var(--color-text, #333);
          }

          &:hover {
            box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.3) inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px #1890ff inset;
          }
        }

        .el-input__inner {
          background-color: var(--color-bg, #fff);
          color: var(--color-text, #333);
          border-color: var(--color-border, #e0e0e0);
        }
      }
    }

    .el-pagination__jump {
      color: var(--color-text-secondary, #666);

      .el-input {
        .el-input__wrapper {
          background-color: var(--color-bg, #fff);
          box-shadow: 0 0 0 1px var(--color-border, #e0e0e0) inset;

          .el-input__inner {
            background-color: transparent;
            color: var(--color-text, #333);
          }

          &:hover {
            box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.3) inset;
          }

          &.is-focus {
            box-shadow: 0 0 0 1px #1890ff inset;
          }
        }
      }

      .el-input__inner {
        background-color: var(--color-bg, #fff);
        color: var(--color-text, #333);
        border-color: var(--color-border, #e0e0e0);
      }
    }
  }
}

.chat-group {
  .group-header {
    font-size: 12px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.5);
    margin-bottom: 12px;
    padding: 0 4px;
  }

  .group-chats {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
}

.chat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;

  &:hover {
    background: var(--color-hover, rgba(0, 0, 0, 0.05));

    .delete-icon {
      opacity: 1;
    }
  }

  .chat-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-secondary, #666);
    flex-shrink: 0;
    transition: color 0.2s;

    i {
      font-size: 16px;

      &.fa-search {
        color: #722ed1; // 深度检索使用紫色
      }

      &.fa-comment-dots {
        color: #1890ff; // 快问快答使用蓝色
      }
    }

    .status-icon {
      width: 16px;
      height: 16px;
      object-fit: contain;
      opacity: 0.9;

      &:hover {
        opacity: 1;
      }
    }
  }

  &:hover .chat-icon {
    i.fa-search {
      color: #9254de;
    }

    i.fa-comment-dots {
      color: #40a9ff;
    }
  }

  .chat-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }

  .chat-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text, #333);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2; // 最多显示2行
    -webkit-box-orient: vertical;
    white-space: normal; // 允许换行
    word-break: break-word; // 长单词换行
  }

  .chat-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
  }

  .chat-type-tag {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 11px;
    font-weight: 500;

    &.type-quick {
      background: rgba(24, 144, 255, 0.1);
      color: #1890ff;
    }

    &.type-deep {
      background: rgba(114, 46, 209, 0.1);
      color: #722ed1;
    }
  }

  .chat-date {
    color: var(--color-text-secondary, #999);
  }

  .chat-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
  }

  .delete-icon {
    width: 16px;
    height: 16px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s;
    filter: brightness(0) saturate(100%) invert(50%);

    &:hover {
      filter: brightness(0) saturate(100%) invert(30%);
      transform: scale(1.1);
    }
  }
}

/* 深色主题适配 */
:root.theme-dark {
  .chat-history-panel {
    background: var(--color-bg, #1a1a1a);
  }

  .panel-header {
    .panel-title {
      color: var(--color-text, #ccc);
    }

    .panel-close {
      color: var(--color-text-secondary, #888);

      &:hover {
        background: var(--color-hover, rgba(255, 255, 255, 0.1));
        color: var(--color-text, #ccc);
      }
    }
  }

  .panel-tabs {
    .tab-item {
      color: var(--color-text-secondary, #888);

      &:hover {
        background: var(--color-hover, rgba(255, 255, 255, 0.05));
        color: var(--color-text, #ccc);
      }

      &.active {
        background: #1890ff;
        color: #fff;
      }
    }

    .search-container {
      background: var(--color-bg, #262626);
      border-color: var(--color-border, #444);

      &:hover {
        border-color: rgba(24, 144, 255, 0.5);
      }

      &:focus-within {
        border-color: #1890ff;
        box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.15);
      }

      .search-icon {
        color: var(--color-text-secondary, #666);
      }

      .search-input {
        color: var(--color-text, #ccc);

        &::placeholder {
          color: var(--color-text-secondary, #666);
        }
      }

      .clear-icon {
        color: var(--color-text-secondary, #666);

        &:hover {
          color: var(--color-text, #ccc);
        }
      }
    }
  }

  .loading-state,
  .empty-state {
    color: var(--color-text-secondary, #666);
  }

  .chat-group {
    .group-header {
      color: var(--color-text, #ccc);
    }
  }

  .chat-item {
    &:hover {
      background: var(--color-hover, rgba(255, 255, 255, 0.05));
    }

    .chat-icon {
      color: var(--color-text-secondary, #888);

      i {
        color: var(--color-text-secondary, #888);

        &.fa-search {
          color: #b37feb; // 深度检索使用浅紫色（深色主题）
        }

        &.fa-comment-dots {
          color: #69c0ff; // 快问快答使用浅蓝色（深色主题）
        }
      }
    }

    &:hover .chat-icon {
      i.fa-search {
        color: #d3adf7;
      }

      i.fa-comment-dots {
        color: #91d5ff;
      }
    }

    .chat-title {
      color: var(--color-text, #ccc);
    }

    .chat-date {
      color: var(--color-text-secondary, #666);
    }

    .delete-icon {
      filter: brightness(0) saturate(100%) invert(70%);

      &:hover {
        filter: brightness(0) saturate(100%) invert(90%);
      }
    }
  }

  .pagination-container {
    // 处理下拉菜单的背景色（深色主题）
    :deep(.el-select-dropdown) {
      background-color: var(--color-bg, #262626);
      border-color: var(--color-border, #444);

      .el-select-dropdown__item {
        background-color: var(--color-bg, #262626);
        color: var(--color-text, #ccc);

        &:hover {
          background-color: var(--color-hover, rgba(255, 255, 255, 0.1));
          color: var(--color-text, #ccc);
        }

        &.selected {
          background-color: rgba(24, 144, 255, 0.2);
          color: #69c0ff;
        }
      }
    }

    :deep(.el-pagination) {
      .btn-prev,
      .btn-next,
      .el-pager li {
        background-color: var(--color-bg, #262626);
        color: var(--color-text, #ccc);
        border-color: var(--color-border, #444);

        &:hover {
          background-color: var(--color-hover, rgba(255, 255, 255, 0.1));
          color: var(--color-text, #ccc);
        }

        &.is-active {
          background-color: #1890ff;
          color: #fff;
          border-color: #1890ff;
        }
      }

      .el-pagination__sizes {
        .el-select {
          .el-select__wrapper {
            background-color: transparent;
            box-shadow: 0 0 0 1px var(--color-border, #444) inset;

            &:hover {
              box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.5) inset;
            }

            &.is-focus {
              box-shadow: 0 0 0 1px #1890ff inset;
            }
          }

          .el-input__wrapper {
            background-color: var(--color-bg, #262626);
            box-shadow: 0 0 0 1px var(--color-border, #444) inset;

            .el-input__inner {
              background-color: transparent;
              color: var(--color-text, #ccc);
            }

            &:hover {
              box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.5) inset;
            }

            &.is-focus {
              box-shadow: 0 0 0 1px #1890ff inset;
            }
          }

          .el-input__inner {
            background-color: var(--color-bg, #262626);
            color: var(--color-text, #ccc);
            border-color: var(--color-border, #444);
          }
        }
      }

      .el-pagination__jump {
        color: var(--color-text-secondary, #666);

        .el-input {
          .el-input__wrapper {
            background-color: var(--color-bg, #262626);
            box-shadow: 0 0 0 1px var(--color-border, #444) inset;

            .el-input__inner {
              background-color: transparent;
              color: var(--color-text, #ccc);
            }

            &:hover {
              box-shadow: 0 0 0 1px rgba(24, 144, 255, 0.5) inset;
            }

            &.is-focus {
              box-shadow: 0 0 0 1px #1890ff inset;
            }
          }
        }

        .el-input__inner {
          background-color: var(--color-bg, #262626);
          color: var(--color-text, #ccc);
          border-color: var(--color-border, #444);
        }
      }
    }
  }
}
</style>