import { useChatStore } from '@/store/chatStore';
import { useSessionStore } from '@/store/sessionStore';
import { MessageList } from './MessageList';
import { IoTStatusBar } from './IoTStatusBar';

export function ChatContainer() {
  const messages = useChatStore((s) => s.messages);
  const continuousMode = useChatStore((s) => s.continuousMode);
  const backgroundThinkingStatus = useChatStore((s) => s.backgroundThinkingStatus);

  const thinkingLabel = backgroundThinkingStatus === 'thinking' ? '昔涟正在回忆中...' : '';
  const statusLabel = continuousMode ? '主对话 · 进行中' : '';

  return (
    <div className="flex flex-col h-full overflow-hidden chat-background">
      {/* 状态指示器栏 */}
      <div className="relative z-10 flex items-center justify-between px-4 py-1.5 border-b border-pink-100 dark:border-pink-900 bg-pink-50/50 dark:bg-pink-950/20 flex-shrink-0">
        <div className="flex items-center gap-2">
          {statusLabel && (
            <span className="text-xs font-medium text-pink-500 dark:text-pink-400 bg-pink-100 dark:bg-pink-900/50 px-2 py-0.5 rounded-full">
              {statusLabel}
            </span>
          )}
          {thinkingLabel && (
            <span className="text-xs text-pink-400 dark:text-pink-500 animate-pulse flex items-center gap-1">
              <span className="inline-block w-1.5 h-1.5 bg-pink-400 rounded-full animate-bounce" />
              <span className="inline-block w-1.5 h-1.5 bg-pink-400 rounded-full animate-bounce" style={{ animationDelay: '0.15s' }} />
              <span className="inline-block w-1.5 h-1.5 bg-pink-400 rounded-full animate-bounce" style={{ animationDelay: '0.3s' }} />
              {thinkingLabel}
            </span>
          )}
        </div>
        {continuousMode && (
          <button
            onClick={() => useChatStore.getState().setContinuousMode(!continuousMode)}
            className="text-[10px] text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors"
            title="切换连续对话模式"
          >
            {continuousMode ? '🔗 连续对话' : '⏸️ 暂停中'}
          </button>
        )}
      </div>

      {/* 消息列表 */}
      <div className="flex flex-col flex-1 min-h-0">
        <MessageList
          messages={messages}
          hasMoreMessages={useChatStore((s) => s.hasMoreMessages)}
          isLoadingHistory={useChatStore((s) => s.isLoadingHistory)}
          onLoadMore={() => {
            const sessionId = useSessionStore.getState().currentSessionId;
            if (sessionId) {
              useSessionStore.getState().loadMoreMessagesFromServer(sessionId);
            }
          }}
        />
      </div>

      {/* IoT 状态栏（底部） */}
      <div className="relative z-10 flex-shrink-0">
        <IoTStatusBar />
      </div>
    </div>
  );
}
