import React from 'react';
import type { MessageBlock } from '@/store/commStore';
import MarkdownBlock from './MarkdownBlock';
import HtmlBlock from './HtmlBlock';
import ImageBlock from './ImageBlock';
import AudioBlock from './AudioBlock';
import VideoBlock from './VideoBlock';
import FileBlock from './FileBlock';
import ActionCardBlock from './ActionCardBlock';
import ContactCardBlock from './ContactCardBlock';
import MiniAppBlock from './MiniAppBlock';
import AgentResultBlock from './AgentResultBlock';
import ApprovalRequestBlock from './ApprovalRequestBlock';
import TaskCardBlock from './TaskCardBlock';
import WorkflowCardBlock from './WorkflowCardBlock';
import KnowledgeCardBlock from './KnowledgeCardBlock';

interface BlockRendererProps {
  blocks: MessageBlock[];
}

const BlockRenderer: React.FC<BlockRendererProps> = ({ blocks }) => {
  if (!blocks || blocks.length === 0) {
    return null;
  }

  // Sort blocks by sort_order to ensure correct rendering sequence
  const sortedBlocks = [...blocks].sort((a, b) => a.sort_order - b.sort_order);

  return (
    <div className="space-y-2">
      {sortedBlocks.map((block) => {
        const renderBlock = (): React.ReactNode => {
          switch (block.block_type) {
            case 'text':
              // Text blocks: render as plain text in a styled div
              return (
                <div className="text-sm whitespace-pre-wrap break-words">
                  {block.block_data.text || block.block_data.content || ''}
                </div>
              );
            case 'markdown':
              return <MarkdownBlock block={block} />;
            case 'html':
              return <HtmlBlock block={block} />;
            case 'image':
              return <ImageBlock block={block} />;
            case 'audio':
              return <AudioBlock block={block} />;
            case 'video':
              return <VideoBlock block={block} />;
            case 'file':
              return <FileBlock block={block} />;
            case 'action_card':
              return <ActionCardBlock block={block} />;
            case 'contact_card':
              return <ContactCardBlock block={block} />;
            case 'miniapp':
              return <MiniAppBlock block={block} />;
            case 'agent_result':
              return <AgentResultBlock block={block} />;
            case 'approval_request':
              return <ApprovalRequestBlock block={block} />;
            case 'task_card':
              return <TaskCardBlock block={block} />;
            case 'workflow_card':
              return <WorkflowCardBlock block={block} />;
            case 'knowledge_card':
              return <KnowledgeCardBlock block={block} />;
            default:
              // Fallback for unknown block types
              return (
                <div className="text-xs text-secondary-400 italic p-2 rounded bg-secondary-50">
                  Unbekannter Block-Typ: {block.block_type}
                </div>
              );
          }
        };

        return (
          <div key={block.id} className="block-wrapper">
            {renderBlock()}
          </div>
        );
      })}
    </div>
  );
};

export default BlockRenderer;