// src/views/EventDetail/components/RelatedConcepts.js - 支持概念API调用

import React, { useState, useEffect } from 'react';
import {
    Icon,  // 明确导入 Icon 组件
    Box,
    VStack,
    HStack,
    Text,
    Badge,
    SimpleGrid,
    Image,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalCloseButton,
    ModalBody,
    useDisclosure,
    Skeleton,
    Alert,
    AlertIcon,
    Card,
    CardBody,
    useColorModeValue,
    IconButton,
    Tooltip,
    Button,
    Center,
    Divider
} from '@chakra-ui/react';
import { FaEye, FaExternalLinkAlt, FaChartLine, FaCalendarAlt } from 'react-icons/fa';
import moment from 'moment';
import tradingDayUtils from '../../../utils/tradingDayUtils'; // 引入交易日工具

// API配置
const API_BASE_URL = process.env.NODE_ENV === 'production' ? '/concept-api' : 'https://valuefrontier.cn/concept-api';

// 增强版 ConceptCard 组件 - 展示更多数据细节
const ConceptCard = ({ concept, tradingDate, onViewDetails }) => {
    const [isExpanded, setIsExpanded] = useState(false);
    const cardBg = useColorModeValue('white', 'gray.800');
    const borderColor = useColorModeValue('gray.200', 'gray.600');
    const textColor = useColorModeValue('gray.600', 'gray.400');
    const highlightBg = useColorModeValue('yellow.50', 'yellow.900');

    // 计算涨跌幅颜色和符号
    const changeColor = concept.price_info?.avg_change_pct > 0 ? 'red' : 'green';
    const changeSymbol = concept.price_info?.avg_change_pct > 0 ? '+' : '';
    const hasValidPriceInfo = concept.price_info && concept.price_info.avg_change_pct !== null;

    // 获取匹配类型的中文名称
    const getMatchTypeName = (type) => {
        const typeMap = {
            'hybrid_knn': '混合匹配',
            'keyword': '关键词匹配',
            'semantic': '语义匹配'
        };
        return typeMap[type] || type;
    };

    // 处理概念点击
    const handleConceptClick = () => {
        window.open(`https://valuefrontier.cn/htmls/${encodeURIComponent(concept.concept)}.html`, '_blank');
    };

    return (
        <Card
            bg={cardBg}
            borderColor={borderColor}
            borderWidth={2}
            _hover={{
                transform: 'translateY(-2px)',
                shadow: 'xl',
                borderColor: 'blue.400'
            }}
            transition="all 0.3s"
        >
            <CardBody p={5}>
                <VStack spacing={4} align="stretch">
                    {/* 头部信息 */}
                    <Box>
                        <HStack justify="space-between" align="flex-start" mb={2}>
                            <VStack align="start" spacing={1} flex={1}>
                                <Text fontSize="lg" fontWeight="bold" color="blue.600">
                                    {concept.concept}
                                </Text>
                                <HStack spacing={2} flexWrap="wrap">
                                    <Badge colorScheme="purple" fontSize="xs">
                                        相关度: {concept.score.toFixed(2)}
                                    </Badge>
                                    <Badge colorScheme="teal" fontSize="xs">
                                        {getMatchTypeName(concept.match_type)}
                                    </Badge>
                                    <Badge colorScheme="orange" fontSize="xs">
                                        {concept.stock_count} 只股票
                                    </Badge>
                                </HStack>
                            </VStack>
                            
                            {hasValidPriceInfo && (
                                <Box textAlign="right">
                                    <Text fontSize="xs" color={textColor} mb={1}>
                                        {tradingDate || concept.price_info.trade_date}
                                    </Text>
                                    <Badge 
                                        size="lg" 
                                        colorScheme={changeColor}
                                        fontSize="md"
                                        px={3}
                                        py={1}
                                    >
                                        {changeSymbol}{concept.price_info.avg_change_pct?.toFixed(2)}%
                                    </Badge>
                                </Box>
                            )}
                        </HStack>
                    </Box>

                    <Divider />

                    {/* 概念描述 */}
                    <Box>
                        <Text 
                            fontSize="sm" 
                            color={textColor} 
                            noOfLines={isExpanded ? undefined : 4}
                            lineHeight="1.6"
                        >
                            {concept.description}
                        </Text>
                        {concept.description && concept.description.length > 200 && (
                            <Button
                                size="xs"
                                variant="link"
                                colorScheme="blue"
                                mt={1}
                                onClick={(e) => {
                                    e.stopPropagation();
                                    setIsExpanded(!isExpanded);
                                }}
                            >
                                {isExpanded ? '收起' : '展开更多'}
                            </Button>
                        )}
                    </Box>

                    {/* 历史发生时间 */}
                    {concept.happened_times && concept.happened_times.length > 0 && (
                        <Box>
                            <Text fontSize="xs" fontWeight="semibold" mb={2} color={textColor}>
                                历史触发时间：
                            </Text>
                            <HStack spacing={2} flexWrap="wrap">
                                {concept.happened_times.map((time, idx) => (
                                    <Badge key={idx} variant="subtle" colorScheme="gray" fontSize="xs">
                                        {time}
                                    </Badge>
                                ))}
                            </HStack>
                        </Box>
                    )}

                    {/* 相关股票展示 - 增强版 */}
                    {concept.stocks && concept.stocks.length > 0 && (
                        <Box>
                            <HStack justify="space-between" mb={2}>
                                <Text fontSize="sm" fontWeight="semibold" color={textColor}>
                                    核心相关股票
                                </Text>
                                <Text fontSize="xs" color="gray.500">
                                    共 {concept.stock_count} 只
                                </Text>
                            </HStack>
                            
                            <SimpleGrid columns={{ base: 1, md: 2 }} spacing={2}>
                                {concept.stocks.slice(0, isExpanded ? 8 : 4).map((stock, idx) => (
                                    <Box 
                                        key={idx}
                                        p={2}
                                        borderRadius="md"
                                        bg={useColorModeValue('gray.50', 'gray.700')}
                                        fontSize="xs"
                                    >
                                        <HStack justify="space-between">
                                            <Text fontWeight="semibold">
                                                {stock.stock_name}
                                            </Text>
                                            <Badge size="sm" variant="outline">
                                                {stock.stock_code}
                                            </Badge>
                                        </HStack>
                                        {stock.reason && (
                                            <Text fontSize="xs" color={textColor} mt={1} noOfLines={2}>
                                                {stock.reason}
                                            </Text>
                                        )}
                                    </Box>
                                ))}
                            </SimpleGrid>
                            
                            {concept.stocks.length > 4 && !isExpanded && (
                                <Button
                                    size="xs"
                                    variant="ghost"
                                    colorScheme="blue"
                                    mt={2}
                                    onClick={(e) => {
                                        e.stopPropagation();
                                        setIsExpanded(true);
                                    }}
                                >
                                    查看更多股票
                                </Button>
                            )}
                        </Box>
                    )}

                    {/* 操作按钮 */}
                    <HStack spacing={2} pt={2}>
                        <Button
                            size="sm"
                            colorScheme="blue"
                            leftIcon={<FaChartLine />}
                            flex={1}
                            onClick={(e) => {
                                e.stopPropagation();
                                handleConceptClick();
                            }}
                        >
                            查看概念详情
                        </Button>
                        <Button
                            size="sm"
                            variant="outline"
                            colorScheme="blue"
                            leftIcon={<FaEye />}
                            flex={1}
                            onClick={(e) => {
                                e.stopPropagation();
                                onViewDetails(concept);
                            }}
                        >
                            快速预览
                        </Button>
                    </HStack>
                </VStack>
            </CardBody>
        </Card>
    );
};

// 主组件 - 修改为接收事件信息并调用API
const RelatedConcepts = ({ eventTitle, eventTime, eventId, loading: externalLoading, error: externalError }) => {
    // 调试：检查 Icon 组件是否可用
    if (typeof Icon === 'undefined') {
        console.error('Icon component is not defined! Make sure @chakra-ui/react is properly imported.');
        return <div>组件加载错误：Icon 组件未定义</div>;
    }
    
    const { isOpen, onOpen, onClose } = useDisclosure();
    const [selectedConcept, setSelectedConcept] = useState(null);
    const [concepts, setConcepts] = useState([]);
    const [loading, setLoading] = useState(false);
    const [error, setError] = useState(null);
    const [effectiveTradingDate, setEffectiveTradingDate] = useState(null);
    const bgColor = useColorModeValue('blue.50', 'blue.900');
    const textColor = useColorModeValue('gray.600', 'gray.400');

    // 数据验证函数
    const validateConceptData = (data) => {
        if (!data || typeof data !== 'object') {
            throw new Error('Invalid response data format');
        }
        
        // 验证新的API格式
        if (data.results && Array.isArray(data.results)) {
            return data.results.every(item => 
                item && 
                typeof item === 'object' && 
                (item.concept || item.concept_id) &&
                typeof item.score === 'number'
            );
        }
        
        // 验证旧的API格式
        if (data.data && data.data.concepts && Array.isArray(data.data.concepts)) {
            return data.data.concepts.every(item => 
                item && 
                typeof item === 'object' && 
                (item.concept || item.concept_id) &&
                typeof item.score === 'number'
            );
        }
        
        return false;
    };

    // 搜索相关概念
    const searchConcepts = async (title, tradeDate) => {
        try {
            setLoading(true);
            setError(null);
            
            // 确保tradeDate是字符串格式
            let formattedTradeDate;
            if (typeof tradeDate === 'string') {
                formattedTradeDate = tradeDate;
            } else if (tradeDate instanceof Date) {
                formattedTradeDate = moment(tradeDate).format('YYYY-MM-DD');
            } else if (moment.isMoment(tradeDate)) {
                formattedTradeDate = tradeDate.format('YYYY-MM-DD');
            } else {
                console.warn('Invalid tradeDate format:', tradeDate, typeof tradeDate);
                formattedTradeDate = moment().format('YYYY-MM-DD');
            }
            
            const requestBody = {
                query: title,
                size: 4,
                page: 1,
                sort_by: "_score",
                trade_date: formattedTradeDate
            };

            console.log('Searching concepts with:', requestBody);

            const response = await fetch(`${API_BASE_URL}/search`, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify(requestBody)
            });

            if (!response.ok) {
                throw new Error(`HTTP error! status: ${response.status}`);
            }

            const data = await response.json();
            console.log('Concept search response:', data);

            // 数据验证
            if (!validateConceptData(data)) {
                console.warn('Invalid concept data format:', data);
                setConcepts([]);
                setError('返回的数据格式无效');
                return;
            }

            // 修复：适配实际的API响应格式
            if (data.results && Array.isArray(data.results)) {
                setConcepts(data.results);
                // 使用传入的交易日期作为生效日期
                setEffectiveTradingDate(formattedTradeDate);
            } else if (data.data && data.data.concepts) {
                // 保持向后兼容
                setConcepts(data.data.concepts);
                setEffectiveTradingDate(data.data.trade_date || formattedTradeDate);
            } else {
                setConcepts([]);
                console.warn('No concepts found in response');
            }
        } catch (err) {
            console.error('Failed to search concepts:', err);
            setError(err.message);
            setConcepts([]);
        } finally {
            setLoading(false);
        }
    };

    // 当事件信息变化时，调用API搜索概念
    useEffect(() => {
        if (eventTitle && eventTime) {
            // 格式化日期为 YYYY-MM-DD
            let formattedDate;
            try {
                // eventTime 可能是Date对象或字符串，使用 moment 处理
                let eventMoment;
                
                // 检查是否是Date对象
                if (eventTime instanceof Date) {
                    eventMoment = moment(eventTime);
                } else if (typeof eventTime === 'string') {
                    eventMoment = moment(eventTime);
                } else if (typeof eventTime === 'number') {
                    eventMoment = moment(eventTime);
                } else {
                    console.warn('Unknown eventTime format:', eventTime, typeof eventTime);
                    eventMoment = moment();
                }
                
                // 确保moment对象有效
                if (!eventMoment.isValid()) {
                    console.warn('Invalid eventTime:', eventTime);
                    eventMoment = moment();
                }
                
                formattedDate = eventMoment.format('YYYY-MM-DD');
                
                // 如果时间是15:00之后，获取下一个交易日
                if (eventMoment.hour() >= 15) {
                    // 使用 tradingDayUtils 获取下一个交易日
                    if (tradingDayUtils && tradingDayUtils.getNextTradingDay) {
                        const nextTradingDay = tradingDayUtils.getNextTradingDay(formattedDate);
                        // 确保返回的是字符串格式
                        if (typeof nextTradingDay === 'string') {
                            formattedDate = nextTradingDay;
                        } else if (nextTradingDay instanceof Date) {
                            formattedDate = moment(nextTradingDay).format('YYYY-MM-DD');
                        } else {
                            console.warn('tradingDayUtils.getNextTradingDay returned invalid format:', nextTradingDay);
                            formattedDate = eventMoment.add(1, 'day').format('YYYY-MM-DD');
                        }
                    } else {
                        // 降级处理：简单地加一天（不考虑周末和节假日）
                        console.warn('tradingDayUtils.getNextTradingDay not available, using simple date addition');
                        formattedDate = eventMoment.add(1, 'day').format('YYYY-MM-DD');
                    }
                }
            } catch (e) {
                console.error('Failed to format event time:', e);
                // 使用当前交易日作为fallback
                if (tradingDayUtils && tradingDayUtils.getCurrentTradingDay) {
                    const currentTradingDay = tradingDayUtils.getCurrentTradingDay();
                    // 确保返回的是字符串格式
                    if (typeof currentTradingDay === 'string') {
                        formattedDate = currentTradingDay;
                    } else if (currentTradingDay instanceof Date) {
                        formattedDate = moment(currentTradingDay).format('YYYY-MM-DD');
                    } else {
                        console.warn('tradingDayUtils.getCurrentTradingDay returned invalid format:', currentTradingDay);
                        formattedDate = moment().format('YYYY-MM-DD');
                    }
                } else {
                    formattedDate = moment().format('YYYY-MM-DD');
                }
            }

            searchConcepts(eventTitle, formattedDate);
        } else if (!eventTitle) {
            console.warn('No event title provided for concept search');
            setConcepts([]);
        }
    }, [eventTitle, eventTime]);

    const handleViewDetails = (concept) => {
        setSelectedConcept(concept);
        onOpen();
    };

    // 合并加载状态
    const isLoading = externalLoading || loading;
    const displayError = externalError || error;

    // 加载状态
    if (isLoading) {
        return (
            <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
                {[1, 2, 3, 4].map((i) => (
                    <Box key={i}>
                        <Skeleton height="200px" borderRadius="lg" />
                    </Box>
                ))}
            </SimpleGrid>
        );
    }

    // 错误状态
    if (displayError) {
        return (
            <Alert status="error" borderRadius="lg">
                <AlertIcon />
                加载相关概念失败: {displayError}
            </Alert>
        );
    }

    // 无数据状态
    if (!concepts || concepts.length === 0) {
        return (
            <Box textAlign="center" py={8}>
                <Text color="gray.500" mb={4}>
                    {eventTitle ? '未找到相关概念' : '暂无相关概念数据'}
                </Text>
                <Button
                    colorScheme="blue"
                    size="lg"
                    leftIcon={<FaChartLine />}
                    onClick={() => window.open('https://valuefrontier.cn/concepts', '_blank')}
                >
                    进入概念中心
                </Button>
            </Box>
        );
    }

    return (
        <>
            {/* 如果有交易日期，显示日期信息 */}
            {effectiveTradingDate && (
                <Box mb={4} p={3} bg={bgColor} borderRadius="md">
                    <HStack spacing={2}>
                        <FaCalendarAlt color={textColor} />
                        <Text fontSize="sm" color={textColor}>
                            涨跌幅数据日期：{effectiveTradingDate}
                            {eventTime && effectiveTradingDate !== moment(eventTime).format('YYYY-MM-DD') && (
                                <Text as="span" ml={2} fontSize="xs">
                                    (事件发生于 {typeof eventTime === 'object' ? moment(eventTime).format('YYYY-MM-DD HH:mm') : eventTime}，显示下一交易日数据)
                                </Text>
                            )}
                        </Text>
                    </HStack>
                </Box>
            )}

            {/* 概念卡片网格 */}
            <SimpleGrid columns={{ base: 1, md: 2 }} spacing={4}>
                {concepts.map((concept, index) => (
                    <ConceptCard
                        key={concept.concept_id || index}
                        concept={concept}
                        tradingDate={effectiveTradingDate}
                        onViewDetails={handleViewDetails}
                    />
                ))}
            </SimpleGrid>

            {/* 进入概念中心按钮 */}
            <Center mt={8}>
                <VStack spacing={3}>
                    <Button
                        colorScheme="blue"
                        size="lg"
                        leftIcon={<FaChartLine />}
                        onClick={() => window.open('https://valuefrontier.cn/concepts', '_blank')}
                        px={8}
                        py={6}
                        fontSize="md"
                        fontWeight="bold"
                        bgGradient="linear(to-r, blue.400, cyan.400)"
                        _hover={{
                            bgGradient: "linear(to-r, blue.500, cyan.500)",
                            transform: "translateY(-2px)",
                            shadow: "lg"
                        }}
                        transition="all 0.2s"
                    >
                        进入概念中心
                    </Button>
                    <Text fontSize="sm" color="gray.500">
                        探索更多概念板块，发现投资机会
                    </Text>
                </VStack>
            </Center>

            {/* 增强版概念详情模态框 */}
            <Modal isOpen={isOpen} onClose={onClose} size="3xl">
                <ModalOverlay />
                <ModalContent maxH="90vh">
                    <ModalHeader borderBottomWidth={1}>
                        <HStack justify="space-between">
                            <VStack align="start" spacing={1}>
                                <Text fontSize="xl">{selectedConcept?.concept}</Text>
                                <HStack spacing={2}>
                                    <Badge colorScheme="purple">
                                        相关度: {selectedConcept?.score?.toFixed(2)}
                                    </Badge>
                                    <Badge colorScheme="teal">
                                        {selectedConcept?.stock_count} 只股票
                                    </Badge>
                                </HStack>
                            </VStack>
                            {selectedConcept?.price_info && (
                                <VStack align="end" spacing={1}>
                                    <Text fontSize="xs" color="gray.500">
                                        {selectedConcept.price_info.trade_date || '暂无数据'}
                                    </Text>
                                    <Badge 
                                        size="lg" 
                                        colorScheme={selectedConcept.price_info.avg_change_pct > 0 ? 'red' : 'green'}
                                        fontSize="lg"
                                        px={4}
                                        py={2}
                                    >
                                        {selectedConcept.price_info.avg_change_pct > 0 ? '+' : ''}
                                        {selectedConcept.price_info.avg_change_pct?.toFixed(2) || '0.00'}%
                                    </Badge>
                                </VStack>
                            )}
                        </HStack>
                    </ModalHeader>
                    <ModalCloseButton />

                    <ModalBody pb={6} overflowY="auto">
                        <VStack spacing={6} align="stretch">
                            {/* 概念描述 - 完整版 */}
                            {selectedConcept?.description && (
                                <Box>
                                    <HStack mb={3}>
                                        <Icon as={FaChartLine} color="blue.500" />
                                        <Text fontSize="md" fontWeight="bold">
                                            概念解析
                                        </Text>
                                    </HStack>
                                    <Box 
                                        p={4} 
                                        bg={useColorModeValue('blue.50', 'blue.900')}
                                        borderRadius="md"
                                    >
                                        <Text 
                                            fontSize="sm" 
                                            color={useColorModeValue('gray.700', 'gray.300')}
                                            lineHeight="1.8"
                                        >
                                            {selectedConcept.description}
                                        </Text>
                                    </Box>
                                </Box>
                            )}

                            {/* 历史触发时间线 */}
                            {selectedConcept?.happened_times && selectedConcept.happened_times.length > 0 && (
                                <Box>
                                    <HStack mb={3}>
                                        <Icon as={FaCalendarAlt} color="purple.500" />
                                        <Text fontSize="md" fontWeight="bold">
                                            历史触发时间
                                        </Text>
                                    </HStack>
                                    <HStack spacing={3} flexWrap="wrap">
                                        {selectedConcept.happened_times.map((time, idx) => (
                                            <Badge 
                                                key={idx} 
                                                colorScheme="purple"
                                                variant="subtle"
                                                px={3}
                                                py={1}
                                            >
                                                {time}
                                            </Badge>
                                        ))}
                                    </HStack>
                                </Box>
                            )}

                            {/* 相关股票详细列表 */}
                            {selectedConcept?.stocks && selectedConcept.stocks.length > 0 && (
                                <Box>
                                    <HStack mb={3}>
                                        <Icon as={FaEye} color="green.500" />
                                        <Text fontSize="md" fontWeight="bold">
                                            核心相关股票 ({selectedConcept.stock_count}只)
                                        </Text>
                                    </HStack>
                                    <Box 
                                        maxH="300px" 
                                        overflowY="auto"
                                        borderWidth={1}
                                        borderRadius="md"
                                        p={3}
                                    >
                                        <SimpleGrid columns={{ base: 1, md: 2 }} spacing={3}>
                                            {selectedConcept.stocks.map((stock, idx) => (
                                                <Box
                                                    key={idx}
                                                    p={3}
                                                    borderWidth={1}
                                                    borderRadius="md"
                                                    bg={useColorModeValue('white', 'gray.700')}
                                                    _hover={{
                                                        bg: useColorModeValue('gray.50', 'gray.600'),
                                                        borderColor: 'blue.300'
                                                    }}
                                                    transition="all 0.2s"
                                                >
                                                    <HStack justify="space-between" mb={2}>
                                                        <Text fontWeight="bold" fontSize="sm">
                                                            {stock.stock_name}
                                                        </Text>
                                                        <Badge colorScheme="blue" fontSize="xs">
                                                            {stock.stock_code}
                                                        </Badge>
                                                    </HStack>
                                                    {stock.reason && (
                                                        <Text fontSize="xs" color="gray.600">
                                                            {stock.reason}
                                                        </Text>
                                                    )}
                                                    {(stock.行业 || stock.项目) && (
                                                        <HStack spacing={2} mt={2}>
                                                            {stock.行业 && (
                                                                <Badge size="sm" variant="subtle">
                                                                    {stock.行业}
                                                                </Badge>
                                                            )}
                                                            {stock.项目 && (
                                                                <Badge size="sm" variant="subtle" colorScheme="green">
                                                                    {stock.项目}
                                                                </Badge>
                                                            )}
                                                        </HStack>
                                                    )}
                                                </Box>
                                            ))}
                                        </SimpleGrid>
                                    </Box>
                                </Box>
                            )}

                            {/* 操作按钮 */}
                            <HStack spacing={3} pt={4}>
                                <Button
                                    colorScheme="blue"
                                    size="lg"
                                    flex={1}
                                    onClick={() => {
                                        window.open(`https://valuefrontier.cn/htmls/${encodeURIComponent(selectedConcept.concept)}.html`, '_blank');
                                    }}
                                    leftIcon={<FaExternalLinkAlt />}
                                >
                                    查看概念详情页
                                </Button>
                                <Button
                                    variant="outline"
                                    colorScheme="blue"
                                    size="lg"
                                    flex={1}
                                    onClick={onClose}
                                >
                                    关闭
                                </Button>
                            </HStack>
                        </VStack>
                    </ModalBody>
                </ModalContent>
            </Modal>
        </>
    );
};

export default RelatedConcepts;