// src/views/Market/MarketDataPro.jsx
import React, { useState, useEffect, useMemo } from 'react';
import { logger } from '../../utils/logger';
import { getApiBase } from '../../utils/apiConfig';
import {
  Box,
  Container,
  Tabs,
  TabList,
  TabPanels,
  Tab,
  TabPanel,
  Heading,
  Text,
  Table,
  Thead,
  Tbody,
  Tr,
  Th,
  Td,
  TableContainer,
  Stat,
  StatLabel,
  StatNumber,
  StatHelpText,
  StatArrow,
  SimpleGrid,
  Card,
  CardBody,
  CardHeader,
  Spinner,
  Center,
  Alert,
  AlertIcon,
  Badge,
  VStack,
  HStack,
  Divider,
  useColorModeValue,
  Select,
  Button,
  Tooltip,
  Progress,
  Modal,
  ModalOverlay,
  ModalContent,
  ModalHeader,
  ModalBody,
  ModalCloseButton,
  useDisclosure,
  Input,
  Flex,
  Tag,
  TagLabel,
  IconButton,
  useToast,
  Skeleton,
  SkeletonText,
  Grid,
  GridItem,
  ButtonGroup,
  Stack,
  useColorMode,
  Icon,
  InputGroup,
  InputLeftElement,
  Spacer,
  CircularProgress,
  CircularProgressLabel,
  chakra,
} from '@chakra-ui/react';
import { 
  ChevronDownIcon, 
  ChevronUpIcon, 
  InfoIcon, 
  DownloadIcon,
  RepeatIcon,
  SearchIcon,
  ViewIcon,
  TimeIcon,
  ArrowUpIcon,
  ArrowDownIcon,
  StarIcon,
  WarningIcon,
  LockIcon,
  UnlockIcon,
  BellIcon,
  CalendarIcon,
  ExternalLinkIcon,
  AddIcon,
  MinusIcon,
  CheckCircleIcon,
  SmallCloseIcon,
  MoonIcon,
  SunIcon,
} from '@chakra-ui/icons';
import ReactECharts from 'echarts-for-react';
import ReactMarkdown from 'react-markdown';

// API服务配置
const API_BASE_URL = getApiBase();

// 主题配置
const themes = {
  light: {
    // 日间模式 - 白+蓝
    primary: '#2B6CB0',
    primaryDark: '#1E4E8C',
    secondary: '#FFFFFF',
    secondaryDark: '#F7FAFC',
    success: '#FF4444', // 涨 - 红色
    danger: '#00C851', // 跌 - 绿色
    warning: '#FF9800',
    info: '#00BCD4',
    bgMain: '#F7FAFC',
    bgCard: '#FFFFFF',
    bgDark: '#EDF2F7',
    textPrimary: '#2D3748',
    textSecondary: '#4A5568',
    textMuted: '#718096',
    border: '#CBD5E0',
    chartBg: '#FFFFFF',
  },
  dark: {
    // 夜间模式 - 黑+金
    primary: '#FFD700',
    primaryDark: '#FFA500',
    secondary: '#1A1A1A',
    secondaryDark: '#000000',
    success: '#FF4444', // 涨 - 红色
    danger: '#00C851', // 跌 - 绿色
    warning: '#FFA500',
    info: '#00BFFF',
    bgMain: '#0A0A0A',
    bgCard: '#141414',
    bgDark: '#000000',
    textPrimary: '#FFFFFF',
    textSecondary: '#FFD700',
    textMuted: '#999999',
    border: '#333333',
    chartBg: '#141414',
  }
};

// API服务
const marketService = {
  async apiRequest(url) {
    try {
      const response = await fetch(`${API_BASE_URL}${url}`);
      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}`);
      }
      return response.json();
    } catch (error) {
      logger.error('marketService', 'apiRequest', error, { url });
      throw error;
    }
  },
  
  async getTradeData(stockCode, days = 60) {
    return this.apiRequest(`/api/market/trade/${stockCode}?days=${days}`);
  },
  
  async getFundingData(stockCode, days = 30) {
    return this.apiRequest(`/api/market/funding/${stockCode}?days=${days}`);
  },
  
  async getBigDealData(stockCode, days = 30) {
    return this.apiRequest(`/api/market/bigdeal/${stockCode}?days=${days}`);
  },
  
  async getUnusualData(stockCode, days = 30) {
    return this.apiRequest(`/api/market/unusual/${stockCode}?days=${days}`);
  },
  
  async getPledgeData(stockCode) {
    return this.apiRequest(`/api/market/pledge/${stockCode}`);
  },
  
  async getMarketSummary(stockCode) {
    return this.apiRequest(`/api/market/summary/${stockCode}`);
  },
  
  async getRiseAnalysis(stockCode, startDate, endDate) {
    let url = `/api/market/rise-analysis/${stockCode}`;
    if (startDate && endDate) {
      url += `?start_date=${startDate}&end_date=${endDate}`;
    }
    return this.apiRequest(url);
  }
};

// 格式化工具
const formatUtils = {
  formatNumber(value, decimals = 2) {
    if (!value && value !== 0) return '-';
    const num = parseFloat(value);
    if (Math.abs(num) >= 100000000) {
      return (num / 100000000).toFixed(decimals) + '亿';
    } else if (Math.abs(num) >= 10000) {
      return (num / 10000).toFixed(decimals) + '万';
    }
    return num.toFixed(decimals);
  },
  
  formatPercent(value) {
    if (!value && value !== 0) return '-';
    return value.toFixed(2) + '%';
  },
  
  formatDate(dateStr) {
    if (!dateStr) return '-';
    return dateStr.substring(0, 10);
  }
};

// 主题化卡片组件
const ThemedCard = ({ children, theme, ...props }) => {
  return (
    <Card
      bg={theme.bgCard}
      border="1px solid"
      borderColor={theme.border}
      borderRadius="xl"
      boxShadow="lg"
      transition="all 0.3s ease"
      _hover={{
        transform: 'translateY(-2px)',
        boxShadow: 'xl'
      }}
      {...props}
    >
      {children}
    </Card>
  );
};

// Markdown渲染组件
const MarkdownRenderer = ({ children, theme, colorMode }) => {
  return (
    <Box 
      color={theme.textPrimary}
      sx={{
        '& h1, & h2, & h3, & h4, & h5, & h6': {
          color: theme.primary,
          marginTop: 4,
          marginBottom: 2,
          fontWeight: 'bold'
        },
        '& h1': { fontSize: '1.5em' },
        '& h2': { fontSize: '1.3em' },
        '& h3': { fontSize: '1.1em' },
        '& p': {
          marginBottom: 3,
          lineHeight: 1.6
        },
        '& ul, & ol': {
          paddingLeft: 4,
          marginBottom: 3
        },
        '& li': {
          marginBottom: 1
        },
        '& strong': {
          fontWeight: 'bold',
          color: theme.textSecondary
        },
        '& em': {
          fontStyle: 'italic'
        },
        '& code': {
          backgroundColor: colorMode === 'light' ? 'rgba(0,0,0,0.05)' : 'rgba(255,255,255,0.1)',
          padding: '2px 4px',
          borderRadius: '4px',
          fontSize: '0.9em'
        },
        '& blockquote': {
          borderLeft: `3px solid ${theme.primary}`,
          paddingLeft: 4,
          marginLeft: 2,
          fontStyle: 'italic',
          opacity: 0.9
        }
      }}
    >
      <ReactMarkdown>{children}</ReactMarkdown>
    </Box>
  );
};

// 主组件
const MarketDataView = ({ stockCode: propStockCode }) => {
  const { colorMode } = useColorMode();
  const toast = useToast();
  const { isOpen, onOpen, onClose } = useDisclosure();
  const [modalContent, setModalContent] = useState(null);
  
  // 获取当前主题
  const theme = colorMode === 'light' ? themes.light : themes.dark;
  
  // 状态管理
  const [stockCode, setStockCode] = useState(propStockCode || '600000');
  const [loading, setLoading] = useState(false);
  const [activeTab, setActiveTab] = useState(0);
  const [selectedPeriod, setSelectedPeriod] = useState(60);
  
  // 数据状态
  const [summary, setSummary] = useState(null);
  const [tradeData, setTradeData] = useState([]);
  const [fundingData, setFundingData] = useState([]);
  const [bigDealData, setBigDealData] = useState({ data: [], daily_stats: [] });
  const [unusualData, setUnusualData] = useState({ data: [], grouped_data: [] });
  const [pledgeData, setPledgeData] = useState([]);
  const [riseAnalysisData, setRiseAnalysisData] = useState([]);
  const [analysisMap, setAnalysisMap] = useState({});
  const [minuteData, setMinuteData] = useState([]);
  const [minuteLoading, setMinuteLoading] = useState(false);

  // 加载数据
  const loadMarketData = async () => {
    logger.debug('MarketDataView', '开始加载市场数据', { stockCode, selectedPeriod });
    setLoading(true);
    try {
      const [summaryRes, tradeRes, fundingRes, bigDealRes, unusualRes, pledgeRes, riseAnalysisRes] = await Promise.all([
        marketService.getMarketSummary(stockCode),
        marketService.getTradeData(stockCode, selectedPeriod),
        marketService.getFundingData(stockCode, 30),
        marketService.getBigDealData(stockCode, 30),
        marketService.getUnusualData(stockCode, 30),
        marketService.getPledgeData(stockCode),
        marketService.getRiseAnalysis(stockCode)
      ]);

      if (summaryRes.success) setSummary(summaryRes.data);
      if (tradeRes.success) setTradeData(tradeRes.data);
      if (fundingRes.success) setFundingData(fundingRes.data);
      if (bigDealRes.success) setBigDealData(bigDealRes); // 设置整个响应对象，包含daily_stats
      if (unusualRes.success) setUnusualData(unusualRes); // 设置整个响应对象，包含grouped_data
      if (pledgeRes.success) setPledgeData(pledgeRes.data);
      if (riseAnalysisRes.success) {
        setRiseAnalysisData(riseAnalysisRes.data);

        // 创建分析数据映射
        const tempAnalysisMap = {};
        if (tradeRes.success && tradeRes.data && riseAnalysisRes.data) {
          riseAnalysisRes.data.forEach(analysis => {
            const dateIndex = tradeRes.data.findIndex(item =>
              item.date.substring(0, 10) === analysis.trade_date
            );
            if (dateIndex !== -1) {
              tempAnalysisMap[dateIndex] = analysis;
            }
          });
        }
        setAnalysisMap(tempAnalysisMap);
      }

      // ❌ 移除数据加载成功toast
      logger.info('MarketDataView', '市场数据加载成功', { stockCode });
    } catch (error) {
      logger.error('MarketDataView', 'loadMarketData', error, { stockCode, selectedPeriod });

      // ❌ 移除数据加载失败toast
      // toast({ title: '数据加载失败', description: error.message, status: 'error', duration: 5000, isClosable: true });
    } finally {
      setLoading(false);
    }
  };

  // 获取分钟频数据
  const loadMinuteData = async () => {
    logger.debug('MarketDataView', '开始加载分钟频数据', { stockCode });
    setMinuteLoading(true);
    try {
      const response = await fetch(
        `${API_BASE_URL}/api/stock/${stockCode}/latest-minute`,
        {
          method: 'GET',
          headers: {
            'Content-Type': 'application/json',
          }
        }
      );

      if (!response.ok) {
        throw new Error('Failed to fetch minute data');
      }

      const data = await response.json();
      if (data.data && Array.isArray(data.data)) {
        setMinuteData(data);
        logger.info('MarketDataView', '分钟频数据加载成功', { stockCode, dataPoints: data.data.length });
      } else {
        setMinuteData({ data: [], code: stockCode, name: '', trade_date: '', type: 'minute' });
        logger.warn('MarketDataView', '分钟频数据为空', { stockCode });
      }

    } catch (error) {
      logger.error('MarketDataView', 'loadMinuteData', error, { stockCode });

      // ❌ 移除分钟数据加载失败toast
      // toast({ title: '分钟数据加载失败', description: error.message, status: 'error', duration: 3000, isClosable: true });
      setMinuteData({ data: [], code: stockCode, name: '', trade_date: '', type: 'minute' });
    } finally {
      setMinuteLoading(false);
    }
  };

  // 监听props中的stockCode变化
  useEffect(() => {
    if (propStockCode && propStockCode !== stockCode) {
      setStockCode(propStockCode);
    }
  }, [propStockCode, stockCode]);

  useEffect(() => {
    if (stockCode) {
      loadMarketData();
      // 自动加载分钟频数据
      loadMinuteData();
    }
  }, [stockCode, selectedPeriod]);

  // K线图配置
  const getKLineOption = () => {
    if (!tradeData || tradeData.length === 0) return {};
    
    const dates = tradeData.map(item => item.date.substring(5, 10));
    const kData = tradeData.map(item => [item.open, item.close, item.low, item.high]);
    const volumes = tradeData.map(item => item.volume);
    const ma5 = calculateMA(tradeData.map(item => item.close), 5);
    const ma10 = calculateMA(tradeData.map(item => item.close), 10);
    const ma20 = calculateMA(tradeData.map(item => item.close), 20);
    
    // 创建涨幅分析标记点
    const scatterData = [];
    
    // 使用组件级别的 analysisMap
    Object.keys(analysisMap).forEach(dateIndex => {
      const idx = parseInt(dateIndex);
      if (tradeData[idx]) {
        const value = tradeData[idx].high * 1.02; // 在最高价上方显示
        scatterData.push([idx, value]);
      }
    });

    return {
      backgroundColor: theme.chartBg,
      animation: true,
      legend: {
        data: ['K线', 'MA5', 'MA10', 'MA20'],
        top: 10,
        textStyle: {
          color: theme.textPrimary
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          lineStyle: {
            color: theme.primary,
            width: 1,
            opacity: 0.8
          }
        },
        backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.8)',
        borderColor: theme.primary,
        borderWidth: 1,
        textStyle: {
          color: theme.textPrimary
        },
        formatter: function(params) {
          const dataIndex = params[0]?.dataIndex;
          let result = `${params[0]?.name || ''}<br/>`;
          
          params.forEach(param => {
            if (param.seriesName === '涨幅分析' && analysisMap[dataIndex]) {
              const analysis = analysisMap[dataIndex];
              result = `<div style="min-width: 300px;">
                <strong>${analysis.stock_name} (${analysis.stock_code})</strong><br/>
                日期: ${analysis.trade_date}<br/>
                涨幅: <span style="color: #FF4444; font-weight: bold;">${analysis.rise_rate}%</span><br/>
                收盘价: ${analysis.close_price}<br/>
                <br/>
                <strong>涨幅原因:</strong><br/>
                <div style="color: #666; max-width: 400px;">${analysis.rise_reason_brief || '暂无分析'}</div>
                <br/>
                <div style="color: #999; font-size: 12px;">点击查看详细分析</div>
              </div>`;
            } else if (param.seriesName === 'K线') {
              const [open, close, low, high] = param.data;
              result += `${param.marker} ${param.seriesName}<br/>`;
              result += `开盘: ${open}<br/>`;
              result += `收盘: ${close}<br/>`;
              result += `最低: ${low}<br/>`;
              result += `最高: ${high}<br/>`;
            } else if (param.value != null) {
              result += `${param.marker} ${param.seriesName}: ${param.value}<br/>`;
            }
          });
          
          return result;
        }
      },
      xAxis: [
        {
          type: 'category',
          data: dates,
          boundaryGap: false,
          axisLine: { lineStyle: { color: theme.textMuted } },
          axisLabel: { color: theme.textMuted }
        },
        {
          type: 'category',
          gridIndex: 1,
          data: dates,
          boundaryGap: false,
          axisLine: { onZero: false, lineStyle: { color: theme.textMuted } },
          axisTick: { show: false },
          splitLine: { show: false },
          axisLabel: { show: false }
        }
      ],
      yAxis: [
        {
          scale: true,
          splitLine: { 
            show: true,
            lineStyle: {
              color: theme.border
            }
          },
          axisLine: { lineStyle: { color: theme.textMuted } },
          axisLabel: { color: theme.textMuted }
        },
        {
          scale: true,
          gridIndex: 1,
          splitNumber: 2,
          axisLabel: { show: false },
          axisLine: { show: false },
          axisTick: { show: false },
          splitLine: { show: false }
        }
      ],
      grid: [
        {
          left: '10%',
          right: '10%',
          height: '50%'
        },
        {
          left: '10%',
          right: '10%',
          top: '65%',
          height: '20%'
        }
      ],
      series: [
        {
          name: 'K线',
          type: 'candlestick',
          data: kData,
          itemStyle: {
            color: theme.success, // 涨 - 红色
            color0: theme.danger, // 跌 - 绿色
            borderColor: theme.success,
            borderColor0: theme.danger
          }
        },
        {
          name: 'MA5',
          type: 'line',
          data: ma5,
          smooth: true,
          lineStyle: {
            color: theme.primary,
            width: 1
          },
          itemStyle: {
            color: theme.primary
          }
        },
        {
          name: 'MA10',
          type: 'line',
          data: ma10,
          smooth: true,
          lineStyle: {
            color: theme.info,
            width: 1
          },
          itemStyle: {
            color: theme.info
          }
        },
        {
          name: 'MA20',
          type: 'line',
          data: ma20,
          smooth: true,
          lineStyle: {
            color: theme.warning,
            width: 1
          },
          itemStyle: {
            color: theme.warning
          }
        },
                {
          name: '涨幅分析',
          type: 'scatter',
          data: scatterData,
          symbolSize: 30,
          symbol: 'pin',
          itemStyle: {
            color: '#FFD700',
            shadowBlur: 10,
            shadowColor: 'rgba(255, 215, 0, 0.5)'
          },
          label: {
            show: true,
            formatter: '★',
            fontSize: 20,
            position: 'inside',
            color: '#FF6B6B'
          },
          emphasis: {
            scale: 1.5,
            itemStyle: {
              color: '#FFA500'
            }
          },
          z: 100, // 确保显示在最上层
          cursor: 'pointer' // 显示为可点击
        },
        {
          name: '成交量',
          type: 'bar',
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: volumes,
          itemStyle: {
            color: (params) => {
              const item = tradeData[params.dataIndex];
              return item.change_percent >= 0 ? 
                'rgba(255, 68, 68, 0.6)' : 'rgba(0, 200, 81, 0.6)';
            }
          }
        }
      ]
    };
  };

  // 分钟频K线图配置
  const getMinuteKLineOption = () => {
    if (!minuteData || !minuteData.data || minuteData.data.length === 0) return {};

    const times = minuteData.data.map(item => item.time);
    const kData = minuteData.data.map(item => [item.open, item.close, item.low, item.high]);
    const volumes = minuteData.data.map(item => item.volume);
    const avgPrice = calculateMA(minuteData.data.map(item => item.close), 5); // 5分钟均价

    // 计算开盘价基准线（用于涨跌判断）
    const openPrice = minuteData.data.length > 0 ? minuteData.data[0].open : 0;

    return {
      backgroundColor: theme.chartBg,
      title: {
        text: `${minuteData.name} 分钟K线 (${minuteData.trade_date})`,
        left: 'center',
        textStyle: {
          color: theme.textPrimary,
          fontSize: 16,
          fontWeight: 'bold'
        },
        subtextStyle: {
          color: theme.textMuted
        }
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
        backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.95)' : 'rgba(0,0,0,0.85)',
        borderColor: theme.primary,
        borderWidth: 1,
        textStyle: {
          color: theme.textPrimary,
          fontSize: 12
        },
        formatter: (params) => {
          let result = params[0].name + '<br/>';
          params.forEach(param => {
            if (param.seriesName === '分钟K线') {
              const [open, close, low, high] = param.data;
              const changePercent = openPrice > 0 ? ((close - openPrice) / openPrice * 100).toFixed(2) : '0.00';
              result += `${param.marker} ${param.seriesName}<br/>`;
              result += `开盘: <span style="font-weight: bold">${open.toFixed(2)}</span><br/>`;
              result += `收盘: <span style="font-weight: bold; color: ${close >= open ? theme.success : theme.danger}">${close.toFixed(2)}</span><br/>`;
              result += `最高: <span style="font-weight: bold">${high.toFixed(2)}</span><br/>`;
              result += `最低: <span style="font-weight: bold">${low.toFixed(2)}</span><br/>`;
              result += `涨跌: <span style="font-weight: bold; color: ${close >= openPrice ? theme.success : theme.danger}">${changePercent}%</span><br/>`;
            } else if (param.seriesName === '均价线') {
              result += `${param.marker} ${param.seriesName}: <span style="font-weight: bold">${param.value.toFixed(2)}</span><br/>`;
            } else if (param.seriesName === '成交量') {
              result += `${param.marker} ${param.seriesName}: <span style="font-weight: bold">${formatUtils.formatNumber(param.value, 0)}</span><br/>`;
            }
          });
          return result;
        }
      },
      legend: {
        data: ['分钟K线', '均价线', '成交量'],
        top: 35,
        textStyle: {
          color: theme.textPrimary,
          fontSize: 12
        },
        itemWidth: 25,
        itemHeight: 14
      },
      grid: [
        {
          left: '8%',
          right: '8%',
          top: '20%',
          height: '60%'
        },
        {
          left: '8%',
          right: '8%',
          top: '83%',
          height: '12%'
        }
      ],
      xAxis: [
        {
          type: 'category',
          data: times,
          scale: true,
          boundaryGap: false,
          axisLine: { lineStyle: { color: theme.textMuted } },
          axisLabel: {
            color: theme.textMuted,
            fontSize: 10,
            interval: 'auto'
          },
          splitLine: { show: false }
        },
        {
          type: 'category',
          gridIndex: 1,
          data: times,
          scale: true,
          boundaryGap: false,
          axisLine: { lineStyle: { color: theme.textMuted } },
          axisLabel: {
            color: theme.textMuted,
            fontSize: 10
          },
          splitLine: { show: false }
        }
      ],
      yAxis: [
        {
          scale: true,
          axisLine: { lineStyle: { color: theme.textMuted } },
          axisLabel: { color: theme.textMuted, fontSize: 10 },
          splitLine: {
            lineStyle: {
              color: theme.border,
              type: 'dashed'
            }
          }
        },
        {
          gridIndex: 1,
          scale: true,
          axisLine: { lineStyle: { color: theme.textMuted } },
          axisLabel: { color: theme.textMuted, fontSize: 10 },
          splitLine: { show: false }
        }
      ],
      dataZoom: [
        {
          type: 'inside',
          xAxisIndex: [0, 1],
          start: 70,
          end: 100,
          minValueSpan: 20
        },
        {
          show: true,
          xAxisIndex: [0, 1],
          type: 'slider',
          top: '95%',
          start: 70,
          end: 100,
          height: 20,
          handleSize: '100%',
          handleStyle: {
            color: theme.primary
          },
          textStyle: {
            color: theme.textMuted
          }
        }
      ],
      series: [
        {
          name: '分钟K线',
          type: 'candlestick',
          data: kData,
          itemStyle: {
            color: theme.success,
            color0: theme.danger,
            borderColor: theme.success,
            borderColor0: theme.danger,
            borderWidth: 1
          },
          barWidth: '60%'
        },
        {
          name: '均价线',
          type: 'line',
          data: avgPrice,
          smooth: true,
          symbol: 'none',
          lineStyle: {
            color: theme.info,
            width: 2,
            opacity: 0.8
          }
        },
        {
          name: '成交量',
          type: 'bar',
          xAxisIndex: 1,
          yAxisIndex: 1,
          data: volumes,
          barWidth: '50%',
          itemStyle: {
            color: (params) => {
              const item = minuteData.data[params.dataIndex];
              return item.close >= item.open ?
                'rgba(255, 68, 68, 0.6)' : 'rgba(0, 200, 81, 0.6)';
            }
          }
        }
      ]
    };
  };

  // 计算移动平均线
  const calculateMA = (data, period) => {
    const result = [];
    for (let i = 0; i < data.length; i++) {
      if (i < period - 1) {
        result.push(null);
        continue;
      }
      let sum = 0;
      for (let j = 0; j < period; j++) {
        sum += data[i - j];
      }
      result.push(sum / period);
    }
    return result;
  };

  // 融资融券图表配置
  const getFundingOption = () => {
    if (!fundingData || fundingData.length === 0) return {};
    
    const dates = fundingData.map(item => item.date.substring(5, 10));
    const financing = fundingData.map(item => item.financing.balance / 100000000);
    const securities = fundingData.map(item => item.securities.balance_amount / 100000000);
    
    return {
      backgroundColor: theme.chartBg,
      title: {
        text: '融资融券余额走势',
        left: 'center',
        textStyle: {
          color: theme.textPrimary,
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.8)',
        borderColor: theme.primary,
        borderWidth: 1,
        textStyle: {
          color: theme.textPrimary
        },
        formatter: (params) => {
          let result = params[0].name + '<br/>';
          params.forEach(param => {
            result += `${param.marker} ${param.seriesName}: ${param.value.toFixed(2)}亿<br/>`;
          });
          return result;
        }
      },
      legend: {
        data: ['融资余额', '融券余额'],
        bottom: 10,
        textStyle: {
          color: theme.textPrimary
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: dates,
        axisLine: { lineStyle: { color: theme.textMuted } },
        axisLabel: { color: theme.textMuted }
      },
      yAxis: {
        type: 'value',
        name: '金额(亿)',
        nameTextStyle: { color: theme.textMuted },
        splitLine: { 
          lineStyle: {
            color: theme.border
          }
        },
        axisLine: { lineStyle: { color: theme.textMuted } },
        axisLabel: { color: theme.textMuted }
      },
      series: [
        {
          name: '融资余额',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(255, 68, 68, 0.3)'
              }, {
                offset: 1, color: 'rgba(255, 68, 68, 0.05)'
              }]
            }
          },
          lineStyle: {
            color: theme.success,
            width: 2
          },
          itemStyle: {
            color: theme.success,
            borderColor: theme.success,
            borderWidth: 2
          },
          data: financing
        },
        {
          name: '融券余额',
          type: 'line',
          smooth: true,
          symbol: 'diamond',
          symbolSize: 8,
          areaStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: 'rgba(0, 200, 81, 0.3)'
              }, {
                offset: 1, color: 'rgba(0, 200, 81, 0.05)'
              }]
            }
          },
          lineStyle: {
            color: theme.danger,
            width: 2
          },
          itemStyle: {
            color: theme.danger,
            borderColor: theme.danger,
            borderWidth: 2
          },
          data: securities
        }
      ]
    };
  };

  // 股权质押图表配置
  const getPledgeOption = () => {
    if (!pledgeData || pledgeData.length === 0) return {};
    
    const dates = pledgeData.map(item => item.end_date.substring(5, 10));
    const ratios = pledgeData.map(item => item.pledge_ratio);
    const counts = pledgeData.map(item => item.pledge_count);
    
    return {
      backgroundColor: theme.chartBg,
      title: {
        text: '股权质押趋势',
        left: 'center',
        textStyle: {
          color: theme.textPrimary,
          fontSize: 16
        }
      },
      tooltip: {
        trigger: 'axis',
        backgroundColor: colorMode === 'light' ? 'rgba(255,255,255,0.9)' : 'rgba(0,0,0,0.8)',
        borderColor: theme.primary,
        borderWidth: 1,
        textStyle: {
          color: theme.textPrimary
        }
      },
      legend: {
        data: ['质押比例', '质押笔数'],
        bottom: 10,
        textStyle: {
          color: theme.textPrimary
        }
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '15%',
        containLabel: true
      },
      xAxis: {
        type: 'category',
        data: dates,
        axisLine: { lineStyle: { color: theme.textMuted } },
        axisLabel: { color: theme.textMuted }
      },
      yAxis: [
        {
          type: 'value',
          name: '质押比例(%)',
          nameTextStyle: { color: theme.textMuted },
          splitLine: { 
            lineStyle: {
              color: theme.border
            }
          },
          axisLine: { lineStyle: { color: theme.textMuted } },
          axisLabel: { color: theme.textMuted }
        },
        {
          type: 'value',
          name: '质押笔数',
          nameTextStyle: { color: theme.textMuted },
          axisLine: { lineStyle: { color: theme.textMuted } },
          axisLabel: { color: theme.textMuted }
        }
      ],
      series: [
        {
          name: '质押比例',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 8,
          lineStyle: {
            color: theme.warning,
            width: 2,
            shadowBlur: 10,
            shadowColor: theme.warning
          },
          itemStyle: {
            color: theme.warning,
            borderColor: theme.bgCard,
            borderWidth: 2
          },
          data: ratios
        },
        {
          name: '质押笔数',
          type: 'bar',
          yAxisIndex: 1,
          barWidth: '50%',
          itemStyle: {
            color: {
              type: 'linear',
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [{
                offset: 0, color: theme.primary
              }, {
                offset: 1, color: theme.primaryDark
              }]
            },
            barBorderRadius: [5, 5, 0, 0]
          },
          data: counts
        }
      ]
    };
  };

  return (
    <Box bg={theme.bgMain} minH="100vh" color={theme.textPrimary}>
      <Container maxW="container.xl" py={6}>
        <VStack spacing={6} align="stretch">
          {/* 股票概览 */}
        {summary && (
            <ThemedCard theme={theme}>
              <CardBody>
                <Grid templateColumns="repeat(12, 1fr)" gap={6}>
                  <GridItem colSpan={{ base: 12, md: 4 }}>
                    <VStack align="start" spacing={2}>
                      <HStack>
                        <Heading size="xl" color={theme.textSecondary}>
                          {summary.stock_name}
                        </Heading>
                        <Badge colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="lg">
                          {summary.stock_code}
                        </Badge>
                      </HStack>
              {summary.latest_trade && (
                        <HStack spacing={4}>
                          <Stat>
                            <StatNumber fontSize="4xl" color={theme.textPrimary}>
                              {summary.latest_trade.close}
                            </StatNumber>
                            <StatHelpText fontSize="lg">
                              <StatArrow 
                                type={summary.latest_trade.change_percent >= 0 ? 'increase' : 'decrease'} 
                                color={summary.latest_trade.change_percent >= 0 ? theme.success : theme.danger}
                              />
                              {Math.abs(summary.latest_trade.change_percent).toFixed(2)}%
                            </StatHelpText>
                          </Stat>
                        </HStack>
                      )}
                    </VStack>
                  </GridItem>
                  
                  <GridItem colSpan={{ base: 12, md: 8 }}>
                    <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
              {summary.latest_trade && (
                <>
                          <Stat>
                            <StatLabel color={theme.textMuted}>成交量</StatLabel>
                            <StatNumber color={theme.textSecondary}>
                              {formatUtils.formatNumber(summary.latest_trade.volume, 0)}
                            </StatNumber>
                          </Stat>
                          <Stat>
                            <StatLabel color={theme.textMuted}>成交额</StatLabel>
                            <StatNumber color={theme.textSecondary}>
                              {formatUtils.formatNumber(summary.latest_trade.amount)}
                            </StatNumber>
                          </Stat>
                          <Stat>
                            <StatLabel color={theme.textMuted}>换手率</StatLabel>
                            <StatNumber color={theme.textSecondary}>
                              {formatUtils.formatPercent(summary.latest_trade.turnover_rate)}
                            </StatNumber>
                          </Stat>
                          <Stat>
                            <StatLabel color={theme.textMuted}>市盈率</StatLabel>
                            <StatNumber color={theme.textSecondary}>
                              {summary.latest_trade.pe_ratio || '-'}
                            </StatNumber>
                          </Stat>
                </>
              )}
                    </SimpleGrid>
                    
              {summary.latest_funding && (
                      <SimpleGrid columns={{ base: 2, md: 3 }} spacing={4} mt={4}>
                        <Stat>
                          <StatLabel color={theme.textMuted}>融资余额</StatLabel>
                          <StatNumber color={theme.success} fontSize="lg">
                      {formatUtils.formatNumber(summary.latest_funding.financing_balance)}
                          </StatNumber>
                        </Stat>
                        <Stat>
                          <StatLabel color={theme.textMuted}>融券余额</StatLabel>
                          <StatNumber color={theme.danger} fontSize="lg">
                      {formatUtils.formatNumber(summary.latest_funding.securities_balance)}
                          </StatNumber>
                        </Stat>
              {summary.latest_pledge && (
                          <Stat>
                            <StatLabel color={theme.textMuted}>质押比例</StatLabel>
                            <StatNumber color={theme.warning} fontSize="lg">
                    {formatUtils.formatPercent(summary.latest_pledge.pledge_ratio)}
                            </StatNumber>
                          </Stat>
                        )}
                      </SimpleGrid>
                    )}
                  </GridItem>
                </Grid>
              </CardBody>
            </ThemedCard>
          )}

          {/* 主要内容区域 */}
          {loading ? (
            <ThemedCard theme={theme}>
              <CardBody>
                <Center h="400px">
                  <VStack spacing={4}>
                    <Spinner 
                      thickness="4px"
                      speed="0.65s"
                      emptyColor={theme.bgDark}
                      color={theme.primary}
                      size="xl"
                    />
                    <Text color={theme.textSecondary}>数据加载中...</Text>
                  </VStack>
                </Center>
              </CardBody>
            </ThemedCard>
          ) : (
            <Tabs
              variant="soft-rounded"
              colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
              index={activeTab}
              onChange={setActiveTab}
            >
              <Box 
                bg={theme.bgCard}
                p={4}
                borderRadius="xl"
                border="1px solid"
                borderColor={theme.border}
              >
                <HStack justify="space-between" align="center" spacing={4}>
                  <TabList overflowX="auto" border="none" flex="1">
                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
                      <HStack spacing={1}>
                        <Icon as={ChevronUpIcon} boxSize={4} />
                        <Text>交易数据</Text>
                      </HStack>
                    </Tab>
                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
                      <HStack spacing={1}>
                        <Icon as={UnlockIcon} boxSize={4} />
                        <Text>融资融券</Text>
                      </HStack>
                    </Tab>
                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
                      <HStack spacing={1}>
                        <Icon as={ArrowUpIcon} boxSize={4} />
                        <Text>大宗交易</Text>
                      </HStack>
                    </Tab>
                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
                      <HStack spacing={1}>
                        <Icon as={StarIcon} boxSize={4} />
                        <Text>龙虎榜</Text>
                      </HStack>
                    </Tab>
                    <Tab color={theme.textMuted} _selected={{ color: colorMode === 'light' ? 'white' : theme.secondary, bg: theme.primary }} fontSize="sm" px={3}>
                      <HStack spacing={1}>
                        <Icon as={LockIcon} boxSize={4} />
                        <Text>股权质押</Text>
                      </HStack>
                    </Tab>
                    <Tab isDisabled />
                  </TabList>
                  
                  <HStack spacing={2} flexShrink={0} ml="auto">
                    <Text color={theme.textPrimary} whiteSpace="nowrap" fontSize="sm">时间范围：</Text>
                    <Select 
                      size="sm"
                      value={selectedPeriod} 
                      onChange={(e) => setSelectedPeriod(Number(e.target.value))}
                      bg={theme.bgDark}
                      borderColor={theme.border}
                      color={theme.textPrimary}
                      maxW="120px"
                    >
                      <option value={30} style={{ background: theme.bgDark }}>30天</option>
                      <option value={60} style={{ background: theme.bgDark }}>60天</option>
                      <option value={120} style={{ background: theme.bgDark }}>120天</option>
                      <option value={250} style={{ background: theme.bgDark }}>250天</option>
                    </Select>
                    <Button
                      leftIcon={<RepeatIcon />}
                      variant="outline"
                      colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
                      onClick={loadMarketData}
                      isLoading={loading}
                      size="sm"
                    >
                      刷新
                    </Button>
                  </HStack>
                </HStack>
              </Box>

              <TabPanels>
                {/* 交易数据 */}
                <TabPanel px={0}>
                  <VStack spacing={6} align="stretch">
                    <ThemedCard theme={theme}>
                      <CardBody>
                        {tradeData.length > 0 && (
                          <Box h="600px">
                            <ReactECharts 
                              option={getKLineOption()} 
                              style={{ height: '100%', width: '100%' }}
                              theme={colorMode === 'light' ? 'light' : 'dark'}
                              onEvents={{
                                'click': (params) => {
                                  if (params.seriesName === '涨幅分析' && params.data) {
                                    const dataIndex = params.data[0]; // scatter数据格式是[x, y]
                                    const analysis = analysisMap[dataIndex];
                                    
                                    if (analysis) {
                                      setModalContent(
                                        <VStack align="stretch" spacing={4}>
                                          <Box>
                                            <Heading size="md" mb={2}>{analysis.stock_name} ({analysis.stock_code})</Heading>
                                            <HStack spacing={4} mb={4}>
                                              <Tag colorScheme="blue">日期: {analysis.trade_date}</Tag>
                                              <Tag colorScheme="red">涨幅: {analysis.rise_rate}%</Tag>
                                              <Tag colorScheme="green">收盘价: {analysis.close_price}</Tag>
                                            </HStack>
                                          </Box>
                                          
                                          {analysis.main_business && (
                                            <Box p={4} bg={colorMode === 'light' ? 'gray.50' : 'gray.900'} borderRadius="md">
                                              <Heading size="sm" mb={2} color={theme.primary}>主营业务</Heading>
                                              <Text color={theme.textPrimary}>{analysis.main_business}</Text>
                                            </Box>
                                          )}
                                          
                                          
                                          {analysis.rise_reason_detail && (
                                            <Box p={4} bg={colorMode === 'light' ? 'purple.50' : 'purple.900'} borderRadius="md">
                                              <Heading size="sm" mb={2} color={theme.primary}>详细分析</Heading>
                                              <MarkdownRenderer theme={theme} colorMode={colorMode}>
                                                {analysis.rise_reason_detail}
                                              </MarkdownRenderer>
                                            </Box>
                                          )}

                                          {analysis.announcements && analysis.announcements !== '[]' && (
                                            <Box p={4} bg={colorMode === 'light' ? 'orange.50' : 'orange.900'} borderRadius="md">
                                              <Heading size="sm" mb={2} color={theme.primary}>相关公告</Heading>
                                              <MarkdownRenderer theme={theme} colorMode={colorMode}>
                                                {analysis.announcements}
                                              </MarkdownRenderer>
                                            </Box>
                                          )}

                                          {/* 研报引用展示 */}
                                          {analysis.verification_reports && analysis.verification_reports.length > 0 && (
                                            <Box p={4} bg={colorMode === 'light' ? 'blue.50' : 'blue.900'} borderRadius="md">
                                              <Heading size="sm" mb={3} color={theme.primary}>
                                                <HStack spacing={2}>
                                                  <Icon as={ExternalLinkIcon} />
                                                  <Text>研报引用 ({analysis.verification_reports.length})</Text>
                                                </HStack>
                                              </Heading>
                                              <VStack spacing={3} align="stretch">
                                                {analysis.verification_reports.map((report, reportIdx) => (
                                                  <Box
                                                    key={reportIdx}
                                                    p={3}
                                                    bg={colorMode === 'light' ? 'white' : 'gray.800'}
                                                    borderRadius="md"
                                                    border="1px solid"
                                                    borderColor={theme.border}
                                                  >
                                                    <HStack justify="space-between" mb={2}>
                                                      <HStack spacing={2}>
                                                        <Badge colorScheme="blue" fontSize="xs">
                                                          {report.publisher || '未知机构'}
                                                        </Badge>
                                                        {report.match_score && (
                                                          <Badge
                                                            colorScheme={report.match_score === '好' ? 'green' : report.match_score === '中' ? 'yellow' : 'gray'}
                                                            fontSize="xs"
                                                          >
                                                            匹配度: {report.match_score}
                                                          </Badge>
                                                        )}
                                                        {report.match_ratio != null && report.match_ratio > 0 && (
                                                          <Badge colorScheme="purple" fontSize="xs">
                                                            {(report.match_ratio * 100).toFixed(0)}%
                                                          </Badge>
                                                        )}
                                                      </HStack>
                                                      {report.declare_date && (
                                                        <Text fontSize="xs" color={theme.textMuted}>
                                                          {report.declare_date.substring(0, 10)}
                                                        </Text>
                                                      )}
                                                    </HStack>

                                                    {report.report_title && (
                                                      <Text fontWeight="bold" fontSize="sm" color={theme.textPrimary} mb={1}>
                                                        《{report.report_title}》
                                                      </Text>
                                                    )}

                                                    {report.author && (
                                                      <Text fontSize="xs" color={theme.textMuted} mb={2}>
                                                        分析师: {report.author}
                                                      </Text>
                                                    )}

                                                    {report.verification_item && (
                                                      <Box
                                                        p={2}
                                                        bg={colorMode === 'light' ? 'yellow.50' : 'yellow.900'}
                                                        borderRadius="sm"
                                                        mb={2}
                                                      >
                                                        <Text fontSize="xs" color={theme.textMuted}>
                                                          <strong>验证项:</strong> {report.verification_item}
                                                        </Text>
                                                      </Box>
                                                    )}

                                                    {report.content && (
                                                      <Text fontSize="sm" color={theme.textSecondary} noOfLines={4}>
                                                        {report.content}
                                                      </Text>
                                                    )}
                                                  </Box>
                                                ))}
                                              </VStack>
                                            </Box>
                                          )}
                                          
                                          <Box mt={4}>
                                            <Text fontSize="sm" color={theme.textMuted}>
                                              成交量: {formatUtils.formatNumber(analysis.volume)} |
                                              成交额: {formatUtils.formatNumber(analysis.amount)} |
                                              更新时间: {analysis.update_time || analysis.create_time || '-'}
                                            </Text>
                                          </Box>
                                        </VStack>
                                      );
                                      onOpen();
                                    }
                                  }
                                }
                              }}
                            />
                          </Box>
                        )}
                      </CardBody>
                    </ThemedCard>

                    {/* 当日分钟频数据 */}
                    <ThemedCard theme={theme}>
                      <CardHeader>
                        <HStack justify="space-between" align="center">
                          <HStack spacing={3}>
                            <Icon as={TimeIcon} color={theme.primary} boxSize={5} />
                            <Heading size="md" color={theme.textSecondary}>
                              当日分钟频数据
                            </Heading>
                            {minuteData && minuteData.trade_date && (
                              <Badge colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="xs">
                                {minuteData.trade_date}
                              </Badge>
                            )}
                          </HStack>
                          <Button
                            leftIcon={<RepeatIcon />}
                            size="sm"
                            variant="outline"
                            colorScheme={colorMode === 'light' ? 'blue' : 'yellow'}
                            onClick={loadMinuteData}
                            isLoading={minuteLoading}
                            loadingText="获取中"
                          >
                            获取分钟数据
                          </Button>
                        </HStack>
                      </CardHeader>
                      <CardBody>
                        {minuteLoading ? (
                          <Center h="400px">
                            <VStack spacing={4}>
                              <Spinner
                                thickness="4px"
                                speed="0.65s"
                                emptyColor={theme.bgDark}
                                color={theme.primary}
                                size="lg"
                              />
                              <Text color={theme.textMuted} fontSize="sm">
                                加载分钟频数据中...
                              </Text>
                            </VStack>
                          </Center>
                        ) : minuteData && minuteData.data && minuteData.data.length > 0 ? (
                          <VStack spacing={6} align="stretch">
                            {/* 分钟K线图 */}
                            <Box h="500px">
                              <ReactECharts
                                option={getMinuteKLineOption()}
                                style={{ height: '100%', width: '100%' }}
                                theme={colorMode === 'light' ? 'light' : 'dark'}
                              />
                            </Box>

                            {/* 分钟数据统计 */}
                            <SimpleGrid columns={{ base: 2, md: 4 }} spacing={4}>
                              <Stat>
                                <StatLabel color={theme.textMuted} fontSize="sm">
                                  <HStack spacing={1}>
                                    <Icon as={ArrowUpIcon} boxSize={3} />
                                    <Text>开盘价</Text>
                                  </HStack>
                                </StatLabel>
                                <StatNumber color={theme.textPrimary} fontSize="lg">
                                  {minuteData.data[0]?.open != null ? minuteData.data[0].open.toFixed(2) : '-'}
                                </StatNumber>
                              </Stat>
                              <Stat>
                                <StatLabel color={theme.textMuted} fontSize="sm">
                                  <HStack spacing={1}>
                                    <Icon as={ArrowDownIcon} boxSize={3} />
                                    <Text>当前价</Text>
                                  </HStack>
                                </StatLabel>
                                <StatNumber
                                  color={minuteData.data[minuteData.data.length - 1]?.close >= minuteData.data[0]?.open ? theme.success : theme.danger}
                                  fontSize="lg"
                                >
                                  {minuteData.data[minuteData.data.length - 1]?.close != null ? minuteData.data[minuteData.data.length - 1].close.toFixed(2) : '-'}
                                </StatNumber>
                                <StatHelpText fontSize="xs">
                                  <StatArrow
                                    type={minuteData.data[minuteData.data.length - 1]?.close >= minuteData.data[0]?.open ? 'increase' : 'decrease'}
                                  />
                                  {(minuteData.data[minuteData.data.length - 1]?.close != null && minuteData.data[0]?.open != null)
                                    ? Math.abs(((minuteData.data[minuteData.data.length - 1].close - minuteData.data[0].open) / minuteData.data[0].open * 100)).toFixed(2)
                                    : '0.00'}%
                                </StatHelpText>
                              </Stat>
                              <Stat>
                                <StatLabel color={theme.textMuted} fontSize="sm">
                                  <HStack spacing={1}>
                                    <Icon as={ChevronUpIcon} boxSize={3} />
                                    <Text>最高价</Text>
                                  </HStack>
                                </StatLabel>
                                <StatNumber color={theme.success} fontSize="lg">
                                  {(() => {
                                    const highs = minuteData.data.map(item => item.high).filter(h => h != null);
                                    return highs.length > 0 ? Math.max(...highs).toFixed(2) : '-';
                                  })()}
                                </StatNumber>
                              </Stat>
                              <Stat>
                                <StatLabel color={theme.textMuted} fontSize="sm">
                                  <HStack spacing={1}>
                                    <Icon as={ChevronDownIcon} boxSize={3} />
                                    <Text>最低价</Text>
                                  </HStack>
                                </StatLabel>
                                <StatNumber color={theme.danger} fontSize="lg">
                                  {(() => {
                                    const lows = minuteData.data.map(item => item.low).filter(l => l != null);
                                    return lows.length > 0 ? Math.min(...lows).toFixed(2) : '-';
                                  })()}
                                </StatNumber>
                              </Stat>
                            </SimpleGrid>

                            {/* 成交量分析 */}
                            <Box
                              p={4}
                              bg={colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.05)'}
                              borderRadius="lg"
                              border="1px solid"
                              borderColor={theme.border}
                            >
                              <HStack justify="space-between" mb={4}>
                                <Text fontWeight="bold" color={theme.textSecondary}>
                                  成交数据分析
                                </Text>
                                <HStack spacing={2}>
                                  <Badge colorScheme="purple" fontSize="xs">
                                    总成交量: {formatUtils.formatNumber(minuteData.data.reduce((sum, item) => sum + item.volume, 0), 0)}
                                  </Badge>
                                  <Badge colorScheme="orange" fontSize="xs">
                                    总成交额: {formatUtils.formatNumber(minuteData.data.reduce((sum, item) => sum + item.amount, 0))}
                                  </Badge>
                                </HStack>
                              </HStack>

                              <Grid templateColumns="repeat(3, 1fr)" gap={4}>
                                <Box>
                                  <Text fontSize="sm" color={theme.textMuted} mb={2}>
                                    活跃时段
                                  </Text>
                                  <Text fontSize="sm" color={theme.textPrimary}>
                                    {(() => {
                                      const maxVolume = Math.max(...minuteData.data.map(item => item.volume));
                                      const activeTime = minuteData.data.find(item => item.volume === maxVolume);
                                      return activeTime ? `${activeTime.time} (${formatUtils.formatNumber(maxVolume, 0)})` : '-';
                                    })()}
                                  </Text>
                                </Box>
                                <Box>
                                  <Text fontSize="sm" color={theme.textMuted} mb={2}>
                                    平均价格
                                  </Text>
                                  <Text fontSize="sm" color={theme.textPrimary}>
                                    {(() => {
                                      const closes = minuteData.data.map(item => item.close).filter(c => c != null);
                                      return closes.length > 0 ? (closes.reduce((sum, c) => sum + c, 0) / closes.length).toFixed(2) : '-';
                                    })()}
                                  </Text>
                                </Box>
                                <Box>
                                  <Text fontSize="sm" color={theme.textMuted} mb={2}>
                                    数据点数
                                  </Text>
                                  <Text fontSize="sm" color={theme.textPrimary}>
                                    {minuteData.data.length} 个分钟
                                  </Text>
                                </Box>
                              </Grid>
                            </Box>
                          </VStack>
                        ) : (
                          <Center h="300px">
                            <VStack spacing={4}>
                              <Icon as={InfoIcon} color={theme.textMuted} boxSize={12} />
                              <VStack spacing={2}>
                                <Text color={theme.textMuted} fontSize="lg">
                                  暂无分钟频数据
                                </Text>
                                <Text color={theme.textMuted} fontSize="sm" textAlign="center">
                                  点击"获取分钟数据"按钮加载最新的交易日分钟频数据
                                </Text>
                              </VStack>
                            </VStack>
                          </Center>
                        )}
                      </CardBody>
                    </ThemedCard>

                    <ThemedCard theme={theme}>
                      <CardHeader>
                        <Heading size="md" color={theme.textSecondary}>
                          交易明细
                        </Heading>
                      </CardHeader>
                      <CardBody>
                        <TableContainer>
                          <Table variant="simple" size="sm">
                            <Thead>
                              <Tr>
                                <Th color={theme.textSecondary}>日期</Th>
                                <Th isNumeric color={theme.textSecondary}>开盘</Th>
                                <Th isNumeric color={theme.textSecondary}>最高</Th>
                                <Th isNumeric color={theme.textSecondary}>最低</Th>
                                <Th isNumeric color={theme.textSecondary}>收盘</Th>
                                <Th isNumeric color={theme.textSecondary}>涨跌幅</Th>
                                <Th isNumeric color={theme.textSecondary}>成交量</Th>
                                <Th isNumeric color={theme.textSecondary}>成交额</Th>
                              </Tr>
                            </Thead>
                            <Tbody>
                              {tradeData.slice(-10).reverse().map((item, idx) => (
                                <Tr key={idx} _hover={{ bg: colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.1)' }}>
                                  <Td color={theme.textPrimary}>{item.date}</Td>
                                  <Td isNumeric color={theme.textPrimary}>{item.open}</Td>
                                  <Td isNumeric color={theme.textPrimary}>{item.high}</Td>
                                  <Td isNumeric color={theme.textPrimary}>{item.low}</Td>
                                  <Td isNumeric color={theme.textPrimary} fontWeight="bold">{item.close}</Td>
                                  <Td isNumeric color={item.change_percent >= 0 ? theme.success : theme.danger} fontWeight="bold">
                                {item.change_percent >= 0 ? '+' : ''}{formatUtils.formatPercent(item.change_percent)}
                                  </Td>
                                  <Td isNumeric color={theme.textPrimary}>{formatUtils.formatNumber(item.volume, 0)}</Td>
                                  <Td isNumeric color={theme.textPrimary}>{formatUtils.formatNumber(item.amount)}</Td>
                                </Tr>
                              ))}
                            </Tbody>
                          </Table>
                        </TableContainer>
                      </CardBody>
                    </ThemedCard>
                  </VStack>
                </TabPanel>

                {/* 融资融券 */}
                <TabPanel px={0}>
                  <VStack spacing={6} align="stretch">
                    <ThemedCard theme={theme}>
                      <CardBody>
                        {fundingData.length > 0 && (
                          <Box h="400px">
                            <ReactECharts 
                              option={getFundingOption()} 
                              style={{ height: '100%', width: '100%' }}
                              theme={colorMode === 'light' ? 'light' : 'dark'}
                            />
                          </Box>
                        )}
                      </CardBody>
                    </ThemedCard>
                    
                    <Grid templateColumns="repeat(2, 1fr)" gap={6}>
                      <ThemedCard theme={theme}>
                        <CardHeader>
                          <Heading size="md" color={theme.success}>
                            融资数据
                          </Heading>
                        </CardHeader>
                        <CardBody>
                          <VStack spacing={3} align="stretch">
                            {fundingData.slice(-5).reverse().map((item, idx) => (
                              <Box key={idx} p={3} bg={colorMode === 'light' ? 'rgba(255, 68, 68, 0.05)' : 'rgba(255, 68, 68, 0.1)'} borderRadius="md">
                                <HStack justify="space-between">
                                  <Text color={theme.textMuted}>{item.date}</Text>
                                  <VStack align="end" spacing={0}>
                                    <Text color={theme.textPrimary} fontWeight="bold">
                                      {formatUtils.formatNumber(item.financing.balance)}
                                    </Text>
                                    <Text fontSize="xs" color={theme.textMuted}>
                                      买入{formatUtils.formatNumber(item.financing.buy)} / 偿还{formatUtils.formatNumber(item.financing.repay)}
                                    </Text>
                                  </VStack>
                                </HStack>
                              </Box>
                            ))}
                          </VStack>
                        </CardBody>
                      </ThemedCard>
                      
                      <ThemedCard theme={theme}>
                        <CardHeader>
                          <Heading size="md" color={theme.danger}>
                            融券数据
                          </Heading>
                        </CardHeader>
                        <CardBody>
                          <VStack spacing={3} align="stretch">
                            {fundingData.slice(-5).reverse().map((item, idx) => (
                              <Box key={idx} p={3} bg={colorMode === 'light' ? 'rgba(0, 200, 81, 0.05)' : 'rgba(0, 200, 81, 0.1)'} borderRadius="md">
                                <HStack justify="space-between">
                                  <Text color={theme.textMuted}>{item.date}</Text>
                                  <VStack align="end" spacing={0}>
                                    <Text color={theme.textPrimary} fontWeight="bold">
                                      {formatUtils.formatNumber(item.securities.balance)}
                                    </Text>
                                    <Text fontSize="xs" color={theme.textMuted}>
                                      卖出{formatUtils.formatNumber(item.securities.sell)} / 偿还{formatUtils.formatNumber(item.securities.repay)}
                                    </Text>
                                  </VStack>
                                </HStack>
                              </Box>
                            ))}
                          </VStack>
                        </CardBody>
                      </ThemedCard>
                    </Grid>
                  </VStack>
                </TabPanel>

                {/* 大宗交易 */}
                <TabPanel px={0}>
                  <ThemedCard theme={theme}>
                    <CardHeader>
                      <Heading size="md" color={theme.textSecondary}>
                        大宗交易记录
                      </Heading>
                    </CardHeader>
                    <CardBody>
                      {bigDealData && bigDealData.daily_stats && bigDealData.daily_stats.length > 0 ? (
                        <VStack spacing={6} align="stretch">
                          {bigDealData.daily_stats.map((dayStats, idx) => (
                            <Box 
                              key={idx} 
                              p={4} 
                              bg={colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.05)'} 
                              borderRadius="lg" 
                              border="1px solid" 
                              borderColor={theme.border}
                            >
                              <HStack justify="space-between" mb={4}>
                                <Text fontSize="lg" fontWeight="bold" color={theme.textSecondary}>
                                  {dayStats.date}
                                </Text>
                                <HStack spacing={4}>
                                  <Badge colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="md">
                                    交易笔数: {dayStats.count}
                                  </Badge>
                                  <Badge colorScheme="green" fontSize="md">
                                    成交量: {formatUtils.formatNumber(dayStats.total_volume)}万股
                                  </Badge>
                                  <Badge colorScheme="orange" fontSize="md">
                                    成交额: {formatUtils.formatNumber(dayStats.total_amount)}万元
                                  </Badge>
                                  <Badge colorScheme="purple" fontSize="md">
                                    均价: {dayStats.avg_price != null ? dayStats.avg_price.toFixed(2) : '-'}元
                                  </Badge>
                                </HStack>
                              </HStack>
                              
                              {/* 显示当日交易明细 */}
                              {dayStats.deals && dayStats.deals.length > 0 && (
                                <TableContainer>
                                  <Table variant="simple" size="sm">
                                    <Thead>
                                      <Tr>
                                        <Th color={theme.textSecondary}>买方营业部</Th>
                                        <Th color={theme.textSecondary}>卖方营业部</Th>
                                        <Th isNumeric color={theme.textSecondary}>成交价</Th>
                                        <Th isNumeric color={theme.textSecondary}>成交量(万股)</Th>
                                        <Th isNumeric color={theme.textSecondary}>成交额(万元)</Th>
                                      </Tr>
                                    </Thead>
                                    <Tbody>
                                      {dayStats.deals.map((deal, i) => (
                                        <Tr key={i} _hover={{ bg: colorMode === 'light' ? 'rgba(43, 108, 176, 0.05)' : 'rgba(255, 215, 0, 0.1)' }}>
                                          <Td color={theme.textPrimary} fontSize="xs" maxW="200px" isTruncated>
                                            <Tooltip label={deal.buyer_dept || '-'} placement="top">
                                              <Text>{deal.buyer_dept || '-'}</Text>
                                            </Tooltip>
                                          </Td>
                                          <Td color={theme.textPrimary} fontSize="xs" maxW="200px" isTruncated>
                                            <Tooltip label={deal.seller_dept || '-'} placement="top">
                                              <Text>{deal.seller_dept || '-'}</Text>
                                            </Tooltip>
                                          </Td>
                                          <Td isNumeric color={theme.textPrimary} fontWeight="bold">
                                            {deal.price != null ? deal.price.toFixed(2) : '-'}
                                          </Td>
                                          <Td isNumeric color={theme.textPrimary}>
                                            {deal.volume != null ? deal.volume.toFixed(2) : '-'}
                                          </Td>
                                          <Td isNumeric color={theme.textSecondary} fontWeight="bold">
                                            {deal.amount != null ? deal.amount.toFixed(2) : '-'}
                                          </Td>
                                        </Tr>
                                      ))}
                                    </Tbody>
                                  </Table>
                                </TableContainer>
                              )}
                            </Box>
                          ))}
                        </VStack>
                      ) : (
                        <Center h="200px">
                          <Text color={theme.textMuted}>暂无大宗交易数据</Text>
                        </Center>
                      )}
                    </CardBody>
                  </ThemedCard>
                </TabPanel>

                {/* 龙虎榜 */}
                <TabPanel px={0}>
                  <ThemedCard theme={theme}>
                    <CardHeader>
                      <Heading size="md" color={theme.textSecondary}>
                        龙虎榜数据
                      </Heading>
                    </CardHeader>
                    <CardBody>
                      {unusualData && unusualData.grouped_data && unusualData.grouped_data.length > 0 ? (
                        <VStack spacing={6} align="stretch">
                          {unusualData.grouped_data.map((dayData, idx) => (
                            <Box 
                              key={idx} 
                              p={4} 
                              bg={colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.05)'} 
                              borderRadius="lg" 
                              border="1px solid" 
                              borderColor={theme.border}
                            >
                              <HStack justify="space-between" mb={4}>
                                <Text fontSize="lg" fontWeight="bold" color={theme.textSecondary}>
                                  {dayData.date}
                                </Text>
                                <HStack spacing={4}>
                                  <Badge colorScheme="red" fontSize="md">
                                    买入: {formatUtils.formatNumber(dayData.total_buy)}
                                  </Badge>
                                  <Badge colorScheme="green" fontSize="md">
                                    卖出: {formatUtils.formatNumber(dayData.total_sell)}
                                  </Badge>
                                  <Badge colorScheme={dayData.net_amount > 0 ? 'red' : 'green'} fontSize="md">
                                    净额: {formatUtils.formatNumber(dayData.net_amount)}
                                  </Badge>
                                </HStack>
                              </HStack>
                              
                              <Grid templateColumns="repeat(2, 1fr)" gap={4}>
                                <Box>
                                  <Text fontWeight="bold" color={theme.success} mb={2}>
                                    买入前五
                                  </Text>
                                  <VStack spacing={1} align="stretch">
                                    {dayData.buyers && dayData.buyers.length > 0 ? (
                                      dayData.buyers.slice(0, 5).map((buyer, i) => (
                                        <HStack
                                          key={i}
                                          justify="space-between"
                                          p={2}
                                          bg={colorMode === 'light' ? 'rgba(255, 68, 68, 0.05)' : 'rgba(255, 68, 68, 0.1)'}
                                          borderRadius="md"
                                        >
                                          <Text fontSize="sm" color={theme.textPrimary} isTruncated maxW="70%">
                                            {buyer.dept_name}
                                          </Text>
                                          <Text fontSize="sm" color={theme.success} fontWeight="bold">
                                            {formatUtils.formatNumber(buyer.buy_amount)}
                                          </Text>
                                        </HStack>
                                      ))
                                    ) : (
                                      <Text fontSize="sm" color={theme.textMuted}>暂无数据</Text>
                                    )}
                                  </VStack>
                                </Box>
                                
                                <Box>
                                  <Text fontWeight="bold" color={theme.danger} mb={2}>
                                    卖出前五
                                  </Text>
                                  <VStack spacing={1} align="stretch">
                                    {dayData.sellers && dayData.sellers.length > 0 ? (
                                      dayData.sellers.slice(0, 5).map((seller, i) => (
                                        <HStack
                                          key={i}
                                          justify="space-between"
                                          p={2}
                                          bg={colorMode === 'light' ? 'rgba(0, 200, 81, 0.05)' : 'rgba(0, 200, 81, 0.1)'}
                                          borderRadius="md"
                                        >
                                          <Text fontSize="sm" color={theme.textPrimary} isTruncated maxW="70%">
                                            {seller.dept_name}
                                          </Text>
                                          <Text fontSize="sm" color={theme.danger} fontWeight="bold">
                                            {formatUtils.formatNumber(seller.sell_amount)}
                                          </Text>
                                        </HStack>
                                      ))
                                    ) : (
                                      <Text fontSize="sm" color={theme.textMuted}>暂无数据</Text>
                                    )}
                                  </VStack>
                                </Box>
                              </Grid>
                              
                              {/* 信息类型标签 */}
                              <HStack mt={3} spacing={2}>
                                <Text fontSize="sm" color={theme.textMuted}>类型:</Text>
                                {dayData.info_types && dayData.info_types.map((type, i) => (
                                  <Badge key={i} colorScheme={colorMode === 'light' ? 'blue' : 'yellow'} fontSize="xs">
                                    {type}
                                  </Badge>
                                ))}
                              </HStack>
                            </Box>
                          ))}
                        </VStack>
                      ) : (
                        <Center h="200px">
                          <Text color={theme.textMuted}>暂无龙虎榜数据</Text>
                        </Center>
                      )}
                    </CardBody>
                  </ThemedCard>
                </TabPanel>

                {/* 股权质押 */}
                <TabPanel px={0}>
                  <VStack spacing={6} align="stretch">
                    <ThemedCard theme={theme}>
                      <CardBody>
                        {pledgeData.length > 0 && (
                          <Box h="400px">
                            <ReactECharts 
                              option={getPledgeOption()} 
                              style={{ height: '100%', width: '100%' }}
                              theme={colorMode === 'light' ? 'light' : 'dark'}
                            />
                          </Box>
                        )}
                      </CardBody>
                    </ThemedCard>
                    
                    <ThemedCard theme={theme}>
                      <CardHeader>
                        <Heading size="md" color={theme.textSecondary}>
                          质押明细
                        </Heading>
                      </CardHeader>
                      <CardBody>
                        <TableContainer>
                          <Table variant="simple" size="sm">
                            <Thead>
                              <Tr>
                                <Th color={theme.textSecondary}>日期</Th>
                                <Th isNumeric color={theme.textSecondary}>无限售质押(万股)</Th>
                                <Th isNumeric color={theme.textSecondary}>限售质押(万股)</Th>
                                <Th isNumeric color={theme.textSecondary}>质押总量(万股)</Th>
                                <Th isNumeric color={theme.textSecondary}>总股本(万股)</Th>
                                <Th isNumeric color={theme.textSecondary}>质押比例</Th>
                                <Th isNumeric color={theme.textSecondary}>质押笔数</Th>
                              </Tr>
                            </Thead>
                            <Tbody>
                              {Array.isArray(pledgeData) && pledgeData.length > 0 ? (
                                pledgeData.map((item, idx) => (
                                  <Tr key={idx} _hover={{ bg: colorMode === 'light' ? theme.bgDark : 'rgba(255, 215, 0, 0.1)' }}>
                                    <Td color={theme.textPrimary}>{item.end_date}</Td>
                                    <Td isNumeric color={theme.textPrimary}>{formatUtils.formatNumber(item.unrestricted_pledge, 0)}</Td>
                                    <Td isNumeric color={theme.textPrimary}>{formatUtils.formatNumber(item.restricted_pledge, 0)}</Td>
                                    <Td isNumeric color={theme.textPrimary} fontWeight="bold">{formatUtils.formatNumber(item.total_pledge, 0)}</Td>
                                    <Td isNumeric color={theme.textPrimary}>{formatUtils.formatNumber(item.total_shares, 0)}</Td>
                                    <Td isNumeric color={theme.warning} fontWeight="bold">
                                      {formatUtils.formatPercent(item.pledge_ratio)}
                                    </Td>
                                    <Td isNumeric color={theme.textPrimary}>{item.pledge_count}</Td>
                                  </Tr>
                                ))
                              ) : (
                                <Tr>
                                  <Td colSpan={7} textAlign="center" py={8}>
                                    <Text fontSize="sm" color={theme.textMuted}>暂无数据</Text>
                                  </Td>
                                </Tr>
                              )}
                            </Tbody>
                          </Table>
                        </TableContainer>
                      </CardBody>
                    </ThemedCard>
                  </VStack>
                </TabPanel>
              </TabPanels>
            </Tabs>
          )}
        </VStack>
      </Container>

      {/* 模态框 */}
      <Modal isOpen={isOpen} onClose={onClose} size="6xl">
        <ModalOverlay bg="rgba(0,0,0,0.8)" />
        <ModalContent bg={theme.bgCard} borderColor={theme.primary} borderWidth="1px">
          <ModalHeader color={theme.textSecondary}>详细信息</ModalHeader>
          <ModalCloseButton color={theme.textSecondary} />
          <ModalBody pb={6}>
            {modalContent}
          </ModalBody>
        </ModalContent>
      </Modal>
    </Box>
  );
};

export default MarketDataView;