import { Card, Tag, Checkbox, Typography, Space } from 'antd';
import { SwapOutlined } from '@ant-design/icons';
import type { CrossoverPair } from '../../types';

const { Text } = Typography;

interface CrossoverCardProps {
  pair: CrossoverPair;
  onToggle: (pairId: string) => void;
  isDark: boolean;
}

export function CrossoverCard({ pair, onToggle, isDark }: CrossoverCardProps) {
  const sourceColor = pair.sourcePathId === 'A' ? 'blue' : 'green';
  const targetColor = pair.targetPathId === 'A' ? 'blue' : 'green';

  return (
    <Card
      size="small"
      hoverable
      onClick={() => onToggle(pair.id)}
      style={{
        cursor: 'pointer',
        border: pair.selected
          ? `2px solid ${isDark ? '#1890ff' : '#1890ff'}`
          : `1px solid ${isDark ? '#303030' : '#f0f0f0'}`,
        background: pair.selected
          ? (isDark ? '#111d2c' : '#e6f4ff')
          : (isDark ? '#1f1f1f' : '#fff'),
      }}
      styles={{
        body: { padding: '8px 12px' },
      }}
    >
      <Space direction="vertical" size={4} style={{ width: '100%' }}>
        {/* Header with checkbox */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          <Checkbox
            checked={pair.selected}
            onChange={() => onToggle(pair.id)}
            onClick={(e) => e.stopPropagation()}
          />
          <Tag style={{ margin: 0, fontSize: 10 }}>{pair.crossType}</Tag>
        </div>

        {/* Crossover visualization */}
        <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
          {/* Source */}
          <div style={{ flex: 1, textAlign: 'right' }}>
            <Tag color={sourceColor} style={{ margin: 0 }}>
              {pair.sourcePathId}
            </Tag>
            <Text style={{ marginLeft: 4 }}>{pair.sourceNode.name}</Text>
            <Text type="secondary" style={{ fontSize: 10, display: 'block' }}>
              {pair.sourceNode.category}
            </Text>
          </div>

          {/* Cross icon */}
          <SwapOutlined style={{ color: isDark ? '#888' : '#999' }} />

          {/* Target */}
          <div style={{ flex: 1 }}>
            <Tag color={targetColor} style={{ margin: 0 }}>
              {pair.targetPathId}
            </Tag>
            <Text style={{ marginLeft: 4 }}>{pair.targetNode.name}</Text>
            <Text type="secondary" style={{ fontSize: 10, display: 'block' }}>
              {pair.targetNode.category}
            </Text>
          </div>
        </div>
      </Space>
    </Card>
  );
}
