// src/components/Citation/CitedContent.js
import React from 'react';
import { Typography, Space, Tag } from 'antd';
import { RobotOutlined, FileSearchOutlined } from '@ant-design/icons';
import CitationMark from './CitationMark';
import { processCitationData } from '../../utils/citationUtils';

const { Text } = Typography;

/**
 * 带引用标注的内容组件
 * 展示拼接的文本，每句话后显示上标引用【1】【2】【3】
 * 支持鼠标悬浮和点击查看引用来源
 *
 * @param {Object} props
 * @param {Object} props.data - API 返回的原始数据 { data: [...] }
 * @param {string} props.title - 标题文本，默认 "AI 分析结果"
 * @param {boolean} props.showAIBadge - 是否显示 AI 生成标识，默认 true
 * @param {Object} props.containerStyle - 容器额外样式（可选）
 *
 * @example
 * <CitedContent
 *   data={apiData}
 *   title="关联描述"
 *   showAIBadge={true}
 *   containerStyle={{ marginTop: 16 }}
 * />
 */
const CitedContent = ({
    data,
    title = 'AI 分析结果',
    showAIBadge = true,
    containerStyle = {}
}) => {
    // 处理数据
    const processed = processCitationData(data);

    // 如果数据无效，不渲染
    if (!processed) {
        console.warn('CitedContent: Invalid data, not rendering');
        return null;
    }

    return (
        <div
            style={{
                backgroundColor: '#f5f5f5',
                borderRadius: 6,
                padding: 16,
                ...containerStyle
            }}
        >
            {/* 标题栏 */}
            <Space
                style={{
                    width: '100%',
                    justifyContent: 'space-between',
                    marginBottom: 12
                }}
            >
                <Space>
                    <FileSearchOutlined style={{ color: '#1890ff', fontSize: 16 }} />
                    <Text strong style={{ fontSize: 14 }}>
                        {title}
                    </Text>
                </Space>
                {showAIBadge && (
                    <Tag
                        icon={<RobotOutlined />}
                        color="purple"
                        style={{ margin: 0 }}
                    >
                        AI 生成
                    </Tag>
                )}
            </Space>

            {/* 带引用的文本内容 */}
            <div style={{ lineHeight: 1.8 }}>
                {processed.segments.map((segment, index) => (
                    <React.Fragment key={`segment-${segment.citationId}`}>
                        {/* 文本片段 */}
                        <Text style={{ fontSize: 14 }}>
                            {segment.text}
                        </Text>

                        {/* 引用标记 */}
                        <CitationMark
                            citationId={segment.citationId}
                            citation={processed.citations[segment.citationId]}
                        />

                        {/* 在片段之间添加逗号分隔符（最后一个不加） */}
                        {index < processed.segments.length - 1 && (
                            <Text style={{ fontSize: 14 }}>，</Text>
                        )}
                    </React.Fragment>
                ))}
            </div>
        </div>
    );
};

export default CitedContent;