import React, { useRef, useEffect } from 'react';
import { ChatMessage } from '../../types/workbench';
import { MessageBubble } from './MessageBubble';

export interface MessageStreamProps {
  messages: ChatMessage[];
  onOpenCase?: (docId: string) => void;
  onCardAction?: (cardId: string, actionId: string, payload?: any) => void;
  onErrorAction?: (messageId: string, action: 'retry' | 'continue' | 'restart') => void;
}

export const MessageStream: React.FC<MessageStreamProps> = ({
  messages,
  onOpenCase,
  onCardAction,
  onErrorAction,
}) => {
  const bottomRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    bottomRef.current?.scrollIntoView({ behavior: 'smooth' });
  }, [messages]);

  return (
    <div
      style={{
        flex: 1,
        overflowY: 'auto',
        padding: '16px 0',
        display: 'flex',
        flexDirection: 'column',
      }}
    >
      {messages.length === 0 ? (
        <div
          style={{
            flex: 1,
            display: 'flex',
            flexDirection: 'column',
            alignItems: 'center',
            justifyContent: 'center',
            color: 'var(--text-faint)',
            gap: '8px',
            fontSize: '13px',
          }}
        >
          <span>暂无对话记录，请在下方发送立项需求</span>
        </div>
      ) : (
        messages.map((msg) => (
          <MessageBubble
            key={msg.id}
            message={msg}
            onOpenCase={onOpenCase}
            onCardAction={onCardAction}
            onErrorAction={onErrorAction}
          />
        ))
      )}
      <div ref={bottomRef} style={{ height: '1px' }} />
    </div>
  );
};