/**
 * @file MessageComponentBox.tsx
 * @description This file defines the MessageComponentBox component, which renders the content
 * of an AssistantMessage. It supports rendering various message types such as grounded text,
 * normal text, and follow-up questions. The component uses React and MobX for state management
 * and includes functionality for handling citation and follow-up actions, as well as displaying
 * agent processing information.
 */

import React, { useState } from 'react';
import { observer } from 'mobx-react';
import { AssistantMessage, Citation, MessageContent, PROCESSING_TYPE, ProcessingInfo, TEXT_TYPE } from '../types/types';
import ReactMarkdown from 'react-markdown';

/**
 * Props for the MessageComponentBox.
 * @interface MessageComponentProps
 * @property {AssistantMessage} message - The message data to display.
 * @property {number} index - The index of the message.
 * @property {Function} onFollowUpClick - Callback to handle follow-up question clicks.
 * @property {Function} onCitationClick - Callback to handle citation clicks.
 * @property {Function} updateMessageCitations - Function to update message citations.
 */
interface MessageComponentProps {
    message: AssistantMessage;
    onFollowUpClick: (question: string) => void;
    onCitationClick: (citation: Citation) => void;
    updateMessageCitations: (index: number, citations: Citation[]) => void;
}

/**
 * MessageComponentBox displays the content of an AssistantMessage including text, citations,
 * processing information, and follow-up questions.
 * @param {MessageComponentProps} props - The props for the component.
 */
const MessageComponentBox: React.FC<MessageComponentProps> = ({ message, onFollowUpClick, onCitationClick }) => {
    const [dropdownOpen, setDropdownOpen] = useState(false);

    const renderContent = (item: MessageContent) => {
        const i = item.index;

        if (item.type === TEXT_TYPE.GROUNDED) {
            const citation_ids = item.citation_ids || [];
            return (
                <span key={i} className="grounded-text">
                    <ReactMarkdown>{item.text}</ReactMarkdown>
                    {citation_ids.map((id, idx) => {
                        const citation = message.citations?.find(c => c.citation_id === id);
                        if (!citation) return null;
                        return (
                            <button key={i + idx} className="citation-button" onClick={() => onCitationClick(citation)}>
                                [{idx + 1}]
                            </button>
                        );
                    })}
                </span>
            );
        } else if (item.type === TEXT_TYPE.NORMAL) {
            return (
                <span key={i} className="normal-text">
                    <ReactMarkdown>{item.text}</ReactMarkdown>
                </span>
            );
        } else if ('query' in item) {
            return (
                <span key={i} className="query-text">
                    <ReactMarkdown>{JSON.stringify(item.query)}</ReactMarkdown>
                </span>
            );
        } else {
            return (
                <span key={i}>
                    <ReactMarkdown>{JSON.stringify(item)}</ReactMarkdown>
                </span>
            );
        }
    };

    const hasProcessingInfo = message.processing_info && message.processing_info.length > 0;

    const renderProcessingInfo = (info: ProcessingInfo) => {
        if (info.type === PROCESSING_TYPE.THOUGHT) {
            return (
                <div key={info.index} className="processing-item">
                    <strong>Thought:</strong> {info.content}
                </div>
            );
        } else if (info.type === PROCESSING_TYPE.ACTION) {
            return (
                <div key={info.index} className="processing-item">
                    <strong>Action:</strong> {info.content}
                </div>
            );
        }
        return null;
    };

    return (
        <div className={`message ${message.role}`}>
            <div className="message-content">{message.content && message.content.map(messageFragment => <React.Fragment key={messageFragment.index}>{renderContent(messageFragment)}</React.Fragment>)}</div>

            {/* Processing Information Dropdown */}
            {hasProcessingInfo && (
                <div className="processing-info">
                    <button className="toggle-info" onClick={() => setDropdownOpen(!dropdownOpen)}>
                        {dropdownOpen ? 'Hide Agent Thoughts/Actions' : 'Show Agent Thoughts/Actions'}
                    </button>
                    {dropdownOpen && <div className="info-content">{message.processing_info.map(renderProcessingInfo)}</div>}
                </div>
            )}

            {/* Follow-up Questions Section */}
            {message.follow_up_questions && message.follow_up_questions.length > 0 && (
                <div className="follow-up-questions">
                    <h4>Follow-up Questions:</h4>
                    <div className="questions-list">
                        {message.follow_up_questions.map((question, idx) => (
                            <button key={idx} className="follow-up-button" onClick={() => onFollowUpClick(question)}>
                                {question}
                            </button>
                        ))}
                    </div>
                </div>
            )}
        </div>
    );
};

// Export the observer-wrapped component to allow MobX to react to state changes
export default observer(MessageComponentBox);