// src/views/EventDetail/components/RelatedStocks.js - 完整修改版本

import React, { useState, useEffect, useCallback, useRef } from 'react';
import {
    Box,
    HStack,
    VStack,
    Text,
    Button,
    Badge,
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalCloseButton,
    ModalBody,
    ModalFooter,
    useDisclosure,
    Skeleton,
    Alert,
    AlertIcon,
    Table,
    Thead,
    Tbody,
    Tr,
    Th,
    Td,
    TableContainer,
    Input,
    Textarea,
    FormControl,
    FormLabel,
    ButtonGroup,
    IconButton,
    Tooltip,
    useColorModeValue,
    CircularProgress,
    CircularProgressLabel,
    Flex,
    Spacer,
    useToast
} from '@chakra-ui/react';
import {
    FaPlus,
    FaTrash,
    FaChartLine,
    FaRedo,
    FaSearch
} from 'react-icons/fa';
import * as echarts from 'echarts';
import StockChartModal from '../../../components/StockChart/StockChartModal';

import { eventService, stockService } from '../../../services/eventService';
import { logger } from '../../../utils/logger';

const RelatedStocks = ({
                           eventId,
                           eventTime, // 新增：从父组件传递事件时间
                           stocks = [],
                           loading = false,
                           error = null,
                           onStockAdded = () => {},
                           onStockDeleted = () => {}
                       }) => {
    // ==================== 状态管理 ====================
    const [stocksData, setStocksData] = useState(stocks);
    const [quotes, setQuotes] = useState({});
    const [quotesLoading, setQuotesLoading] = useState(false);
    const [selectedStock, setSelectedStock] = useState(null);
    const [searchTerm, setSearchTerm] = useState('');
    const [sortField, setSortField] = useState('correlation');
    const [sortOrder, setSortOrder] = useState('desc');

    // 模态框状态
    const {
        isOpen: isChartModalOpen,
        onOpen: onChartModalOpen,
        onClose: onChartModalClose
    } = useDisclosure();


    // 主题和工具
    const toast = useToast();
    const tableBg = useColorModeValue('white', 'gray.800');
    const borderColor = useColorModeValue('gray.200', 'gray.600');

    // ==================== 副作用处理 ====================
    useEffect(() => {
        setStocksData(stocks);
    }, [stocks]);

    useEffect(() => {
        if (stocksData.length > 0) {
            fetchQuotes();
        }
    }, [stocksData, eventTime]); // 添加 eventTime 依赖

    // ==================== API 调用函数 ====================
    const fetchQuotes = useCallback(async () => {
        if (stocksData.length === 0) return;

        try {
            setQuotesLoading(true);
            const codes = stocksData.map(stock => stock.stock_code);

            logger.debug('RelatedStocks', '获取股票报价', {
                codes,
                eventTime,
                stockCount: codes.length
            });

            const response = await stockService.getQuotes(codes, eventTime);
            logger.debug('RelatedStocks', '股票报价响应', {
                hasResponse: !!response,
                quotesCount: response ? Object.keys(response).length : 0
            });

            setQuotes(response || {});
        } catch (err) {
            logger.error('RelatedStocks', 'fetchQuotes', err, {
                stockCount: stocksData.length,
                eventTime
            });
            toast({
                title: '获取股票报价失败',
                description: err.message,
                status: 'error',
                duration: 3000,
                isClosable: true,
            });
        } finally {
            setQuotesLoading(false);
        }
    }, [stocksData, eventTime, toast]);

    const handleRefreshQuotes = () => {
        fetchQuotes();
        toast({
            title: '正在刷新报价...',
            status: 'info',
            duration: 2000,
            isClosable: true,
        });
    };


    const handleDeleteStock = async (stockId, stockCode) => {
        if (!window.confirm(`确定要删除股票 ${stockCode} 吗？`)) {
            return;
        }

        try {
            await eventService.deleteRelatedStock(stockId);

            toast({
                title: '删除成功',
                status: 'success',
                duration: 3000,
                isClosable: true,
            });

            onStockDeleted();
        } catch (err) {
            toast({
                title: '删除失败',
                description: err.message,
                status: 'error',
                duration: 5000,
                isClosable: true,
            });
        }
    };

    const handleShowChart = (stock) => {
        setSelectedStock(stock);
        onChartModalOpen();
    };

    // ==================== 辅助函数 ====================
    const getCorrelationColor = (correlation) => {
        const value = (correlation || 0) * 100;
        if (value >= 80) return 'red';
        if (value >= 60) return 'orange';
        return 'green';
    };

    const formatPriceChange = (change) => {
        if (!change && change !== 0) return '--';
        const prefix = change > 0 ? '+' : '';
        return `${prefix}${change.toFixed(2)}%`;
    };

    const getStockName = (stock) => {
        // 优先使用API返回的名称
        const quote = quotes[stock.stock_code];
        if (quote && quote.name) {
            return quote.name;
        }

        // 其次使用数据库中的名称
        if (stock.stock_name) {
            return stock.stock_name;
        }

        // 最后使用默认格式
        return `股票${stock.stock_code.split('.')[0]}`;
    };

    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 filteredAndSortedStocks = stocksData
        .filter(stock => {
            const stockName = getStockName(stock);
            return stock.stock_code.toLowerCase().includes(searchTerm.toLowerCase()) ||
                stockName.toLowerCase().includes(searchTerm.toLowerCase());
        })
        .sort((a, b) => {
            let aValue, bValue;

            switch (sortField) {
                case 'correlation':
                    aValue = a.correlation || 0;
                    bValue = b.correlation || 0;
                    break;
                case 'change':
                    aValue = quotes[a.stock_code]?.change || 0;
                    bValue = quotes[b.stock_code]?.change || 0;
                    break;
                case 'price':
                    aValue = quotes[a.stock_code]?.price || 0;
                    bValue = quotes[b.stock_code]?.price || 0;
                    break;
                default:
                    aValue = a[sortField] || '';
                    bValue = b[sortField] || '';
            }

            if (sortOrder === 'asc') {
                return aValue > bValue ? 1 : -1;
            } else {
                return aValue < bValue ? 1 : -1;
            }
        });

    // ==================== 渲染状态 ====================
    if (loading) {
        return (
            <VStack spacing={4}>
                {[1, 2, 3].map((i) => (
                    <HStack key={`skeleton-${i}`} w="100%" spacing={4}>
                        <Skeleton height="20px" width="100px" />
                        <Skeleton height="20px" width="150px" />
                        <Skeleton height="20px" width="80px" />
                        <Skeleton height="20px" width="100px" />
                        <Skeleton height="20px" width="60px" />
                        <Skeleton height="20px" width="120px" />
                    </HStack>
                ))}
            </VStack>
        );
    }

    if (error) {
        return (
            <Alert status="error" borderRadius="lg">
                <AlertIcon />
                加载相关股票失败: {error}
            </Alert>
        );
    }

    // ==================== 主要渲染 ====================
    return (
        <>
            {/* 工具栏 */}
            <Flex mb={4} align="center" wrap="wrap" gap={4}>
                {/* 搜索框 */}
                <HStack>
                    <FaSearch />
                    <Input
                        placeholder="搜索股票代码或名称..."
                        value={searchTerm}
                        onChange={(e) => setSearchTerm(e.target.value)}
                        size="sm"
                        maxW="200px"
                    />
                </HStack>

                <Spacer />

                {/* 操作按钮 */}
                <HStack>
                    <Tooltip label="刷新报价">
                        <IconButton
                            icon={<FaRedo />}
                            size="sm"
                            onClick={handleRefreshQuotes}
                            isLoading={quotesLoading}
                            aria-label="刷新报价"
                        />
                    </Tooltip>

                </HStack>
            </Flex>

            {/* 股票表格 */}
            <Box bg={tableBg} borderRadius="lg" overflow="hidden" border="1px solid" borderColor={borderColor}>
                <TableContainer>
                    <Table size="sm">
                        <Thead>
                            <Tr>
                                <Th cursor="pointer" onClick={() => {
                                    if (sortField === 'stock_code') {
                                        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
                                    } else {
                                        setSortField('stock_code');
                                        setSortOrder('asc');
                                    }
                                }}>
                                    股票代码 {sortField === 'stock_code' && (sortOrder === 'asc' ? '↑' : '↓')}
                                </Th>
                                <Th>股票名称</Th>
                                <Th>产业链</Th>
                                <Th isNumeric cursor="pointer" onClick={() => {
                                    if (sortField === 'price') {
                                        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
                                    } else {
                                        setSortField('price');
                                        setSortOrder('desc');
                                    }
                                }}>
                                    最新价 {sortField === 'price' && (sortOrder === 'asc' ? '↑' : '↓')}
                                </Th>
                                <Th isNumeric cursor="pointer" onClick={() => {
                                    if (sortField === 'change') {
                                        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
                                    } else {
                                        setSortField('change');
                                        setSortOrder('desc');
                                    }
                                }}>
                                    涨跌幅 {sortField === 'change' && (sortOrder === 'asc' ? '↑' : '↓')}
                                </Th>
                                <Th textAlign="center" cursor="pointer" onClick={() => {
                                    if (sortField === 'correlation') {
                                        setSortOrder(sortOrder === 'asc' ? 'desc' : 'asc');
                                    } else {
                                        setSortField('correlation');
                                        setSortOrder('desc');
                                    }
                                }}>
                                    相关度 {sortField === 'correlation' && (sortOrder === 'asc' ? '↑' : '↓')}
                                </Th>
                                <Th>关联描述</Th>
                                <Th>操作</Th>
                            </Tr>
                        </Thead>
                        <Tbody>
                            {filteredAndSortedStocks.length === 0 ? (
                                <Tr>
                                    <Td colSpan={9} textAlign="center" py={8} color="gray.500">
                                        {searchTerm ? '未找到匹配的股票' : '暂无相关股票数据'}
                                    </Td>
                                </Tr>
                            ) : (
                                filteredAndSortedStocks.map((stock) => {
                                    const quote = quotes[stock.stock_code] || {};
                                    const correlation = (stock.correlation || 0) * 100;
                                    const stockName = getStockName(stock);

                                    return (
                                        <Tr key={stock.id} _hover={{ bg: useColorModeValue('gray.50', 'gray.700') }}>
                                            {/* 股票代码 */}
                                            <Td>
                                                <Button
                                                    variant="link"
                                                    color="blue.500"
                                                    fontFamily="mono"
                                                    fontWeight="bold"
                                                    p={0}
                                                    onClick={() => handleShowChart(stock)}
                                                >
                                                    {stock.stock_code}
                                                </Button>
                                            </Td>

                                            {/* 股票名称 */}
                                            <Td>
                                                <VStack align="flex-start" spacing={0}>
                                                    <Text fontSize="sm" fontWeight="medium">
                                                        {stockName}
                                                    </Text>
                                                    {quotesLoading && (
                                                        <Text fontSize="xs" color="gray.500">
                                                            加载中...
                                                        </Text>
                                                    )}
                                                </VStack>
                                            </Td>

                                            {/* 产业链 */}
                                            <Td>
                                                <Badge size="sm" variant="outline">
                                                    {stock.sector || '未知'}
                                                </Badge>
                                            </Td>

                                            {/* 最新价 */}
                                            <Td isNumeric>
                                                <Text fontSize="sm" fontWeight="medium">
                                                    {quote.price ? `¥${quote.price.toFixed(2)}` : '--'}
                                                </Text>
                                            </Td>

                                            {/* 涨跌幅 */}
                                            <Td isNumeric>
                                                <Badge
                                                    colorScheme={
                                                        !quote.change ? 'gray' :
                                                            quote.change > 0 ? 'red' :
                                                                quote.change < 0 ? 'green' : 'gray'
                                                    }
                                                    size="sm"
                                                >
                                                    {formatPriceChange(quote.change)}
                                                </Badge>
                                            </Td>


                                            {/* 相关度 */}
                                            <Td textAlign="center">
                                                <CircularProgress
                                                    value={correlation}
                                                    color={getCorrelationColor(stock.correlation)}
                                                    size="50px"
                                                >
                                                    <CircularProgressLabel fontSize="xs">
                                                        {Math.round(correlation)}%
                                                    </CircularProgressLabel>
                                                </CircularProgress>
                                            </Td>

                                            {/* 关联描述 */}
                                            <Td maxW="200px">
                                                <Text fontSize="xs" noOfLines={2}>
                                                    {getRelationDesc(stock.relation_desc)}
                                                </Text>
                                            </Td>

                                            {/* 操作 */}
                                            <Td>
                                                <HStack spacing={1}>
                                                    <Tooltip label="股票详情">
                                                        <Button
                                                            size="xs"
                                                            colorScheme="blue"
                                                            variant="solid"
                                                            onClick={() => {
                                                                const stockCode = stock.stock_code.split('.')[0];
                                                                window.open(`https://valuefrontier.cn/company?scode=${stockCode}`, '_blank');
                                                            }}
                                                        >
                                                            股票详情
                                                        </Button>
                                                    </Tooltip>

                                                    <Tooltip label="查看K线图">
                                                        <IconButton
                                                            icon={<FaChartLine />}
                                                            size="xs"
                                                            onClick={() => handleShowChart(stock)}
                                                            aria-label="查看K线图"
                                                        />
                                                    </Tooltip>

                                                    <Tooltip label="删除">
                                                        <IconButton
                                                            icon={<FaTrash />}
                                                            size="xs"
                                                            colorScheme="red"
                                                            variant="ghost"
                                                            onClick={() => handleDeleteStock(stock.id, stock.stock_code)}
                                                            aria-label="删除股票"
                                                        />
                                                    </Tooltip>
                                                </HStack>
                                            </Td>
                                        </Tr>
                                    );
                                })
                            )}
                        </Tbody>
                    </Table>
                </TableContainer>
            </Box>


            {/* 股票图表模态框 */}
            <StockChartModal
                isOpen={isChartModalOpen}
                onClose={onChartModalClose}
                stock={selectedStock}
                eventTime={eventTime}
            />
        </>
    );
};

// ==================== 子组件 ====================



// 现在使用统一的StockChartModal组件，无需重复代码

export default RelatedStocks;