<template>
  <div class="intelligence-panel-container">
    <aside :class="['intelligence-panel', { minimized, 'on-left': side === 'left' }]">
      <div v-if="!minimized" class="panel-content">
        <AgentHeader
          ref="agentHeaderRef"
          :side="side"
          :mode="currentMode"
          @minimize="handleMinimize"
          @new-chat="handleNewChat"
        />
        <AgentPanelBody 
          ref="panelBodyRef" 
          :mode="currentMode"
          @mode-change="currentMode = $event"
        />
      </div>
    </aside>
    <div v-if="minimized" :class="['restore-chat-btn', { 'on-left': side === 'left' }]">
      <div
        class="restore-restore-icon"
        @click="handleRestore"
        :title="t('intelligencePanel.expandDialog')"
      >
        <el-icon class="icon-svg-shouqi" :size="16">
          <DArrowRight v-if="side === 'left'" />
          <DArrowLeft v-else />
        </el-icon>
      </div>
      <div class="logo-divider"></div>
      <div class="restore-toolbar">
        <button
          class="action-btn"
          :title="t('intelligencePanel.newDialog')"
          @click="handleRestoreAndNewChat"
        >
          <img src="/xinduihua.svg" alt="新建对话" class="icon-svg" />
        </button>
        <button
          class="action-btn"
          :title="t('intelligencePanel.historyDialog')"
          @click="handleRestoreAndShowHistory"
        >
          <img src="/lishijilu.svg" alt="历史记录" class="icon-svg" />
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted, onUnmounted, nextTick } from "vue";
import { useI18n } from "vue-i18n";
import { DArrowLeft, DArrowRight } from "@element-plus/icons-vue";
import AgentHeader from "@/components/AgentPanel/AgentHeader.vue";
import AgentPanelBody from "@/components/AgentPanel/AgentPanelBody.vue";
import { useWorkspaceChatStore } from "@/stores/chatApi";
import { useCodexStore } from "@/stores/codex";
import { getUserProfile } from "@/api/user";

const { t } = useI18n();

const chatApiStore = useWorkspaceChatStore();
const codexStore = useCodexStore();

// 事件
const emit = defineEmits<{
  (e: "minimize-changed", minimized: boolean): void;
}>();

// 响应式数据
const props = defineProps<{
  minimized?: boolean;
  side?: "left" | "right";
}>();

const localMinimized = ref(props.minimized || false);
const minimized = computed({
  get: () => props.minimized ?? localMinimized.value,
  set: (val) => {
    localMinimized.value = val;
    emit("minimize-changed", val);
  },
});

// 当前模式
const currentMode = ref<"ask" | "agent">("ask");

const agentHeaderRef = ref<InstanceType<typeof AgentHeader> | null>(null);
const panelBodyRef = ref<InstanceType<typeof AgentPanelBody> | null>(null);

// 从用户信息中加载用户ID
const loadUserIdFromProfile = async () => {
  try {
    const userInfo = await getUserProfile();
    if (userInfo && userInfo.id) {
      chatApiStore.setUserId(userInfo.id.toString());
    } else {
      console.warn("获取的用户信息中没有ID");
    }
  } catch (error) {
    console.error("获取用户信息失败:", error);
  }
};

// 初始化数据
const initData = async () => {
  try {
    // 1. 初始化 Ask 模式数据
    try {
      await chatApiStore.fetchSessions();
      console.log("Ask 模式会话列表获取完成:", chatApiStore.sessions);
    } catch (err) {
      console.warn("Ask 模式获取会话列表失败:", err);
    }

    // 2. 初始化 Agent 模式数据
    try {
      await codexStore.fetchSessions();
      console.log("Agent 模式会话列表获取完成:", codexStore.sessions);
    } catch (err) {
      console.warn("Agent 模式获取会话列表失败:", err);
    }

    // 自动选择最近的会话 (默认先选 Ask 的)
    await autoSelectLatestSession();
  } catch (error) {
    console.error("初始化数据失败:", error);
  }
};

// 自动选择最近的会话
const autoSelectLatestSession = async () => {
  try {
    // 处理 Ask 模式
    const askUserId = chatApiStore.userId;
    if (askUserId && chatApiStore.sessions.length > 0) {
      const sortedSessions = [...chatApiStore.sessions].sort((a, b) => {
        const timeA = new Date(a.lastActivity || a.createdAt).getTime();
        const timeB = new Date(b.lastActivity || b.createdAt).getTime();
        return timeB - timeA;
      });
      const latestSession = sortedSessions[0];
      if (latestSession) {
        await chatApiStore.selectSession({
          session: latestSession,
          fetchMessages: true,
        });
      }
    }

    // 处理 Agent 模式
    if (codexStore.sessions.length > 0) {
      const sortedSessions = [...codexStore.sessions].sort((a, b) => {
        const timeA = new Date(a.lastActivity || a.createdAt).getTime();
        const timeB = new Date(b.lastActivity || b.createdAt).getTime();
        return timeB - timeA;
      });
      const latestSession = sortedSessions[0];
      if (latestSession) {
        await codexStore.selectSession({
          sessionId: latestSession.id,
          fetchTurns: true,
        });
      }
    }
  } catch (error) {
    console.error("获取最近会话失败:", error);
  }
};

const handleNewChat = async () => {
  try {
    // 根据当前模式清空对应的会话状态
    if (currentMode.value === "ask") {
      chatApiStore.clearCurrentSession();
    } else {
      codexStore.clearCurrentSession();
    }
    console.log(`已准备好 ${currentMode.value} 模式新对话，等待用户输入第一条消息...`);
  } catch (error) {
    console.error("准备新对话失败:", error);
  }
};

const handleMinimize = () => {
  minimized.value = true;
};

const handleRestore = () => {
  minimized.value = false;
  // 面板展开后重置输入框高度
  nextTick(() => {
    if (panelBodyRef.value && panelBodyRef.value.agentChatRef) {
      panelBodyRef.value.agentChatRef.resetInputHeight();
    }
  });
};

// 展开对话并执行新建对话
const handleRestoreAndNewChat = () => {
  minimized.value = false;
  nextTick(() => {
    handleNewChat();
  });
};

// 展开对话并显示历史对话
const handleRestoreAndShowHistory = () => {
  console.log("IntelligencePanel: 开始展开对话并显示历史对话");
  minimized.value = false;
  nextTick(() => {
    console.log("IntelligencePanel: 面板已展开，准备调用 openHistoryDropdown");
    setTimeout(() => {
      if (agentHeaderRef.value) {
        agentHeaderRef.value.openHistoryDropdown();
        console.log("IntelligencePanel: 已调用 openHistoryDropdown 方法");
      } else {
        console.error("IntelligencePanel: agentHeader ref 不存在");
      }
    }, 350);
  });
};

// 生命周期
onMounted(() => {
  loadUserIdFromProfile()
    .then(() => {
      initData();
    })
    .catch((error) => {
      console.error("加载用户信息失败，但仍然尝试初始化数据:", error);
      initData();
    });
});

onUnmounted(() => {
  // 关闭所有EventSource连接
  chatApiStore.closeAllEventSources();
});
</script>

<style scoped lang="scss">
.intelligence-panel-container {
  position: relative;
  display: flex;
  align-items: stretch;
  height: 100%;
  width: 100%;
  z-index: 1;
  overflow: visible; // 确保恢复按钮可见
}

.intelligence-panel {
  width: 320px;
  min-width: 300px;
  background: var(--color-card, #232323);
  border-left: 1px solid var(--color-border, #333);
  display: flex;
  flex-direction: column;
  transition:
    width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    min-width 0.35s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  flex-shrink: 0;
  opacity: 1;
  will-change: width, opacity;

  &.on-left {
    border-left: none;
    border-right: 1px solid var(--color-border, #333);
  }
}

.intelligence-panel.minimized {
  width: 0 !important;
  min-width: 0 !important;
  border-left: none;
  border-right: none;
  overflow: hidden;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none; // 禁用交互，避免遮挡恢复按钮
}

.panel-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

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

.minimize-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: 4px;
  transition: all 0.2s;

  &:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}

.panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  text-align: center;
  padding: 40px 20px;
}

.empty-icon {
  color: var(--color-text-secondary);
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-text {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text);
  margin: 0 0 8px 0;
}

.empty-hint {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

/* 最小化后的按钮 */
.restore-chat-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 54px;
  min-width: 54px;
  height: 100%;
  background: var(--color-card);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  font-size: 16px;
  border-left: 1px solid var(--color-border);
  flex-shrink: 0;
  opacity: 1;
  z-index: 100; // 确保在最上层
  visibility: visible; // 确保可见
  pointer-events: auto; // 确保可以交互

  &.on-left {
    right: auto;
    left: 0;
    border-left: none;
    border-right: 1px solid var(--color-border);
  }
}

.restore-restore-icon {
  width: 32px;
  height: 31px;
  margin: 5px 0;
  background: none;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  flex-shrink: 0;
  transition: all 0.2s;

  &:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}

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

.icon-svg {
  width: 24px;
  height: 24px;
  object-fit: contain;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s;

  &:active {
    transform: scale(0.95);
  }
}

.logo-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-border, #333);
}

.restore-toolbar {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding-top: 12px;
}

.action-btn {
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  border-radius: 4px;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;

  &:hover {
    background: rgba(0, 0, 0, 0.05);
  }
}

.icon-svg {
  width: 16px;
  height: 16px;
  object-fit: contain;
  flex-shrink: 0;
  transition: all 0.2s;
}

.action-btn:hover .icon-svg {
  /* 移除 opacity 变化 */
}

/* 响应式设计 */
/* 平板端适配 (768px - 1024px) */
@media (min-width: 768px) and (max-width: 1024px) {
  .intelligence-panel {
    width: 300px;
    min-width: 0;
  }

  .restore-chat-btn {
    width: 48px;
    min-width: 48px;
    font-size: 14px;
  }

  .icon-svg {
    width: 18px;
    height: 18px;
  }
}

/* 小屏平板端适配 (600px - 768px) */
@media (min-width: 600px) and (max-width: 767px) {
  .intelligence-panel {
    width: 280px;
    min-width: 0;
  }

  .restore-chat-btn {
    width: 44px;
    min-width: 44px;
    font-size: 13px;
  }

  .icon-svg {
    width: 16px;
    height: 16px;
  }
}

/* 手机端适配 (小于600px) */
@media (max-width: 599px) {
  .intelligence-panel {
    width: 320px;
  }

  .restore-chat-btn {
    width: 36px;
    min-width: 36px;
  }

  .icon-svg {
    width: 16px;
    height: 16px;
  }
}
</style>