<template>
  <div class="agent-header">
    <div class="header-left">
      <span class="title">{{ t("agentHeader.title") }}</span>

      <div class="header-actions">
        <button
          class="action-btn new-chat-btn"
          @click="handleNewChat"
          :title="t('agentPanel.header.newChat')"
        >
          <img src="/xinduihua.svg" alt="新建对话" class="icon-svg" />
        </button>
      </div>
    </div>
    <div class="header-right">
      <!-- 历史对话按钮移到右侧 -->
      <div class="history-dropdown" ref="historyDropdownRef">
        <button
          class="action-btn history-btn"
          @click="toggleHistoryDropdown"
          :title="t('agentPanel.header.history')"
        >
          <img src="/lishijilu.svg" alt="历史记录" class="icon-svg" />
        </button>
        <!-- 使用 Teleport 将遮罩层和菜单挂载到 body，避免 z-index 层级问题 -->
        <Teleport to="body">
          <!-- 遮罩层 -->
          <div
            v-show="showHistoryDropdown"
            class="history-overlay"
            @click="toggleHistoryDropdown"
          ></div>
          <div v-show="showHistoryDropdown" class="history-menu" @click.stop>
            <div class="history-header">
              <span>{{ t("agentHeader.historyDialog") }}</span>
              <el-icon
                class="clear-history-btn"
                @click.stop="toggleHistoryDropdown"
                :title="t('agentHeader.hideHistory')"
              >
                <Close />
              </el-icon>
            </div>
            <div class="history-list">
              <div
                v-for="chat in chatHistory"
                :key="chat.sessionId || chat.id"
                class="history-item"
                @click.stop="selectChat(chat)"
              >
                <div class="history-item-content">
                  <div class="history-title">{{ chat.title }}</div>
                  <div class="history-time">
                    {{ formatTime(chat.updatedAt || chat.createdAt) }}
                  </div>
                </div>
                <img
                  src="/shanchu1.svg"
                  class="delete-chat-btn"
                  @click.stop="deleteChat(chat.sessionId || chat.id)"
                  alt="delete"
                />
              </div>
              <div
                v-if="!chatHistory || chatHistory.length === 0"
                class="empty-history"
              >
                {{ t("agentHeader.noHistoryDialog") }}
              </div>
            </div>
          </div>
        </Teleport>
      </div>
    </div>
    <div style="margin-left: 5px">
      <button
        class="action-btn minimize-btn"
        @click="emit('minimize')"
        :title="t('agentPanel.header.minimize')"
      >
        <el-icon class="icon-svg" :size="16">
          <DArrowLeft v-if="side === 'left'" />
          <DArrowRight v-else />
        </el-icon>
      </button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted } from "vue";
import { useI18n } from "vue-i18n";
import { useWorkspaceChatStore } from "@/stores/chatApi";
import { useCodexStore } from "@/stores/codex";
import { ElMessage, ElMessageBox } from "element-plus";
import { DArrowRight, DArrowLeft, Close } from "@element-plus/icons-vue";

const { t } = useI18n();
const chatApiStore = useWorkspaceChatStore();
const codexStore = useCodexStore();

// 定义 emits
const emit = defineEmits<{
  (e: "new-chat"): void;
  (e: "minimize"): void;
}>();

// 定义 props
const props = defineProps<{
  side?: "left" | "right";
  mode?: "ask" | "agent";
}>();

// 响应式数据
const showHistoryDropdown = ref(false);
const historyDropdownRef = ref<HTMLElement | null>(null);

// 计算属性
const chatHistory = computed(() => 
  props.mode === "ask" ? (chatApiStore.sessions || []) : (codexStore.sessions || [])
);

// 方法
const handleNewChat = () => {
  emit("new-chat");
};

const toggleHistoryDropdown = () => {
  showHistoryDropdown.value = !showHistoryDropdown.value;
};

// 强制打开历史对话下拉菜单
const openHistoryDropdown = () => {
  showHistoryDropdown.value = true;
};

const handleClickOutside = (event: MouseEvent) => {
  if (
    historyDropdownRef.value &&
    !historyDropdownRef.value.contains(event.target as Node)
  ) {
    showHistoryDropdown.value = false;
  }
};

const selectChat = async (chat: any) => {
  showHistoryDropdown.value = false;
  if (props.mode === "ask") {
    await chatApiStore.selectSession({
      session: chat,
      fetchMessages: true,
    });
  } else {
    await codexStore.selectSession({
      sessionId: chat.id,
      fetchTurns: true,
    });
  }
};

const deleteChat = async (chatId: string | number) => {
  try {
    // 二次确认，避免误删历史会话
    await ElMessageBox.confirm(
      t("agentHeader.deleteChatConfirm") || "确定要删除这条历史记录吗？",
      t("agentHeader.tip") || "提示",
      {
        confirmButtonText: t("common.confirm") || "确定",
        cancelButtonText: t("common.cancel") || "取消",
        type: "warning",
      },
    );

    const result = props.mode === "ask" 
      ? await chatApiStore.deleteSession(String(chatId))
      : await codexStore.deleteSession(String(chatId));
      
    if (result.success) {
      ElMessage.success(t("agentHeader.sessionDeleteSuccess"));

      // 确保历史列表数据立即刷新（避免类型差异导致的本地列表不一致）
      if (props.mode === "ask") {
        await chatApiStore.fetchSessions();
      } else {
        await codexStore.fetchSessions({ page: 0, size: 50 });
      }

      if (chatHistory.value.length === 0) {
        showHistoryDropdown.value = false;
      }
    } else {
      ElMessage.error(
        t("agentHeader.sessionDeleteFailed") + ": " + result.error,
      );
    }
  } catch (error: any) {
    if (error === "cancel") return;
    console.error("删除会话失败:", error);
    ElMessage.error(t("agentHeader.sessionDeleteError"));
  }
};

const formatTime = (timestamp: any) => {
  if (!timestamp) return "";

  // 处理时间戳（可能是数字或字符串）
  let dateObj: Date;
  if (typeof timestamp === "number") {
    // 如果是时间戳数字，直接创建Date对象
    dateObj = new Date(timestamp);
  } else {
    // 如果是字符串或其他格式，尝试转换
    dateObj = new Date(timestamp);
  }

  if (isNaN(dateObj.getTime())) return "";

  // 显示具体时间：YYYY/MM/DD HH:mm:ss
  const year = dateObj.getFullYear();
  const month = String(dateObj.getMonth() + 1).padStart(2, "0");
  const day = String(dateObj.getDate()).padStart(2, "0");
  const hours = String(dateObj.getHours()).padStart(2, "0");
  const minutes = String(dateObj.getMinutes()).padStart(2, "0");
  const seconds = String(dateObj.getSeconds()).padStart(2, "0");
  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
};

// 生命周期
onMounted(() => {
  // 点击外部关闭下拉菜单
  document.addEventListener("click", handleClickOutside as any);
});

onUnmounted(() => {
  document.removeEventListener("click", handleClickOutside as any);
});

// 暴露方法给父组件
defineExpose({
  openHistoryDropdown,
});
</script>

<style scoped>
.agent-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 44px;
  padding: 0 16px;
  background: var(--color-card);
  border-bottom: 1px solid var(--color-border);
  box-sizing: border-box;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
  min-width: 0;
}

.title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
  flex-shrink: 0;
  white-space: nowrap;
}

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

.header-right {
  display: flex;
  align-items: center;
  gap: 16px;
}

.action-btn {
  background: none;
  border: none;
  color: var(--color-secondary);
  font-size: 12px;
  cursor: pointer;
  border-radius: 4px;
  padding: 6px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.action-btn:hover {
  background: rgba(0, 0, 0, 0.05);
  /* 移除颜色变化 */
}

.icon-svg {
  width: 16px;
  height: 16px;
  font-size: 16px;
  color: var(--color-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* 历史对话下拉菜单 */
.history-dropdown {
  position: relative;
}

.history-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1900;
}

.history-menu {
  position: fixed;
  top: 44px;
  right: 10px;
  width: 300px;
  max-width: 80vw;
  max-height: 80vh;
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
  z-index: 1901; /* 降低 z-index，确保 Element Plus 的弹窗（通常从 2000+ 开始递增）能显示在其上方 */
  overflow: hidden;
}

.history-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.clear-history-btn {
  width: 16px;
  height: 16px;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1) brightness(0.8);
}

.clear-history-btn:hover {
  filter: grayscale(0) brightness(1);
  background: rgba(255, 255, 255, 0.1);
}

.history-list {
  max-height: 400px;
  overflow-y: auto;
}

.history-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid var(--color-border);
}

.history-item:hover {
  background: var(--color-hover);
}

.history-item:last-child {
  border-bottom: none;
}

.history-item-content {
  flex: 1;
  min-width: 0;
}

.history-title {
  font-size: 14px;
  color: var(--color-text);
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.history-time {
  font-size: 12px;
  color: var(--color-secondary);
}

.delete-chat-btn {
  width: 16px;
  height: 16px;
  cursor: pointer;
  padding: 2px;
  border-radius: 4px;
  transition: all 0.2s;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: grayscale(1) brightness(0.8);
}

.history-item:hover .delete-chat-btn {
  opacity: 1;
}

.delete-chat-btn:hover {
  filter: grayscale(0) brightness(1);
  background: rgba(255, 255, 255, 0.1);
}

.empty-history {
  padding: 20px;
  text-align: center;
  color: var(--color-secondary);
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .history-menu {
    width: 200px;
  }

  .header-actions {
    gap: 4px;
  }

  .action-btn {
    padding: 4px 6px;
    font-size: 12px;
  }
}
</style>