<template>
  <CommonTopBanner title="">
    <FlexCol v-if="showSessionSidebar" position="relative" width="100%" height="100%">
      <NavBar 
        title="历史会话" 
        leftButton="close-bold" 
        @leftButtonPressed="showSessionSidebar=false"
      />
      <ChatSessionSidebar :sessionManager="sessionManager" @close="showSessionSidebar = false" />
    </FlexCol>
    <ChatMessageContainer
      v-else
      :chatManager="chatManager"
      :sessionManager="sessionManager"
      :historyItemsPagerManager="historyItemsPagerManager"
      :chatInterfaceManager="interfaceManager"
      height="77vh"
      @intoSelectMode="intoSelectMode"
    >
      <template #header>
        <NavBar 
          title="AI助手" 
          leftButton="back"
        >
          <template #left-custom>
            <FlexRow align="center">
              <IconButton icon="menu" shape="square-full" @click="showSessionSidebar = true" />
            </FlexRow>
          </template>
        </NavBar>
      </template>
      <template #footer>
        <ChatFooter
          :chatManager="chatManager" 
          :chatInterfaceManager="interfaceManager"
        >
          <template #mulitSelectMode>
            <ChatMulitSelectBar 
              :selectedCount="selectedCount" 
              :messages="messages" 
              :sessionManager="sessionManager" 
              @cancel="exitSelectMode"
            />
          </template>
          <template #header>

          </template>
        </ChatFooter>
      </template>
    </ChatMessageContainer>
  </CommonTopBanner>
</template>

<script setup lang="ts">  
import { onMounted, ref, type Ref } from 'vue';
import { useChatSession } from '@/pages/chat/composables/useChatSession';
import { useChat, type ChatInterfaceManager } from '@/pages/chat/core/Chat';
import { useChatHistoryItemsPager } from '@/pages/chat/composables/useChatHistoryItemsPager';
import { useChatSelection } from '@/pages/chat/composables/useChatSelection';
import { ChatMessage as ChatMessageModel } from '@/pages/chat/model/Message';
import ChatFooter from './components/ChatFooter.vue';
import ChatMessageContainer from './components/ChatMessageContainer.vue';
import NavBar from '@/components/nav/NavBar.vue';
import ChatSessionSidebar from '@/pages/chat/components/Session/ChatSessionSidebar.vue';
import FlexCol from '@/components/layout/FlexCol.vue';
import ChatMulitSelectBar from '@/pages/chat/components/Footer/ChatMulitSelectBar.vue';
import IconButton from '@/components/basic/IconButton.vue';
import FlexRow from '@/components/layout/FlexRow.vue';
import CommonTopBanner from '@/common/components/CommonTopBanner.vue';

const messages = ref<ChatMessageModel[]>([]) as Ref<ChatMessageModel[]>;
const interfaceManager: ChatInterfaceManager = {
  messages,
  getAttachmentList: async () => {
    return [];
  },
};

const showSessionSidebar = ref(false);

const sessionManager = useChatSession({
  messages,
  enableSession: true,
  onStop: () => chatManager.stop(),
  onScrollToBottom: () => interfaceManager.scrollToBottom?.(),
});
const historyItemsPagerManager = useChatHistoryItemsPager({
  messages,
  sessionManager,
});

const chatManager = useChat({
  interfaceManager,
  sessionManager,
  config: {
    onGetSendOptions: () => ({
      enableThinking: false,
      enableSearch: false,
      modelInfo: {
        name: 'hunyuan-2.0-thinking-20251109',
        value: 'hunyuan-2.0-thinking-20251109',
        max_tokens: 10000,
      },
      model: 'hunyuan-2.0-thinking-20251109',
      chatOptions: {
        temperature: 0.5,
        top_p: 1,
        top_k: 40,
        presence_penalty: 0,
      },
      customSystemPrompt: '',
    }),
    defaultSystemPrompt: `你是一个“乡村文化挖掘”智能知识助理，负责与用户聊天，回答用户问题。请尽量使用简洁明了的语言，避免使用专业术语。`,
    onBuildWelcome: () => {
      return {
        welcomeMessage: '你好！欢迎使用亮乡源AI助手。可以与我讨论乡村文化挖掘相关的问题。',
        welcomeActions: [
          '乡源情怀是什么',
          '乡源文化的传承与发展',
          '乡源文化的保护与利用',
          '乡村振兴的现状与未来', 
        ],
      }
    },
  }
});

const {
  intoSelectMode,
  exitSelectMode,
  selectedCount,
  isSelectMode,
} = useChatSelection();

onMounted(() => {
  interfaceManager.scrollToBottom?.();
});
</script>