// src/views/TradingSimulation/components/PositionsList.js - 持仓列表组件（现代化版本）
import React, { useState } from 'react';
import {
  Box,
  Card,
  CardHeader,
  CardBody,
  Heading,
  Text,
  Button,
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  Badge,
  HStack,
  VStack,
  NumberInput,
  NumberInputField,
  NumberInputStepper,
  NumberIncrementStepper,
  NumberDecrementStepper,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalFooter,
  ModalBody,
  ModalCloseButton,
  FormControl,
  FormLabel,
  Select,
  Alert,
  AlertIcon,
  AlertDescription,
  useDisclosure,
  useToast,
  useColorModeValue,
  useColorMode,
  Icon,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  SimpleGrid,
  Flex
} from '@chakra-ui/react';
import { FiTrendingUp, FiTrendingDown, FiMinus, FiBarChart2, FiPieChart } from 'react-icons/fi';

// 导入现有的高质量组件
import BarChart from '../../../components/Charts/BarChart';
import PieChart from '../../../components/Charts/PieChart';
import IconBox from '../../../components/Icons/IconBox';
import { logger } from '../../../utils/logger';

// 计算涨跌幅的辅助函数
const calculateChange = (currentPrice, avgPrice) => {
  if (!avgPrice || avgPrice === 0) return { change: 0, changePercent: 0 };
  const change = currentPrice - avgPrice;
  const changePercent = (change / avgPrice) * 100;
  return { change, changePercent };
};

export default function PositionsList({ positions, account, onSellStock, tradingEvents }) {
  const [selectedPosition, setSelectedPosition] = useState(null);
  const [sellQuantity, setSellQuantity] = useState(0);
  const [orderType, setOrderType] = useState('MARKET');
  const [limitPrice, setLimitPrice] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [hasTracked, setHasTracked] = React.useState(false);

  const { isOpen, onOpen, onClose } = useDisclosure();
  const toast = useToast();

  const cardBg = useColorModeValue('white', 'gray.800');
  const textColor = useColorModeValue('gray.700', 'white');
  const secondaryColor = useColorModeValue('gray.500', 'gray.400');

  // 🎯 追踪持仓查看 - 组件加载时触发一次
  React.useEffect(() => {
    if (!hasTracked && positions && positions.length > 0 && tradingEvents && tradingEvents.trackSimulationHoldingsViewed) {
      const totalMarketValue = positions.reduce((sum, pos) => sum + (pos.marketValue || pos.quantity * pos.currentPrice || 0), 0);
      const totalCost = positions.reduce((sum, pos) => sum + (pos.totalCost || pos.quantity * pos.avgPrice || 0), 0);
      const totalProfit = positions.reduce((sum, pos) => sum + (pos.profit || 0), 0);

      tradingEvents.trackSimulationHoldingsViewed({
        count: positions.length,
        totalValue: totalMarketValue,
        totalCost,
        profitLoss: totalProfit,
      });
      setHasTracked(true);
    }
  }, [positions, tradingEvents, hasTracked]);

  // 格式化货币
  const formatCurrency = (amount) => {
    return new Intl.NumberFormat('zh-CN', {
      style: 'currency',
      currency: 'CNY',
      minimumFractionDigits: 2
    }).format(amount);
  };

  // 计算持仓盈亏（使用后端返回的数据）
  const calculatePositionProfit = (position) => {
    return {
      profit: position.profit || 0,
      profitPercent: position.profitRate || 0,
      currentPrice: position.currentPrice || position.avgPrice,
      marketValue: position.marketValue || (position.currentPrice * position.quantity)
    };
  };

  // 打开卖出对话框
  const handleSellClick = (position) => {
    setSelectedPosition(position);
    setSellQuantity(position.availableQuantity); // 默认全部可卖数量
    setLimitPrice(position.currentPrice?.toString() || position.avgPrice.toString());

    // 🎯 追踪卖出按钮点击
    if (tradingEvents && tradingEvents.trackSellButtonClicked) {
      tradingEvents.trackSellButtonClicked({
        stockCode: position.stockCode,
        stockName: position.stockName,
        quantity: position.quantity,
        profitLoss: position.profit || 0,
      }, 'holdings');
    }

    onOpen();
  };

  // 执行卖出
  const handleSellConfirm = async () => {
    if (!selectedPosition || sellQuantity <= 0) return;

    setIsLoading(true);
    const price = orderType === 'LIMIT' ? parseFloat(limitPrice) : selectedPosition.currentPrice || selectedPosition.avgPrice;

    try {
      const result = await onSellStock(
        selectedPosition.stockCode,
        sellQuantity,
        orderType,
        orderType === 'LIMIT' ? parseFloat(limitPrice) : null
      );

      if (result.success) {
        logger.info('PositionsList', '卖出成功', {
          stockCode: selectedPosition.stockCode,
          stockName: selectedPosition.stockName,
          quantity: sellQuantity,
          orderType,
          orderId: result.orderId
        });

        // 🎯 追踪卖出成功
        if (tradingEvents && tradingEvents.trackSimulationOrderPlaced) {
          tradingEvents.trackSimulationOrderPlaced({
            stockCode: selectedPosition.stockCode,
            stockName: selectedPosition.stockName,
            direction: 'sell',
            quantity: sellQuantity,
            price,
            orderType,
            success: true,
          });
        }

        toast({
          title: '卖出成功',
          description: `已卖出 ${selectedPosition.stockName} ${sellQuantity} 股`,
          status: 'success',
          duration: 3000,
          isClosable: true,
        });
        onClose();
      }
    } catch (error) {
      logger.error('PositionsList', 'handleSellConfirm', error, {
        stockCode: selectedPosition?.stockCode,
        stockName: selectedPosition?.stockName,
        quantity: sellQuantity,
        orderType
      });

      // 🎯 追踪卖出失败
      if (tradingEvents && tradingEvents.trackSimulationOrderPlaced) {
        tradingEvents.trackSimulationOrderPlaced({
          stockCode: selectedPosition.stockCode,
          stockName: selectedPosition.stockName,
          direction: 'sell',
          quantity: sellQuantity,
          price,
          orderType,
          success: false,
          errorMessage: error.message,
        });
      }

      toast({
        title: '卖出失败',
        description: error.message,
        status: 'error',
        duration: 5000,
        isClosable: true,
      });
    } finally {
      setIsLoading(false);
    }
  };

  // 计算卖出金额
  const calculateSellAmount = () => {
    if (!selectedPosition || !sellQuantity) return { totalAmount: 0, commission: 0, stampTax: 0, netAmount: 0 };

    const price = orderType === 'LIMIT' ? parseFloat(limitPrice) || 0 : selectedPosition.currentPrice || selectedPosition.avgPrice;
    const totalAmount = price * sellQuantity;
    const commission = Math.max(totalAmount * 0.00025, 5); // 万分之2.5
    const stampTax = totalAmount * 0.001; // 千分之1
    const transferFee = totalAmount * 0.00002; // 万分之0.2
    const netAmount = totalAmount - commission - stampTax - transferFee;

    return { totalAmount, commission, stampTax, transferFee, netAmount };
  };

  // 安全地计算总持仓统计
  const calculateTotalStats = () => {
    if (!Array.isArray(positions) || positions.length === 0) {
      return { totalMarketValue: 0, totalCost: 0, totalProfit: 0, totalProfitPercent: 0 };
    }

    let totalMarketValue = 0;
    let totalCost = 0;
    let totalProfit = 0;

    positions.forEach(position => {
      if (position) {
        const { marketValue, profit } = calculatePositionProfit(position);
        totalMarketValue += marketValue || 0;
        totalCost += position.totalCost || (position.quantity * position.avgPrice) || 0;
        totalProfit += profit || 0;
      }
    });

    const totalProfitPercent = totalCost > 0 ? (totalProfit / totalCost) * 100 : 0;

    return { totalMarketValue, totalCost, totalProfit, totalProfitPercent };
  };

  const { totalMarketValue, totalCost, totalProfit, totalProfitPercent } = calculateTotalStats();
  const { totalAmount, commission, stampTax, transferFee, netAmount } = calculateSellAmount();

  if (!positions || positions.length === 0) {
    return (
      <Card bg={cardBg} shadow="lg">
        <CardBody>
          <VStack spacing={4} py={8}>
            <Icon as={FiMinus} size="48px" color={secondaryColor} />
            <Text color={secondaryColor} fontSize="lg">暂无持仓</Text>
            <Text color={secondaryColor} fontSize="sm">
              请前往交易面板买入股票
            </Text>
          </VStack>
        </CardBody>
      </Card>
    );
  }

  // 安全地准备持仓分布图表数据
  const safePositions = Array.isArray(positions) ? positions : [];
  const hasPositions = safePositions.length > 0;
  
  const positionDistributionData = hasPositions ? safePositions.map(pos => pos?.marketValue || 0) : [];
  const positionDistributionLabels = hasPositions ? safePositions.map(pos => pos?.stockName || pos?.stockCode || '') : [];
  
  const positionDistributionOptions = {
    labels: positionDistributionLabels,
    colors: ['#4299E1', '#48BB78', '#ED8936', '#9F7AEA', '#F56565', '#38B2AC', '#ECC94B'],
    chart: {
      width: "100%",
      height: "300px"
    },
    legend: {
      show: true,
      position: 'right',
      fontSize: '12px'
    },
    dataLabels: {
      enabled: true,
      formatter: function (val) {
        return (val || 0).toFixed(1) + "%"
      }
    },
    tooltip: {
      enabled: true,
      theme: "dark",
      y: {
        formatter: function(val) {
          return formatCurrency(val || 0)
        }
      }
    }
  };

  // 安全地准备盈亏分布柱状图数据
  const profitBarData = hasPositions ? [{
    name: '盈亏分布',
    data: safePositions.map(pos => pos?.profit || 0)
  }] : [];
  
  const xAxisLabelColor = useColorModeValue('#718096', '#A0AEC0');
  const yAxisLabelColor = useColorModeValue('#718096', '#A0AEC0');
  const gridBorderColor = useColorModeValue('#E2E8F0', '#4A5568');

  const profitBarOptions = {
    chart: {
      toolbar: { show: false },
      height: 300
    },
    plotOptions: {
      bar: {
        borderRadius: 8,
        columnWidth: "60%",
        colors: {
          ranges: [{
            from: -1000000,
            to: 0,
            color: '#F56565'
          }, {
            from: 0.01,
            to: 1000000,
            color: '#48BB78'
          }]
        }
      }
    },
    xaxis: {
      categories: hasPositions ? safePositions.map(pos => pos?.stockCode || '') : [],
      labels: {
        style: {
          colors: xAxisLabelColor,
          fontSize: '12px'
        }
      }
    },
    yaxis: {
      labels: {
        style: {
          colors: yAxisLabelColor,
          fontSize: '12px'
        },
        formatter: function (val) {
          return '¥' + ((val || 0) / 1000).toFixed(1) + 'k'
        }
      }
    },
    tooltip: {
      theme: "dark",
      y: {
        formatter: function(val) {
          return formatCurrency(val || 0)
        }
      }
    },
    grid: {
      strokeDashArray: 5,
      borderColor: gridBorderColor
    }
  };

  return (
    <>
      <VStack spacing={6} align="stretch">
        {/* 现代化持仓概览 */}
        <SimpleGrid columns={{ base: 1, lg: 2 }} spacing={6}>
          {/* 左侧：核心统计 */}
          <Card>
            <CardHeader>
              <HStack justify="space-between">
                <Text fontSize="lg" fontWeight="bold" color={textColor}>持仓概览</Text>
                <Badge colorScheme="blue" variant="solid" borderRadius="full">
                  {positions.length} 只股票
                </Badge>
              </HStack>
            </CardHeader>
            <CardBody>
              <SimpleGrid columns={1} spacing={4}>
                {/* 持仓市值 */}
                <Card variant="outline">
                  <CardBody>
                    <Flex direction="row" align="center" justify="center" w="100%">
                      <Stat me="auto">
                        <StatLabel fontSize="sm" color={secondaryColor} fontWeight="bold">
                          持仓市值
                        </StatLabel>
                        <StatNumber fontSize="xl" color={textColor} fontWeight="bold">
                          {formatCurrency(totalMarketValue)}
                        </StatNumber>
                      </Stat>
                      <IconBox
                        as="div"
                        h={"40px"}
                        w={"40px"}
                        bg="linear-gradient(90deg, #4481EB 0%, #04BEFE 100%)"
                        icon={<Icon as={FiBarChart2} color="white" w="20px" h="20px" />}
                      />
                    </Flex>
                  </CardBody>
                </Card>

                {/* 总盈亏 */}
                <Card variant="outline">
                  <CardBody>
                    <Flex direction="row" align="center" justify="center" w="100%">
                      <Stat me="auto">
                        <StatLabel fontSize="sm" color={secondaryColor} fontWeight="bold">
                          总盈亏
                        </StatLabel>
                        <StatNumber fontSize="xl" color={totalProfit >= 0 ? 'green.500' : 'red.500'} fontWeight="bold">
                          {formatCurrency(totalProfit)}
                        </StatNumber>
                        <StatHelpText color={totalProfit >= 0 ? 'green.500' : 'red.500'} fontSize="sm" fontWeight="bold">
                          <StatArrow type={totalProfit >= 0 ? 'increase' : 'decrease'} />
                          {(totalProfitPercent || 0).toFixed(2)}%
                        </StatHelpText>
                      </Stat>
                      <IconBox
                        as="div"
                        h={"40px"}
                        w={"40px"}
                        bg={totalProfit >= 0 
                          ? "linear-gradient(90deg, #4FD1C7 0%, #81E6D9 100%)"
                          : "linear-gradient(90deg, #FEB2B2 0%, #F56565 100%)"
                        }
                        icon={
                          <Icon 
                            as={totalProfit >= 0 ? FiTrendingUp : FiTrendingDown} 
                            color="white" 
                            w="20px" 
                            h="20px" 
                          />
                        }
                      />
                    </Flex>
                  </CardBody>
                </Card>
              </SimpleGrid>
            </CardBody>
          </Card>

          {/* 右侧：持仓分布图 */}
          {hasPositions && (
            <Card>
              <CardHeader>
                <HStack justify="space-between">
                  <Text fontSize="lg" fontWeight="bold" color={textColor}>持仓分布</Text>
                  <Icon as={FiPieChart} color="blue.500" />
                </HStack>
              </CardHeader>
              <CardBody>
                <Box h="300px">
                  <PieChart
                    chartData={positionDistributionData}
                    chartOptions={positionDistributionOptions}
                  />
                </Box>
              </CardBody>
            </Card>
          )}
        </SimpleGrid>

        {/* 盈亏分析图表 */}
        {hasPositions && (
          <Card>
            <CardHeader>
              <HStack justify="space-between">
                <Text fontSize="lg" fontWeight="bold" color={textColor}>盈亏分析</Text>
                <Badge 
                  colorScheme={totalProfit >= 0 ? 'green' : 'red'}
                  variant="solid"
                  borderRadius="full"
                >
                  {totalProfit >= 0 ? '整体盈利' : '整体亏损'}
                </Badge>
              </HStack>
            </CardHeader>
            <CardBody>
              <Box h="300px">
                <BarChart
                  chartData={profitBarData}
                  chartOptions={profitBarOptions}
                />
              </Box>
            </CardBody>
          </Card>
        )}

        {/* 持仓列表 */}
        <Card bg={cardBg} shadow="lg">
          <CardHeader>
            <HStack justify="space-between">
              <Heading size="md">我的持仓</Heading>
              <Badge colorScheme="blue" variant="solid">
                {positions.length} 只股票
              </Badge>
            </HStack>
          </CardHeader>
          <CardBody>
            <Box overflowX="auto">
              <Table variant="simple">
                <Thead>
                  <Tr>
                    <Th>股票代码</Th>
                    <Th>股票名称</Th>
                    <Th isNumeric>持仓数量</Th>
                    <Th isNumeric>成本价</Th>
                    <Th isNumeric>现价</Th>
                    <Th isNumeric>市值</Th>
                    <Th isNumeric>盈亏</Th>
                    <Th isNumeric>盈亏比例</Th>
                    <Th>操作</Th>
                  </Tr>
                </Thead>
                <Tbody>
                  {safePositions.map((position) => {
                    if (!position) return null;
                    
                    const { profit, profitPercent, currentPrice, marketValue } = calculatePositionProfit(position);
                    const { change, changePercent } = calculateChange(currentPrice, position.avgPrice);
                    
                    return (
                      <Tr key={position.stockCode || position.id}>
                        <Td fontWeight="medium">{position.stockCode || '-'}</Td>
                        <Td>{position.stockName || '-'}</Td>
                        <Td isNumeric>{(position.quantity || 0).toLocaleString()}</Td>
                        <Td isNumeric>¥{(position.avgPrice || 0).toFixed(2)}</Td>
                        <Td isNumeric>
                          <VStack spacing={0} align="end">
                            <Text>¥{(currentPrice || 0).toFixed(2)}</Text>
                            <Text 
                              fontSize="xs" 
                              color={(change || 0) >= 0 ? 'green.500' : 'red.500'}
                            >
                              {(change || 0) >= 0 ? '+' : ''}{(changePercent || 0).toFixed(2)}%
                            </Text>
                          </VStack>
                        </Td>
                        <Td isNumeric>{formatCurrency(marketValue)}</Td>
                        <Td isNumeric>
                          <Text color={profit >= 0 ? 'green.500' : 'red.500'}>
                            {formatCurrency(profit)}
                          </Text>
                        </Td>
                        <Td isNumeric>
                          <HStack justify="end" spacing={1}>
                            <Icon 
                              as={profit >= 0 ? FiTrendingUp : FiTrendingDown} 
                              color={profit >= 0 ? 'green.500' : 'red.500'}
                            />
                            <Text color={(profit || 0) >= 0 ? 'green.500' : 'red.500'}>
                              {(profitPercent || 0).toFixed(2)}%
                            </Text>
                          </HStack>
                        </Td>
                        <Td>
                          <Button
                            colorScheme="red"
                            size="sm"
                            variant="outline"
                            onClick={() => handleSellClick(position)}
                            isDisabled={(position.availableQuantity || 0) <= 0}
                          >
                            卖出
                          </Button>
                        </Td>
                      </Tr>
                    );
                  }).filter(Boolean)}
                </Tbody>
              </Table>
            </Box>
          </CardBody>
        </Card>
      </VStack>

      {/* 卖出对话框 */}
      <Modal isOpen={isOpen} onClose={onClose} size="lg">
        <ModalOverlay />
        <ModalContent>
          <ModalHeader>
            卖出 {selectedPosition?.stockName}
          </ModalHeader>
          <ModalCloseButton />
          <ModalBody>
            <VStack spacing={4} align="stretch">
              {selectedPosition && (
                <Alert status="info">
                  <AlertIcon />
                  <AlertDescription>
                    当前持仓: {selectedPosition.quantity} 股，可卖: {selectedPosition.availableQuantity} 股，成本价: ¥{(selectedPosition.avgPrice || 0).toFixed(2)}
                  </AlertDescription>
                </Alert>
              )}

              <FormControl>
                <FormLabel>卖出数量（股）</FormLabel>
                <NumberInput
                  value={sellQuantity}
                  onChange={(value) => setSellQuantity(parseInt(value) || 0)}
                  min={1}
                  max={selectedPosition?.availableQuantity || 0}
                  step={100}
                >
                  <NumberInputField />
                  <NumberInputStepper>
                    <NumberIncrementStepper />
                    <NumberDecrementStepper />
                  </NumberInputStepper>
                </NumberInput>
              </FormControl>

              <FormControl>
                <FormLabel>订单类型</FormLabel>
                <Select value={orderType} onChange={(e) => setOrderType(e.target.value)}>
                  <option value="MARKET">市价单</option>
                  <option value="LIMIT">限价单</option>
                </Select>
              </FormControl>

              {orderType === 'LIMIT' && (
                <FormControl>
                  <FormLabel>限价价格（元）</FormLabel>
                  <NumberInput
                    value={limitPrice}
                    onChange={(value) => setLimitPrice(value)}
                    precision={2}
                    min={0}
                  >
                    <NumberInputField />
                  </NumberInput>
                </FormControl>
              )}

              {/* 卖出金额计算 */}
              {sellQuantity > 0 && (
                <Card bg={useColorModeValue('gray.50', 'gray.700')}>
                  <CardBody py={3}>
                    <VStack spacing={2} align="stretch">
                      <HStack justify="space-between">
                        <Text fontSize="sm" color={secondaryColor}>交易金额</Text>
                        <Text fontSize="sm">{formatCurrency(totalAmount)}</Text>
                      </HStack>
                      <HStack justify="space-between">
                        <Text fontSize="sm" color={secondaryColor}>手续费</Text>
                        <Text fontSize="sm">{formatCurrency(commission)}</Text>
                      </HStack>
                        <HStack justify="space-between">
                          <Text fontSize="sm" color={secondaryColor}>印花税</Text>
                          <Text fontSize="sm">{formatCurrency(stampTax)}</Text>
                        </HStack>
                        <HStack justify="space-between">
                          <Text fontSize="sm" color={secondaryColor}>过户费</Text>
                          <Text fontSize="sm">{formatCurrency(transferFee)}</Text>
                        </HStack>
                        <HStack justify="space-between">
                          <Text fontSize="md" fontWeight="bold">实收金额</Text>
                          <Text fontSize="md" fontWeight="bold" color="green.500">
                            {formatCurrency(netAmount)}
                          </Text>
                        </HStack>
                    </VStack>
                  </CardBody>
                </Card>
              )}
            </VStack>
          </ModalBody>

          <ModalFooter>
            <Button variant="ghost" mr={3} onClick={onClose}>
              取消
            </Button>
            <Button
              colorScheme="red"
              onClick={handleSellConfirm}
              isLoading={isLoading}
              loadingText="卖出中..."
              isDisabled={sellQuantity <= 0 || sellQuantity > (selectedPosition?.availableQuantity || 0)}
            >
              确认卖出
            </Button>
          </ModalFooter>
        </ModalContent>
      </Modal>
    </>
  );
}