import React from 'react';
import { Message } from '../../Messages/MessagesTypes';
import { DocumentItem, MessageMetadata, ActionInfo } from '../../Messages/MessageParts';
import { WorkflowFile } from '../../../../hooks/usePlayground';
import styles from '../../Messages/Messages.module.css';
import logStyles from './LogMessage.module.css';

export interface LogMessageProps {
  message: Message;
  showDocuments?: boolean;
  showMetadata?: boolean;
  showProgress?: boolean;
  renderDocument?: (document: any, message: Message) => React.ReactNode;
  onFileDelete?: (file: WorkflowFile) => Promise<void>;
  onFileRemove?: (file: WorkflowFile) => Promise<void>;
  onFileView?: (file: WorkflowFile) => Promise<void>;
  deletingFiles?: Set<string>;
  previewingFiles?: Set<string>;
  removingFiles?: Set<string>;
  workflowId?: string;
}

/**
 * Renders a single message in log style (list/table UI)
 */
export const LogMessage: React.FC<LogMessageProps> = ({
  message,
  showDocuments = true,
  showMetadata = true,
  showProgress = true,
  renderDocument,
  onFileDelete,
  onFileRemove,
  onFileView,
  deletingFiles,
  previewingFiles,
  removingFiles,
  workflowId
}) => {
  return (
    <div className={`${logStyles.logMessage} ${styles.messageWrapper}`}>
      {/* Metadata row */}
      {showMetadata && (
        <div className={logStyles.logMetadata}>
          <MessageMetadata message={message} showProgress={showProgress} />
        </div>
      )}
      
      {/* Content row */}
      <div className={logStyles.logContent}>
        {message.message && (
          <div className={logStyles.logText}>{message.message}</div>
        )}
        
        {message.summary && message.summary !== message.message && (
          <div className={logStyles.logSummary}>
            <strong>Summary:</strong> {message.summary}
          </div>
        )}
        
        {/* Action information */}
        <ActionInfo message={message} />
      </div>
      
      {/* Documents row */}
      {showDocuments && message.documents && Array.isArray(message.documents) && message.documents.length > 0 && (
        <div className={logStyles.logDocuments}>
          {message.documentsLabel && (
            <div className={styles.documentsLabel}>{message.documentsLabel}</div>
          )}
          <div className={styles.documentsList}>
            {message.documents.map((doc) => (
              <div key={doc.id}>
                {renderDocument ? renderDocument(doc, message) : (
                  <DocumentItem 
                    document={doc} 
                    message={message}
                    onFileDelete={onFileDelete}
                    onFileRemove={onFileRemove}
                    onFileView={onFileView}
                    deletingFiles={deletingFiles}
                    previewingFiles={previewingFiles}
                    removingFiles={removingFiles}
                    workflowId={workflowId}
                  />
                )}
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
};