import React, { useEffect, useRef, useState } from 'react';
import { Transformer } from 'markmap-lib';
import { Markmap } from 'markmap-view';
import { Spin, Empty, Button, Space } from 'antd';
import { FullscreenOutlined, ZoomInOutlined, ZoomOutOutlined, SyncOutlined } from '@ant-design/icons';

const transformer = new Transformer();

const MindMap = ({ content, title }) => {
  const svgRef = useRef(null);
  const markmapRef = useRef(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    if (!content || !svgRef.current) return;

    setLoading(true);
    try {
      const { root } = transformer.transform(content);
      
      if (markmapRef.current) {
        markmapRef.current.setData(root);
        markmapRef.current.fit();
      } else {
        markmapRef.current = Markmap.create(svgRef.current, {
          autoFit: true,
          duration: 500,
        }, root);
      }
    } catch (error) {
      console.error('Markmap error:', error);
    } finally {
      setLoading(false);
    }
  }, [content]);

  const handleFit = () => markmapRef.current?.fit();
  const handleZoomIn = () => markmapRef.current?.rescale(1.2);
  const handleZoomOut = () => markmapRef.current?.rescale(0.8);

  if (!content) return <Empty description="暂无内容，无法生成思维导图" />;

  return (
    <div className="mindmap-container" style={{ position: 'relative', width: '100%', height: '100%', minHeight: 500 }}>
      {loading && (
        <div style={{ position: 'absolute', inset: 0, display: 'flex', alignItems: 'center', justifyContent: 'center', zIndex: 10, background: 'rgba(255,255,255,0.8)' }}>
          <Spin tip="生成导图中..." />
        </div>
      )}
      
      <div style={{ position: 'absolute', right: 16, top: 16, zIndex: 20 }}>
        <Space direction="vertical">
          <Button icon={<FullscreenOutlined />} onClick={handleFit} title="自适应" />
          <Button icon={<ZoomInOutlined />} onClick={handleZoomIn} title="放大" />
          <Button icon={<ZoomOutOutlined />} onClick={handleZoomOut} title="缩小" />
        </Space>
      </div>

      <svg ref={svgRef} style={{ width: '100%', height: '100%', minHeight: 500 }} />
    </div>
  );
};

export default MindMap;