import React from 'react';
import { Tabs } from 'antd';
import { FileText, Brain } from 'lucide-react';
import MindMap from './MindMap';
import MarkdownRenderer from './MarkdownRenderer';
import './ContentViewer.css';

const { TabPane } = Tabs;

/**
 * ContentViewer - 纯展示组件，用于显示Markdown内容和脑图
 *
 * 设计原则：
 * 1. 组件只负责纯展示，不处理数据获取
 * 2. 父组件负责数据准备和导出功能
 * 3. 通过props传入已准备好的content
 *
 * @param {Object} props
 * @param {string} props.content - Markdown格式的内容（必须由父组件准备好）
 * @param {string} props.title - 标题（用于脑图显示）
 * @param {string} props.emptyMessage - 内容为空时的提示消息
 * @param {React.ReactNode} props.summaryActions - 总结tab的额外操作按钮（如导出）
 * @param {React.ReactNode} props.mindmapActions - 脑图tab的额外操作按钮（如导出）
 */
const ContentViewer = ({
  content,
  title,
  emptyMessage = '暂无内容',
  summaryActions,
  mindmapActions
}) => {
  return (
    <div className="content-viewer">
      <Tabs defaultActiveKey="content">
        <TabPane
          tab={
            <span>
              <FileText size={16} /> 摘要
            </span>
          }
          key="content"
        >
          <div className="tab-header">
            <h2><FileText size={20} /> AI总结</h2>
            {summaryActions && <div className="tab-actions">{summaryActions}</div>}
          </div>
          <div className="content-markdown">
            <MarkdownRenderer
              content={content}
              className=""
              emptyMessage={emptyMessage}
            />
          </div>
        </TabPane>

        <TabPane
          tab={
            <span>
              <Brain size={16} /> 脑图
            </span>
          }
          key="mindmap"
        >
          <div className="tab-header">
            <h2><Brain size={18} /> 思维导图</h2>
            {mindmapActions && <div className="tab-actions">{mindmapActions}</div>}
          </div>
          {content ? (
            <MindMap
              content={content}
              title={title}
              initialScale={1.8}
            />
          ) : (
            <div className="empty-content">等待内容生成后查看脑图</div>
          )}
        </TabPane>
      </Tabs>
    </div>
  );
};

export default ContentViewer;