import React, { useState } from 'react';
import { Card, Tag, Collapse, Typography, Space, Badge } from 'antd';
import { StarFilled, CopyOutlined, UserOutlined } from '@ant-design/icons';
import type { DescriptionGroup } from '../../types';

const { Text, Paragraph } = Typography;
const { Panel } = Collapse;

interface GroupCardProps {
  group: DescriptionGroup;
  isDark: boolean;
  index: number;
}

/**
 * Card component for displaying a group of similar descriptions
 */
export const GroupCard: React.FC<GroupCardProps> = ({ group, isDark, index }) => {
  const [expanded, setExpanded] = useState(false);
  const hasDuplicates = group.duplicates.length > 0;

  const cardStyle: React.CSSProperties = {
    marginBottom: 16,
    borderRadius: 8,
    border: isDark ? '1px solid #303030' : '1px solid #f0f0f0',
    background: isDark ? '#1f1f1f' : '#fff',
  };

  const representativeStyle: React.CSSProperties = {
    background: isDark
      ? 'linear-gradient(135deg, #1a472a 0%, #2d5a3d 100%)'
      : 'linear-gradient(135deg, #f6ffed 0%, #d9f7be 100%)',
    padding: 12,
    borderRadius: 6,
    marginBottom: hasDuplicates ? 12 : 0,
  };

  const duplicateItemStyle: React.CSSProperties = {
    background: isDark ? '#2a2a2a' : '#fafafa',
    padding: 10,
    borderRadius: 4,
    marginBottom: 8,
    borderLeft: `3px solid ${isDark ? '#faad14' : '#fa8c16'}`,
  };

  return (
    <Card
      size="small"
      style={cardStyle}
      title={
        <Space>
          <Badge
            count={index + 1}
            style={{
              backgroundColor: hasDuplicates ? '#52c41a' : '#1890ff',
            }}
          />
          <Text strong style={{ color: isDark ? '#fff' : '#000' }}>
            {group.representative.keyword}
          </Text>
          {hasDuplicates && (
            <Tag color="orange" icon={<CopyOutlined />}>
              {group.duplicates.length} similar
            </Tag>
          )}
        </Space>
      }
      extra={
        <Tag color={isDark ? 'geekblue' : 'blue'}>
          <UserOutlined style={{ marginRight: 4 }} />
          {group.representative.expert_name}
        </Tag>
      }
    >
      {/* Representative description */}
      <div style={representativeStyle}>
        <Space direction="vertical" size={4} style={{ width: '100%' }}>
          <Space>
            <StarFilled style={{ color: '#52c41a' }} />
            <Text type="secondary" style={{ fontSize: 12 }}>
              Representative
            </Text>
          </Space>
          <Paragraph
            style={{
              margin: 0,
              color: isDark ? '#e0e0e0' : '#333',
              fontSize: 14,
            }}
          >
            {group.representative.description}
          </Paragraph>
        </Space>
      </div>

      {/* Duplicates section */}
      {hasDuplicates && (
        <Collapse
          ghost
          activeKey={expanded ? ['duplicates'] : []}
          onChange={() => setExpanded(!expanded)}
          style={{ marginTop: 8 }}
        >
          <Panel
            key="duplicates"
            header={
              <Text type="secondary" style={{ fontSize: 12 }}>
                View {group.duplicates.length} similar description(s)
              </Text>
            }
            style={{ padding: 0 }}
          >
            <Space direction="vertical" size={0} style={{ width: '100%' }}>
              {group.duplicates.map((dup, dupIndex) => (
                <div key={`${dup.expert_id}-${dupIndex}`} style={duplicateItemStyle}>
                  <Space direction="vertical" size={2} style={{ width: '100%' }}>
                    <Space size="small">
                      <Tag color="default" style={{ fontSize: 11 }}>
                        {dup.keyword}
                      </Tag>
                      <Tag color="cyan" style={{ fontSize: 11 }}>
                        {dup.expert_name}
                      </Tag>
                      <Tag color="orange" style={{ fontSize: 11 }}>
                        {(group.similarity_scores[dupIndex] * 100).toFixed(0)}% similar
                      </Tag>
                    </Space>
                    <Text
                      style={{
                        fontSize: 13,
                        color: isDark ? '#b0b0b0' : '#666',
                      }}
                    >
                      {dup.description}
                    </Text>
                  </Space>
                </div>
              ))}
            </Space>
          </Panel>
        </Collapse>
      )}
    </Card>
  );
};

export default GroupCard;
