import { Empty, Spin, Typography } from 'antd';
import type { ChatRuntimeSnapshot } from '../../mainChatPanel/types';

const { Text } = Typography;

type RuntimePaneProps = {
  snapshot: ChatRuntimeSnapshot | null;
  isLoading: boolean;
  errorMessage: string;
};

export function RuntimePane({ snapshot, isLoading, errorMessage }: RuntimePaneProps) {
  return (
    <section className="chat-v2__pane chat-v2__pane--runtime">
      <div className="chat-v2__pane-header">
        <Text strong>런타임</Text>
      </div>

      {isLoading ? (
        <div className="chat-v2__state">
          <Spin />
        </div>
      ) : errorMessage ? (
        <div className="chat-v2__state">
          <Text type="danger">{errorMessage}</Text>
        </div>
      ) : !snapshot ? (
        <div className="chat-v2__state">
          <Empty description="런타임 데이터가 없습니다." />
        </div>
      ) : (
        <div className="chat-v2__summary-grid">
          <div className="chat-v2__summary-card">
            <Text type="secondary">실행 중</Text>
            <Text strong>{snapshot.runningCount}</Text>
          </div>
          <div className="chat-v2__summary-card">
            <Text type="secondary">대기 중</Text>
            <Text strong>{snapshot.queuedCount}</Text>
          </div>
          <div className="chat-v2__summary-card">
            <Text type="secondary">세션 수</Text>
            <Text strong>{snapshot.sessionCount}</Text>
          </div>
        </div>
      )}
    </section>
  );
}
