import React from 'react';
import { ChatUiMessage } from '../../types/chatAssistant';
import { extractMenuOptions, resolveChatDataView } from './chatDataUtils';
import ChatMessageTable from './ChatMessageTable';
import ChatMessageCard from './ChatMessageCard';
import ChatMessageText from './ChatMessageText';
import ChatMessageMenu from './ChatMessageMenu';
import styles from './ChatAssistant.module.css';

interface ChatMessageBubbleProps {
  message: ChatUiMessage;
  isSending?: boolean;
  onRetry?: () => void;
  onSelectOption?: (value: string) => void;
}

const ChatMessageBubble: React.FC<ChatMessageBubbleProps> = ({
  message,
  isSending = false,
  onRetry,
  onSelectOption,
}) => {
  const isUser = message.role === 'user';
  const isError = message.role === 'error';

  const rowClass = isUser ? styles.chatMessageRowUser : styles.chatMessageRowAssistant;
  const bubbleClass = isUser
    ? styles.chatBubbleUser
    : isError
      ? styles.chatBubbleError
      : styles.chatBubbleAssistant;

  const label = isUser ? 'Tú' : isError ? 'Error' : 'Asistente';
  const dataView =
    message.role === 'assistant' && message.data
      ? resolveChatDataView(message.data, message.type)
      : null;

  return (
    <div className={`${styles.chatMessageRow} ${rowClass}`}>
      <span className={styles.chatMessageLabel}>{label}</span>
      <div className={`${styles.chatBubble} ${bubbleClass}`}>
        {message.text && <ChatMessageText text={message.text} />}

        {dataView === 'table' && message.data && <ChatMessageTable data={message.data} />}

        {dataView === 'card' && message.data && <ChatMessageCard data={message.data} />}

        {dataView === 'menu' && message.data && onSelectOption && (
          <ChatMessageMenu
            options={extractMenuOptions(message.data)}
            disabled={isSending}
            onSelect={onSelectOption}
          />
        )}

        {message.role === 'error' && onRetry && (
          <button type="button" className={styles.chatRetryButton} onClick={onRetry}>
            Reintentar
          </button>
        )}
      </div>
    </div>
  );
};

export default ChatMessageBubble;