// src/views/Community/components/EventDetailModal.js
import React, { useState, useEffect } from 'react';
import { Modal, Spin, Descriptions, Tag, List, Badge, Empty, Input, Button, message } from 'antd';
import { eventService } from '../../../services/eventService';
import { logger } from '../../../utils/logger';
import moment from 'moment';

const EventDetailModal = ({ visible, event, onClose }) => {
    const [loading, setLoading] = useState(false);
    const [eventDetail, setEventDetail] = useState(null);
    const [commentText, setCommentText] = useState('');
    const [submitting, setSubmitting] = useState(false);
    const [comments, setComments] = useState([]);
    const [commentsLoading, setCommentsLoading] = useState(false);

    const loadEventDetail = async () => {
        if (!event) return;

        setLoading(true);
        try {
            const response = await eventService.getEventDetail(event.id);
            if (response.success) {
                setEventDetail(response.data);
            }
        } catch (error) {
            logger.error('EventDetailModal', 'loadEventDetail', error, {
                eventId: event?.id
            });
        } finally {
            setLoading(false);
        }
    };

    const loadComments = async () => {
        if (!event) return;

        setCommentsLoading(true);
        try {
            // 使用统一的posts API获取评论
            const result = await eventService.getPosts(event.id);
            if (result.success) {
                setComments(result.data || []);
            }
        } catch (error) {
            logger.error('EventDetailModal', 'loadComments', error, {
                eventId: event?.id
            });
        } finally {
            setCommentsLoading(false);
        }
    };

    useEffect(() => {
        if (visible && event) {
            loadEventDetail();
            loadComments();
        }
    }, [visible, event]);

    const getImportanceColor = (importance) => {
        const colors = {
            S: 'red',
            A: 'orange',
            B: 'blue',
            C: 'green'
        };
        return colors[importance] || 'default';
    };

    const getRelationDesc = (relationDesc) => {
        // 处理空值
        if (!relationDesc) return '';

        // 如果是字符串,直接返回
        if (typeof relationDesc === 'string') {
            return relationDesc;
        }

        // 如果是对象且包含data数组
        if (typeof relationDesc === 'object' && relationDesc.data && Array.isArray(relationDesc.data)) {
            const firstItem = relationDesc.data[0];
            if (firstItem) {
                // 优先使用 query_part,其次使用 sentences
                return firstItem.query_part || firstItem.sentences || '';
            }
        }

        // 其他情况返回空字符串
        return '';
    };

    const renderPriceTag = (value, label) => {
        if (value === null || value === undefined) return `${label}: --`;

        const color = value > 0 ? '#ff4d4f' : '#52c41a';
        const prefix = value > 0 ? '+' : '';

        return (
            <span>
        {label}: <span style={{ color }}>{prefix}{value.toFixed(2)}%</span>
      </span>
        );
    };

    const handleSubmitComment = async () => {
        if (!commentText.trim()) {
            message.warning('请输入评论内容');
            return;
        }
        setSubmitting(true);
        try {
            // 使用统一的createPost API
            const result = await eventService.createPost(event.id, {
                content: commentText.trim(),
                content_type: 'text'
            });

            if (result.success) {
                message.success('评论发布成功');
                setCommentText('');
                // 重新加载评论列表
                loadComments();
            } else {
                throw new Error(result.message || '评论失败');
            }
        } catch (e) {
            message.error(e.message || '评论失败');
        } finally {
            setSubmitting(false);
        }
    };

    return (
        <Modal
            title={eventDetail?.title || '事件详情'}
            open={visible}
            onCancel={onClose}
            width={800}
            footer={null}
        >
            <Spin spinning={loading}>
                {eventDetail && (
                    <>
                        <Descriptions bordered column={2} style={{ marginBottom: 24 }}>
                            <Descriptions.Item label="创建时间">
                                {moment(eventDetail.created_at).format('YYYY-MM-DD HH:mm:ss')}
                            </Descriptions.Item>
                            <Descriptions.Item label="创建者">
                                {eventDetail.creator?.username || 'Anonymous'}
                            </Descriptions.Item>
                            <Descriptions.Item label="重要性">
                                <Badge color={getImportanceColor(eventDetail.importance)} text={`${eventDetail.importance}级`} />
                            </Descriptions.Item>
                            <Descriptions.Item label="浏览数">
                                {eventDetail.view_count || 0}
                            </Descriptions.Item>
                            <Descriptions.Item label="涨幅统计" span={2}>
                                <Tag>{renderPriceTag(eventDetail.related_avg_chg, '平均涨幅')}</Tag>
                                <Tag>{renderPriceTag(eventDetail.related_max_chg, '最大涨幅')}</Tag>
                                <Tag>{renderPriceTag(eventDetail.related_week_chg, '周涨幅')}</Tag>
                            </Descriptions.Item>
                            <Descriptions.Item label="事件描述" span={2}>
                                {eventDetail.description}（AI合成）
                            </Descriptions.Item>
                        </Descriptions>

                        {eventDetail.keywords && eventDetail.keywords.length > 0 && (
                            <div style={{ marginBottom: 24 }}>
                                <h4>相关概念</h4>
                                {eventDetail.keywords.map((keyword, index) => (
                                    <Tag key={index} color="blue" style={{ marginBottom: 8 }}>
                                        {keyword}
                                    </Tag>
                                ))}
                            </div>
                        )}

                        {eventDetail.related_stocks && eventDetail.related_stocks.length > 0 && (
                            <div>
                                <h4>相关股票</h4>
                                <List
                                    size="small"
                                    dataSource={eventDetail.related_stocks}
                                    renderItem={stock => (
                                        <List.Item
                                            actions={[
                                                <Button
                                                    type="primary"
                                                    size="small"
                                                    onClick={() => {
                                                        const stockCode = stock.stock_code.split('.')[0];
                                                        window.open(`https://valuefrontier.cn/company?scode=${stockCode}`, '_blank');
                                                    }}
                                                >
                                                    股票详情
                                                </Button>
                                            ]}
                                        >
                                            <List.Item.Meta
                                                title={`${stock.stock_name} (${stock.stock_code})`}
                                                description={getRelationDesc(stock.relation_desc) ? `${getRelationDesc(stock.relation_desc)}（AI合成）` : ''}
                                            />
                                            {stock.change !== null && (
                                                <Tag color={stock.change > 0 ? 'red' : 'green'}>
                                                    {stock.change > 0 ? '+' : ''}{stock.change.toFixed(2)}%
                                                </Tag>
                                            )}
                                        </List.Item>
                                    )}
                                />
                            </div>
                        )}

                        {/* 讨论区 */}
                        <div style={{ marginTop: 24 }}>
                            <h4>讨论区</h4>

                            {/* 评论列表 */}
                            <div style={{ marginBottom: 24 }}>
                                <Spin spinning={commentsLoading}>
                                    {comments.length === 0 ? (
                                        <Empty
                                            description="暂无评论"
                                            style={{ padding: '20px 0' }}
                                        />
                                    ) : (
                                        <List
                                            itemLayout="vertical"
                                            dataSource={comments}
                                            renderItem={comment => (
                                                <List.Item key={comment.id}>
                                                    <List.Item.Meta
                                                        title={
                                                            <div style={{ fontSize: '14px' }}>
                                                                <strong>{comment.author?.username || 'Anonymous'}</strong>
                                                                <span style={{ marginLeft: 8, color: '#999', fontWeight: 'normal' }}>
                                                                    {moment(comment.created_at).format('MM-DD HH:mm')}
                                                                </span>
                                                            </div>
                                                        }
                                                        description={
                                                            <div style={{
                                                                fontSize: '14px',
                                                                lineHeight: '1.6',
                                                                marginTop: 8
                                                            }}>
                                                                {comment.content}
                                                            </div>
                                                        }
                                                    />
                                                </List.Item>
                                            )}
                                        />
                                    )}
                                </Spin>
                            </div>

                            {/* 评论输入框（登录后可用，未登录后端会返回401） */}
                            <div>
                                <h4>发表评论</h4>
                                <Input.TextArea
                                    placeholder="说点什么..."
                                    rows={3}
                                    value={commentText}
                                    onChange={(e) => setCommentText(e.target.value)}
                                    maxLength={500}
                                    showCount
                                />
                                <div style={{ textAlign: 'right', marginTop: 8 }}>
                                    <Button type="primary" loading={submitting} onClick={handleSubmitComment}>
                                        发布
                                    </Button>
                                </div>
                            </div>
                        </div>
                    </>
                )}
            </Spin>
        </Modal>
    );
};

export default EventDetailModal;