import { forwardRef } from 'react';
import { Empty, Spin } from 'antd';
import type { AttributeDAG } from '../types';
import { MindmapDAG } from './MindmapDAG';
import type { MindmapDAGRef } from './MindmapDAG';

interface VisualSettings {
  nodeSpacing: number;
  fontSize: number;
}

interface MindmapPanelProps {
  data: AttributeDAG | null;
  loading: boolean;
  error: string | null;
  isDark: boolean;
  visualSettings: VisualSettings;
}

export const MindmapPanel = forwardRef<MindmapDAGRef, MindmapPanelProps>(
  ({ data, loading, error, isDark, visualSettings }, ref) => {
    if (loading) {
      return (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <Spin size="large" tip="Analyzing..." />
        </div>
      );
    }

    if (error) {
      return (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <Empty description={error} />
        </div>
      );
    }

    if (!data) {
      return (
        <div
          style={{
            display: 'flex',
            justifyContent: 'center',
            alignItems: 'center',
            height: '100%',
          }}
        >
          <Empty description="Enter a query to analyze attributes" />
        </div>
      );
    }

    return <MindmapDAG ref={ref} data={data} isDark={isDark} visualSettings={visualSettings} />;
  }
);

MindmapPanel.displayName = 'MindmapPanel';
