import React, { useState } from 'react';
import { Card, Tabs, Typography, Space, Button, Empty } from 'antd';
import { 
  FileTextOutlined, 
  PartitionOutlined, 
  CopyOutlined,
  PictureOutlined,
  BulbOutlined
} from '@ant-design/icons';
import MarkdownRenderer from './MarkdownRenderer';
import MindMap from './MindMap';

const { Title, Text } = Typography;

const ContentViewer = ({ 
  content, 
  title, 
  emptyMessage = "暂无内容",
  summaryActions = null,
  mindmapActions = null
}) => {
  const [activeTab, setActiveTab] = useState('summary');

  if (!content) {
    return (
      <Card bordered={false} style={{ borderRadius: 12 }}>
        <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} description={emptyMessage} />
      </Card>
    );
  }

  const items = [
    {
      key: 'summary',
      label: <Space><FileTextOutlined />智能摘要</Space>,
      children: (
        <div style={{ padding: '8px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
            <Space>{summaryActions}</Space>
          </div>
          <MarkdownRenderer content={content} />
        </div>
      )
    },
    {
      key: 'mindmap',
      label: <Space><PartitionOutlined />思维导图</Space>,
      children: (
        <div style={{ padding: '8px 0' }}>
          <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: 16 }}>
            <Space>{mindmapActions}</Space>
          </div>
          <div style={{ minHeight: 500, background: '#f8fafc', borderRadius: 12 }}>
            <MindMap content={content} title={title} />
          </div>
        </div>
      )
    }
  ];

  return (
    <Card bordered={false} bodyStyle={{ padding: '12px 24px' }} style={{ borderRadius: 12 }}>
      <Tabs 
        className="console-tabs"
        activeKey={activeTab} 
        onChange={setActiveTab} 
        items={items}
        size="large"
      />
    </Card>
  );
};

export default ContentViewer;