import { Empty, Spin, Tag, Typography } from 'antd';
import type { PathState } from '../types';
import { MindmapDAG } from './MindmapDAG';

const { Text } = Typography;

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

interface DualPathMindmapPanelProps {
  pathA: PathState;
  pathB: PathState;
  isDark: boolean;
  visualSettings: VisualSettings;
}

interface SinglePathViewProps {
  path: PathState;
  label: string;
  color: 'blue' | 'green';
  isDark: boolean;
  visualSettings: VisualSettings;
}

function SinglePathView({ path, label, color, isDark, visualSettings }: SinglePathViewProps) {
  const { result, loading, error, query, progress } = path;

  // Header with label
  const headerStyle: React.CSSProperties = {
    padding: '6px 12px',
    background: isDark ? '#1f1f1f' : '#fafafa',
    borderBottom: `1px solid ${isDark ? '#303030' : '#f0f0f0'}`,
    display: 'flex',
    alignItems: 'center',
    gap: 8,
    minHeight: 36,
  };

  const contentStyle: React.CSSProperties = {
    flex: 1,
    position: 'relative',
    overflow: 'hidden',
  };

  const renderContent = () => {
    if (loading) {
      return (
        <div style={{
          display: 'flex',
          flexDirection: 'column',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100%',
          gap: 8,
        }}>
          <Spin size="large" />
          <Text type="secondary">{progress.message || 'Analyzing...'}</Text>
        </div>
      );
    }

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

    if (!result) {
      return (
        <div style={{
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          height: '100%',
        }}>
          <Empty description={`Enter a query for ${label}`} />
        </div>
      );
    }

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

  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
      <div style={headerStyle}>
        <Tag color={color}>{label}</Tag>
        {result && (
          <Text strong style={{ flex: 1 }}>
            {result.query}
          </Text>
        )}
        {!result && query && (
          <Text type="secondary" style={{ flex: 1 }}>
            {query}
          </Text>
        )}
        {result && (
          <Text type="secondary" style={{ fontSize: 12 }}>
            {result.nodes.length} attributes
          </Text>
        )}
      </div>
      <div style={contentStyle}>
        {renderContent()}
      </div>
    </div>
  );
}

export function DualPathMindmapPanel({
  pathA,
  pathB,
  isDark,
  visualSettings,
}: DualPathMindmapPanelProps) {
  const containerStyle: React.CSSProperties = {
    display: 'flex',
    flexDirection: 'column',
    height: '100%',
    gap: 2,
  };

  const pathContainerStyle: React.CSSProperties = {
    flex: 1,
    minHeight: 0,
    borderRadius: 6,
    overflow: 'hidden',
    border: `1px solid ${isDark ? '#303030' : '#f0f0f0'}`,
  };

  const dividerStyle: React.CSSProperties = {
    height: 4,
    background: isDark ? '#303030' : '#f0f0f0',
    cursor: 'row-resize',
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  };

  return (
    <div style={containerStyle}>
      {/* Path A - Top Half */}
      <div style={pathContainerStyle}>
        <SinglePathView
          path={pathA}
          label="Path A"
          color="blue"
          isDark={isDark}
          visualSettings={visualSettings}
        />
      </div>

      {/* Divider */}
      <div style={dividerStyle}>
        <div style={{
          width: 40,
          height: 3,
          borderRadius: 2,
          background: isDark ? '#505050' : '#d0d0d0',
        }} />
      </div>

      {/* Path B - Bottom Half */}
      <div style={pathContainerStyle}>
        <SinglePathView
          path={pathB}
          label="Path B"
          color="green"
          isDark={isDark}
          visualSettings={visualSettings}
        />
      </div>
    </div>
  );
}
