import { Segmented } from 'antd';
import type { ReactNode } from 'react';
import { ConversationListPane } from './components/ConversationListPane';
import { ConversationRoomPane } from './components/ConversationRoomPane';
import { ErrorPane } from './components/ErrorPane';
import { RuntimePane } from './components/RuntimePane';
import type {
  ChatWorkspaceSelection,
  ConversationListState,
  ConversationRoomState,
  ErrorPaneState,
  RuntimePaneState,
  ChatWorkspaceView,
} from './types';

type ChatWorkspaceV2Props = {
  selection: ChatWorkspaceSelection;
  conversationList: ConversationListState;
  conversationRoom: ConversationRoomState;
  runtimePane: RuntimePaneState;
  errorPane: ErrorPaneState;
  onSelectView: (view: ChatWorkspaceView) => void;
  onSearchConversation: (value: string) => void;
  onSelectConversation: (sessionId: string) => void;
  onCreateConversation: () => void;
  showToolbar?: boolean;
  chatListPane?: ReactNode;
  chatRoomPane?: ReactNode;
  runtimePaneContent?: ReactNode;
  errorPaneContent?: ReactNode;
};

export function ChatWorkspaceV2({
  selection,
  conversationList,
  conversationRoom,
  runtimePane,
  errorPane,
  onSelectView,
  onSearchConversation,
  onSelectConversation,
  onCreateConversation,
  showToolbar = true,
  chatListPane,
  chatRoomPane,
  runtimePaneContent,
  errorPaneContent,
}: ChatWorkspaceV2Props) {
  return (
    <div className="chat-v2">
      {showToolbar ? (
        <div className="chat-v2__toolbar">
          <Segmented
            value={selection.activeView}
            options={[
              { label: '채팅', value: 'chat' },
              { label: '런타임', value: 'runtime' },
              { label: '에러', value: 'errors' },
            ]}
            onChange={(value) => {
              onSelectView(value as ChatWorkspaceView);
            }}
          />
        </div>
      ) : null}

      {selection.activeView === 'chat' ? (
        <div className="chat-v2__chat-layout">
          {chatListPane ?? (
            <ConversationListPane
              items={conversationList.items}
              isLoading={conversationList.isLoading}
              errorMessage={conversationList.errorMessage}
              searchText={conversationList.searchText}
              activeSessionId={selection.activeSessionId}
              onSearchChange={onSearchConversation}
              onSelectSession={onSelectConversation}
              onCreateConversation={onCreateConversation}
            />
          )}
          {chatRoomPane ?? (
            <ConversationRoomPane
              sessionId={conversationRoom.sessionId}
              messages={conversationRoom.messages}
              requests={conversationRoom.requests}
              isLoading={conversationRoom.isLoading}
              loadingLabel={conversationRoom.loadingLabel}
              errorMessage={conversationRoom.errorMessage}
            />
          )}
        </div>
      ) : null}

      {selection.activeView === 'runtime' ? (
        runtimePaneContent ?? (
          <RuntimePane
            snapshot={runtimePane.snapshot}
            isLoading={runtimePane.isLoading}
            errorMessage={runtimePane.errorMessage}
          />
        )
      ) : null}

      {selection.activeView === 'errors' ? (
        errorPaneContent ?? (
          <ErrorPane
            items={errorPane.items}
            selectedItem={errorPane.selectedItem}
            isLoading={errorPane.isLoading}
            errorMessage={errorPane.errorMessage}
          />
        )
      ) : null}
    </div>
  );
}
