// import { useState, useCallback, useEffect, useContext, useMemo, useRef } from "react";
// import ChatMessageUserHeader from "./ChatMessageUserHeader";
// import CrushLevelAction from "./CrushLevelAction";
// import { useUpwardInfiniteScroll } from "@/hooks/useUpwardInfiniteScroll";
// import { useAtom, useStore, useSetAtom, useAtomValue } from "jotai";
// import { msgListAtom, selectedConversationIdAtom } from "@/atoms/im";
// import NimMsgContext from "@/context/NimChat/NimMsgContext";
// import { useNimChat } from "@/context/NimChat/useNimChat";
// import ChatMessageItems from "./ChatMessageItems";
// import ChatMessageSkeleton from "./ChatMessageItems/ChatMessageSkeleton";
// import { useChatConfig } from "../context/chatConfig";
// import { useSendDialoguePrologueMessage } from "@/hooks/useIm";

// const ChatMessageList = () => {
//   // 获取NIM相关的Context和状态
//   const { nim } = useNimChat();
//   const { getHistoryMsgActive } = useContext(NimMsgContext);
//   const [msgList] = useAtom(msgListAtom);
//   const setMsgList = useSetAtom(msgListAtom);
//   const selectedConversationId = useAtomValue(selectedConversationIdAtom);

//   // 获取聊天配置信息，包含aiId
//   const { aiId } = useChatConfig();
//   const { mutateAsync: sendDialoguePrologueMessage } = useSendDialoguePrologueMessage();

//   // 状态管理
//   const [isLoading, setIsLoading] = useState(false);
//   const [hasNextPage, setHasNextPage] = useState(true);
//   const [isInitialLoad, setIsInitialLoad] = useState(true);
//   const [canLoadMore, setCanLoadMore] = useState(false); // 控制是否可以开始加载更多
//   const [apiCallCount, setApiCallCount] = useState(0); // 追踪API调用次数
//   const [showSkeleton, setShowSkeleton] = useState(true); // 控制骨架屏显示
//   const [lastMessageCount, setLastMessageCount] = useState(0); // 记录上一次的消息数量
//   const [hasLoadedOnce, setHasLoadedOnce] = useState(false); // 是否已经完成过至少一次加载
//   const [showCrushLevelAction, setShowCrushLevelAction] = useState(false); // 控制CrushLevelAction显示
//   const [hasSentPrologue, setHasSentPrologue] = useState(false); // 防止重复发送开场白
//   const [hasConfirmedNoHistory, setHasConfirmedNoHistory] = useState(false); // 是否已确认没有历史消息

//   // 获取 store 来直接访问原子值，避免依赖循环
//   const store = useStore();

//   // 用于引用ChatMessageUserHeader的ref
//   const userHeaderRef = useRef<HTMLDivElement>(null);

//   // 使用useMemo优化消息列表计算，避免每次渲染都重新计算
//   const messages = useMemo(() => {
//     const result = selectedConversationId ? (msgList.get(selectedConversationId) || []) : [];
//     // 只在开发环境输出日志，且限制日志频率
//     if (process.env.NODE_ENV === 'development') {
//       console.log('📋 当前消息列表:', selectedConversationId, '消息数量:', result.length);
//     }
//     return result;
//   }, [selectedConversationId, msgList]);

//   // 监听消息数量变化 - 优化日志输出
//   useEffect(() => {
//     if (process.env.NODE_ENV === 'development') {
//       console.log('📈 消息数量变化:', messages.length);
//     }
//   }, [messages.length]);

//   console.log(messages)

//   // 初始化加载消息 - 根据是否已有缓存决定是否显示骨架与首拉
//   useEffect(() => {
//     if (!selectedConversationId) return;
//     const conversation = nim?.V2NIMConversationService.getConversation(selectedConversationId);
//     if (process.env.NODE_ENV === 'development') {
//       console.log('🚀 初始加载消息 - conversation', conversation);
//     }

//     // 读取当前会话在本地的已缓存消息
//     const currentMsgList = store.get(msgListAtom);
//     const cachedMessages = currentMsgList.get(selectedConversationId) || [];

//     setApiCallCount(0);
//     setHasNextPage(true);
//     setLastMessageCount(cachedMessages.length);
//     setHasLoadedOnce(false);
//     // 重置开场白发送状态，每个新会话都应该能发送开场白
//     setHasSentPrologue(false);
//     // 重置历史消息确认状态
//     setHasConfirmedNoHistory(false);

//     if (cachedMessages.length > 0) {
//       // 已有缓存：不清空、不显示骨架、不开启首拉，只需启用加载更多
//       setIsInitialLoad(false);
//       setShowSkeleton(false);
//       setCanLoadMore(true);
//       setHasLoadedOnce(true);
//       // 有缓存消息说明已经有历史消息，确认有历史消息，不应该发送开场白
//       setHasConfirmedNoHistory(true);
//       if (process.env.NODE_ENV === 'development') {
//         console.log('💾 使用缓存消息，跳过骨架与首拉', { count: cachedMessages.length });
//       }
//       return;
//     }

//     // 无缓存：按原逻辑显示骨架并首拉
//     setIsInitialLoad(true);
//     setCanLoadMore(false);
//     setShowSkeleton(true);
//     if (process.env.NODE_ENV === 'development') {
//       console.log('🦴 无缓存，显示骨架并进行首拉');
//     }

//     setTimeout(() => {
//       setApiCallCount(prev => prev + 1);
//       if (process.env.NODE_ENV === 'development') {
//         console.log('🚀 首拉 API 调用');
//       }
//       getHistoryMsgActive({
//         conversationId: selectedConversationId,
//         endTime: Date.now(),
//         limit: 100,
//       });
//     }, 100);

//     // 添加超时保护：如果5秒后仍显示骨架屏，强制隐藏
//     const skeletonTimeout = setTimeout(() => {
//       if (showSkeleton && isInitialLoad) {
//         if (process.env.NODE_ENV === 'development') {
//           console.log('⏰ 骨架屏超时保护触发，强制隐藏');
//         }
//         setShowSkeleton(false);
//         setIsInitialLoad(false);
//         setHasLoadedOnce(true);
//         setCanLoadMore(true);
//       }
//     }, 5000);

//     return () => {
//       clearTimeout(skeletonTimeout);
//     };
//   }, [selectedConversationId, getHistoryMsgActive, setMsgList, store, nim])

//   // 加载历史消息
//   const fetchNextPage = useCallback(async () => {
//     if (isLoading || !hasNextPage || !selectedConversationId || !canLoadMore) return;

//     setApiCallCount(prev => {
//       const newCount = prev + 1;
//       if (process.env.NODE_ENV === 'development') {
//         console.log('📊 fetchNextPage 被调用 - API调用次数:', newCount, { isLoading, hasNextPage, selectedConversationId, canLoadMore });
//       }
//       return newCount;
//     });

//     setIsLoading(true);

//     try {
//       // 使用 store.get 获取当前消息列表的最新状态，避免依赖循环
//       const currentMsgList = store.get(msgListAtom);
//       const currentMessages = currentMsgList.get(selectedConversationId) || [];
//       const oldestMessage = currentMessages.length > 0 ? currentMessages[0] : null;

//       // 设置查询参数 - 如果有最老的消息，从它的时间点开始查询更早的消息
//       const endTime = oldestMessage ? oldestMessage.createTime : Date.now();
//       const lastMsgId = oldestMessage ? oldestMessage.messageClientId : undefined;

//       if (process.env.NODE_ENV === 'development') {
//         console.log('📊 fetchNextPage - 加载历史消息:', { endTime, lastMsgId, oldestMessage, limit: 20 });
//       }

//       // 记录加载前的消息数量
//       const beforeCount = currentMessages.length;

//       // 加载历史消息
//       await getHistoryMsgActive({
//         conversationId: selectedConversationId,
//         endTime,
//         lastMsgId,
//         limit: 100,
//       });

//       // 检查是否有新消息加载
//       setTimeout(() => {
//         const newMsgList = store.get(msgListAtom);
//         const newMessages = newMsgList.get(selectedConversationId) || [];
//         const afterCount = newMessages.length;

//         // 如果没有新增消息，说明没有更多历史数据了
//         if (afterCount <= beforeCount) {
//           setHasNextPage(false);
//           // 如果是首次加载且没有加载到任何消息，说明确认没有历史消息
//           if (isInitialLoad && afterCount === 0) {
//             setHasConfirmedNoHistory(false); // 确认没有历史消息，可以发送开场白
//           } else {
//             setHasConfirmedNoHistory(true); // 有历史消息，不应该发送开场白
//           }
//           if (process.env.NODE_ENV === 'development') {
//             console.log('📭 没有更多历史消息', { beforeCount, afterCount, isInitialLoad, hasConfirmedNoHistory: afterCount > 0 });
//           }
//         } else {
//           // 如果有新消息加载且用户仍在顶部，稍微向下滚动避免"卡住"
//           if (containerRef.current && containerRef.current.scrollTop <= 5) {
//             containerRef.current.scrollTop = 20; // 向下滚动20px，确保可以重新触发
//             if (process.env.NODE_ENV === 'development') {
//               console.log('📊 向上加载完成，调整滚动位置避免卡在顶部');
//             }
//           }
//         }
//       }, 100);

//     } catch (error) {
//       console.error('加载历史消息失败:', error);
//       // 如果加载失败，暂时设置为没有更多数据，避免重复请求
//       setHasNextPage(false);
//     } finally {
//       setIsLoading(false);
//     }
//   }, [isLoading, hasNextPage, selectedConversationId, canLoadMore, getHistoryMsgActive, store]);

//   // 使用向上滚动的无限滚动Hook
//   const { loadMoreRef, containerRef } = useUpwardInfiniteScroll({
//     hasNextPage,
//     isLoading,
//     fetchNextPage,
//     threshold: 800, // 距离顶部较远时就开始加载，提升用户体验
//     enabled: canLoadMore && hasNextPage, // 仅在允许且确有下一页时启用Observer
//   });

//   // 切换到新会话且存在缓存时，确保滚动到底部
//   useEffect(() => {
//     if (!selectedConversationId) return;
//     const currentMsgList = store.get(msgListAtom);
//     const cachedMessages = currentMsgList.get(selectedConversationId) || [];
//     if (cachedMessages.length > 0 && containerRef.current) {
//       // 强制滚动到底部的函数
//       const forceScrollToBottom = () => {
//         if (containerRef.current) {
//           const container = containerRef.current;
//           container.scrollTop = container.scrollHeight;
//           // 使用scrollIntoView作为备用方案
//           const lastElement = container.lastElementChild?.lastElementChild;
//           if (lastElement) {
//             lastElement.scrollIntoView({ behavior: 'instant', block: 'end' });
//           }
//         }
//       };

//       // 立即执行
//       forceScrollToBottom();

//       // 延迟执行确保DOM完全渲染
//       setTimeout(forceScrollToBottom, 50);
//       setTimeout(forceScrollToBottom, 150);
//       setTimeout(forceScrollToBottom, 300);
//     }
//   }, [selectedConversationId, store]);

//   // 骨架屏加载完成后滚动到底部
//   useEffect(() => {
//     if (showSkeleton && containerRef.current) {
//       // 骨架屏显示时，强制滚动到底部
//       const forceScrollToBottom = () => {
//         if (containerRef.current && showSkeleton) {
//           const container = containerRef.current;
//           container.scrollTop = container.scrollHeight;
//           // 使用scrollIntoView作为备用方案
//           const lastElement = container.lastElementChild?.lastElementChild;
//           if (lastElement) {
//             lastElement.scrollIntoView({ behavior: 'instant', block: 'end' });
//           }
//         }
//       };

//       // 延迟确保DOM完全渲染
//       const timeoutId = setTimeout(() => {
//         forceScrollToBottom();
//         if (process.env.NODE_ENV === 'development') {
//           console.log('🦴 骨架屏滚动到底部完成');
//         }

//         // 再次确保滚动位置正确
//         setTimeout(forceScrollToBottom, 100);
//         setTimeout(forceScrollToBottom, 300);
//       }, 200); // 优化延迟时间

//       return () => clearTimeout(timeoutId);
//     }
//   }, [showSkeleton]);

//   // 首次加载完成后自动滚动到底部
//   useEffect(() => {
//     // 如果是初始加载状态且有消息，或者初始加载后没有消息但API已调用完成
//     if (isInitialLoad && (messages.length > 0 || apiCallCount > 0)) {
//       if (process.env.NODE_ENV === 'development') {
//         console.log('📨 检测到首批消息加载完成，准备隐藏骨架屏', {
//           messagesLength: messages.length,
//           apiCallCount
//         });
//       }

//       // 先保持骨架屏一小段时间，然后平滑过渡到真实消息
//       setTimeout(() => {
//         // 隐藏骨架屏
//         setShowSkeleton(false);
//         if (process.env.NODE_ENV === 'development') {
//           console.log('🦴 隐藏骨架屏，显示真实消息');
//         }

//         // 标记初始加载完成和已加载过
//         setIsInitialLoad(false);
//         setHasLoadedOnce(true);

//         // 初始加载完成后，根据消息数量确认是否有历史消息
//         if (messages.length === 0) {
//           setHasConfirmedNoHistory(false); // 确认没有历史消息，可以发送开场白
//         } else {
//           setHasConfirmedNoHistory(true); // 有历史消息，不应该发送开场白
//         }

//         // 如果有消息，滚动到底部
//         if (messages.length > 0) {
//           // 使用setTimeout确保DOM完全渲染后再滚动
//           setTimeout(() => {
//             if (containerRef.current) {
//               // 强制滚动到底部 - 使用多种方式确保成功
//               const scrollToBottom = () => {
//                 if (containerRef.current) {
//                   const container = containerRef.current;
//                   container.scrollTop = container.scrollHeight;
//                   // 使用scrollIntoView作为备用方案
//                   const lastElement = container.lastElementChild?.lastElementChild;
//                   if (lastElement) {
//                     lastElement.scrollIntoView({ behavior: 'instant', block: 'end' });
//                   }
//                 }
//               };

//               // 立即执行一次
//               scrollToBottom();

//               // 再次确保滚动到底部（处理动态内容加载）
//               setTimeout(scrollToBottom, 100);
//               setTimeout(scrollToBottom, 300);

//               if (process.env.NODE_ENV === 'development') {
//                 console.log('📨 首次消息加载滚动到底部完成');
//               }
//             }
//           }, 200);
//         }

//         // 延迟启用加载更多功能，避免初始滚动位置触发加载
//         setTimeout(() => {
//           setCanLoadMore(true);
//           if (process.env.NODE_ENV === 'development') {
//             console.log('📨 启用加载更多功能');
//           }
//         }, 500);
//       }, 200); // 给骨架屏额外200ms的展示时间，确保用户看到滚动效果
//     }
//   }, [messages.length, isInitialLoad, apiCallCount]); // 监听消息变化、初始加载状态和API调用次数

//   // 自动发送开场白消息
//   useEffect(() => {
//     // 检查是否满足发送开场白的条件：
//     // 1. 已经完成过至少一次加载（hasLoadedOnce为true）
//     // 2. 消息列表为空
//     // 3. 还没有发送过开场白
//     // 4. 不是初始加载状态
//     // 5. 有有效的aiId
//     // 6. 已确认没有历史消息（hasConfirmedNoHistory为false，表示确认没有历史消息）
//     if (hasLoadedOnce && messages.length === 0 && !hasSentPrologue && !isInitialLoad && aiId && !hasConfirmedNoHistory) {
//       if (process.env.NODE_ENV === 'development') {
//         console.log('🚀 准备自动发送开场白消息，aiId:', aiId, {
//           hasLoadedOnce,
//           messagesLength: messages.length,
//           hasSentPrologue,
//           isInitialLoad,
//           hasConfirmedNoHistory
//         });
//       }

//       // 标记已发送，防止重复发送
//       setHasSentPrologue(true);

//       // 发送开场白消息

//       sendDialoguePrologueMessage({ aiId })
//     }
//   }, [hasLoadedOnce, messages.length, hasSentPrologue, isInitialLoad, aiId, hasConfirmedNoHistory, sendDialoguePrologueMessage]);

//   // 当有新消息时滚动到底部 - 优化依赖项，只监听必要的变化
//   useEffect(() => {
//     if (!isInitialLoad && containerRef.current && messages.length > 0) {
//       const container = containerRef.current;

//       // 只有当消息数量增加时才处理滚动（避免消息更新时的多余滚动）
//       if (messages.length > lastMessageCount) {
//         if (process.env.NODE_ENV === 'development') {
//           console.log('📜 检测到新消息，当前消息数:', messages.length, '上次消息数:', lastMessageCount);
//         }

//         // 检查最新的消息是否是用户发送的
//         const latestMessage = messages[messages.length - 1];
//         const isLatestMessageFromUser = latestMessage ?
//           nim?.V2NIMConversationIdUtil.parseConversationTargetId(selectedConversationId || '') !== latestMessage.senderId : false;

//         const isAtBottom = container.scrollTop + container.clientHeight >= container.scrollHeight - 100;

//         if (process.env.NODE_ENV === 'development') {
//           console.log('📜 滚动检查:', {
//             isLatestMessageFromUser,
//             isAtBottom,
//             latestMessageText: latestMessage?.text?.substring(0, 50),
//             senderId: latestMessage?.senderId
//           });
//         }

//         // 如果是用户发送的消息，总是滚动到底部
//         // 如果是AI消息且用户在底部附近，也滚动到底部
//         if (isLatestMessageFromUser || isAtBottom) {
//           if (process.env.NODE_ENV === 'development') {
//             console.log('📜 执行滚动到底部');
//           }
//           setTimeout(() => {
//             if (containerRef.current) {
//               containerRef.current.scrollTop = containerRef.current.scrollHeight;
//             }
//           }, 50);
//         }

//         // 更新消息计数
//         setLastMessageCount(messages.length);
//       }
//     }
//   }, [messages.length, isInitialLoad, lastMessageCount]); // 减少依赖项，只监听关键变化

//   // 监听滚动位置，控制CrushLevelAction显示
//   useEffect(() => {
//     const container = containerRef.current;
//     if (!container) return;

//     const handleScroll = () => {
//       if (!userHeaderRef.current) return;

//       // 获取ChatMessageUserHeader的底部位置
//       const headerRect = userHeaderRef.current.getBoundingClientRect();
//       const containerRect = container.getBoundingClientRect();

//       // 计算header相对于容器的位置
//       const headerBottomRelativeToContainer = headerRect.bottom - containerRect.top;

//       // 如果header已经滚动出视野（header底部位置小于等于100），显示CrushLevelAction
//       const shouldShow = headerBottomRelativeToContainer <= 100;

//       if (shouldShow !== showCrushLevelAction) {
//         setShowCrushLevelAction(shouldShow);
//         if (process.env.NODE_ENV === 'development') {
//           console.log('💫 CrushLevelAction显示状态:', shouldShow, '头部位置:', headerBottomRelativeToContainer);
//         }
//       }
//     };

//     // 添加滚动监听器
//     container.addEventListener('scroll', handleScroll, { passive: true });

//     // 初始检查
//     handleScroll();

//     return () => {
//       container.removeEventListener('scroll', handleScroll);
//     };
//   }, [showCrushLevelAction]); // 依赖showCrushLevelAction来避免不必要的状态更新

//   return (
//     <div
//       ref={containerRef}
//       className="flex-1 min-h-0 overflow-y-auto py-12"
//     >
//       <div className="max-w-[752px] mx-auto">
//         {/* 用户信息头部始终显示在顶部 */}
//         <div ref={userHeaderRef}>
//           <ChatMessageUserHeader />
//         </div>

//         {/* 隐藏的加载更多触发器 - 在用户头部后面 */}
//         {hasNextPage && (
//           <div
//             ref={loadMoreRef}
//             className="h-1 w-full opacity-0"
//           />
//         )}

//         {/* 显示加载骨架屏当正在加载更多消息且用户滚动到顶部附近时 */}
//         {hasNextPage && isLoading && (
//           <div className="mt-4">
//             <ChatMessageSkeleton />
//           </div>
//         )}

//         {/* CrushLevelAction - 使用visibility和opacity控制显示/隐藏，避免图片重复加载 */}
//         <div
//           style={{
//             visibility: showCrushLevelAction ? 'visible' : 'hidden',
//             opacity: showCrushLevelAction ? 1 : 0,
//             pointerEvents: showCrushLevelAction ? 'auto' : 'none',
//             transition: 'opacity 0.2s ease-in-out'
//           }}
//         >
//           <CrushLevelAction />
//         </div>

//         {/* 骨架屏 - 仅在首次访问且无数据且尚未完成加载时显示 */}
//         {showSkeleton && messages.length === 0 && isInitialLoad && !hasLoadedOnce && (
//           <ChatMessageSkeleton />
//         )}

//         {/* 消息列表 */}
//         {!showSkeleton && (
//           <div className="space-y-4 mt-8">
//             {/* 普通消息 */}
//             {messages
//               .filter(message => !message.isLoadingMessage)
//               .map((message) => {
//                 // 判断是否是用户发送的消息（根据发送者ID）
//                 const isUser = nim?.V2NIMConversationIdUtil.parseConversationTargetId(selectedConversationId || '') !== message.senderId;

//                 return (
//                   <div key={message.messageClientId || message.messageServerId}>
//                     <ChatMessageItems
//                       isUser={isUser}
//                       message={message}
//                     />
//                   </div>
//                 );
//               })}

//             {/* Loading消息，始终显示在最后 */}
//             {messages
//               .filter(message => message.isLoadingMessage)
//               .map((message) => (
//                 <div key={message.messageClientId}>
//                   <ChatMessageItems
//                     isUser={false}
//                     message={message}
//                   />
//                 </div>
//               ))}
//           </div>
//         )}
//       </div>
//     </div>
//   );
// }

// export default ChatMessageList;
